Judul : Bagian 9 : Membuat Theme Wordpress dengan Framework Responsive
link : Bagian 9 : Membuat Theme Wordpress dengan Framework Responsive
Bagian 9 : Membuat Theme Wordpress dengan Framework Responsive
Membuat Homepage Wordpress
Sampai disini kita telah mempunyai sebuah template static. Kita akan membuat sebuah template yang dinamis dengan membuat sebuah halaman homepage dan menampilkannya dalam halaman Wordpress dan menggantikan halaman HTML yang sekarang kita punyai.Untuk melakukan ini pada halaman admin Wordpress, klik pages, klik new dan buatlah sebuah halaman dengan judul Home dan klik HTML atau text. Copy kode yang terdapat di index.php dan paste kan di halaman Home tadi.
Seluruh kode dalam index.php harus dicopy semua termasuk headed an footer include :
<?php get_header(); ?>
<?php get_footer(); ?>
<?php get_footer(); ?>
Agar isi halaman Homepage yang tadi kita buat dalam halaman admin dapat kembali ke template wordpress secara dinamis kita membutuhkan sebuh function yang paling popular dalam wordpress yaitu Loop.
Loop seperti artinya adalah pengulangan, loop wordpress juga akan mengulang dalam seluruh halaman dan post wordpress berbagai informasi seperti judul, isi, tanggal, pengarang dan juga komentar yang berkaitan.
Kode loop dasar seperti ini :
<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
<?php endwhile; else: ?>
<p><?php _e(‘Sorry, no posts matched your criteria’); ?></p>
<?php endif; ?>
<?php endwhile; else: ?>
<p><?php _e(‘Sorry, no posts matched your criteria’); ?></p>
<?php endif; ?>
Halaman index.php yang sudah disisipi loop akan Nampak seperti ini:
<?php get_header(); ?>
<?php if(have_posts()): while(have_posts()) : the_post(); ?>
<?php endwhile; else: ?>
<p><?php _e(‘Sorry, no posts matched your criteria’); ?></p>
<?php endif; ?>
<?php get_footer(); ?>
<?php if(have_posts()): while(have_posts()) : the_post(); ?>
<?php endwhile; else: ?>
<p><?php _e(‘Sorry, no posts matched your criteria’); ?></p>
<?php endif; ?>
<?php get_footer(); ?>
Dan sekarang kita akan menambahkan judul dan content halaman. Kode untuk judul : the_title() dan kode untuk content the_content(). Tambahkan kode tersebut ke dalam index.php sehingga kode index.php akan kelihatan seperti ini :
<?php get_header(); ?>
<?php if(have_posts()): while(have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>
<?php endwhile; else: ?>
<p><?php _e(‘Sorry, no posts matched your criteria’);?></p>
<?php endif; ?>
<?php get_footer(); ?>
Sekarang kita test hasilnya, namun sebelumnya ubah dahulu setting Wordpress. Dalam admin area klik Setting > Reading > Front page displays<?php if(have_posts()): while(have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>
<?php endwhile; else: ?>
<p><?php _e(‘Sorry, no posts matched your criteria’);?></p>
<?php endif; ?>
<?php get_footer(); ?>
Ubah dari “Your Latest Posts” menjadi “a static page” dan pilih dalam Front page halaman Home.
Klik “Save Changes” dan kemudian coba refresh halaman Wordpress kita.
Kita juga bias membuat file front-page.php sebagai Home page. Save as index.php dan beri nama front-page.php. Hapus the_title() karena kita tidak ingin judul “Home” Nampak disana.
Kode dalam front-page.php seperti ini:
<?php get_header(); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
<?php get_footer(); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
<?php get_footer(); ?>
Edit content dalam halaman Home
Hapus button yang berada di bawah heading <h2>
Sekarang coba buka website wordpress kita.
Tampilannya sekarang harusnya seperti di bawah ini :
Demikianlah Artikel Bagian 9 : Membuat Theme Wordpress dengan Framework Responsive
Sekianlah artikel Bagian 9 : Membuat Theme Wordpress dengan Framework Responsive kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.
Anda sekarang membaca artikel Bagian 9 : Membuat Theme Wordpress dengan Framework Responsive dengan alamat link https://infoasikindo.blogspot.com/2013/10/bagian-9-membuat-theme-wordpress-dengan.html


0 Response to "Bagian 9 : Membuat Theme Wordpress dengan Framework Responsive"
Post a Comment