Bagian 11 : Membuat Theme Wordpress dengan Framework Responsive

Membuat template untuk Halaman, Post dan daftar Post

Membuat template untuk halaman

Buka file index.php dan save as dengan nama page.php. File ini akan menjadi template untuk setiap halaman yang kita buat.
Yang pertama harus diubah adalah kata “Sorry, no posts matched your criteria.” Dengan misalnya “Sorry, halaman yang anda tuju tidak ada.”
Kemudian kita akan membuat halaman menjadi 2 kolom dengan menggunakan markup dari bootstrap. Tambahkan div dengan class “row”, “span8” dan “span4” dari bootstrap. Span8 akan kita gunakan untuk content halaman, dan span4 untuk sidebar.
Isi kode keseluruhan dari page.php menjadi seperti di bawah ini :

<?php get_header(); ?>
<div class=”row”>
<div class=”span8”>
<?php if(have_posts()) : while (have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>
<?php endwhile; else:?>
<p><?php _e(‘Maaf, halaman yang anda tuju tidak ada.’); ?></p>
<?php endif; ?>
</div>
<div class=”span4”>
</div>
</div>
<?php get_footer(); ?>
Karena kita juga akan menampilkan sidebar di beberapa template lainnya maka kita akan mempergunakan tag Wordpress get_sidebar() yang cara kerjanya sama dengan get_header maupun get_footer.
Untuk membuat sidebar, buatlah sebuah file bernama sidebar.php dan tulis kode berikut ini :
<h2>sidebar</h2>

Template Sidebar

Kita akan memodifikasi template sidebar nanti.
Sekarang buka dulu page.php dan tambahkan tag ger_sidebar() di dalam div span4.
<div class=”span4”>
<?php get_sidebar(); ?>
</div>

Template Daftar Post (Post Listing)

Template daftar post agak sedikit berbeda dan juga sedikit rumit. Karena template tersebut nantinya bukan hanya menampilkan judul da nisi dari post, tetapi menampilkan judul, permalink, tanggal dan lain-lain.
Untuk membuat template tersebut buka page.php dan save as sebagai home.php. Dalam wordpress home.php diperuntukan untuk daftar post. Kita akan mempergunakan home.php ini sebagai halaman News.
Tambahkan tag h1 untuk kata News di bagian paling atas dari content. Tag ini harus berada di atas loop.
Loop yang kita gunakan disini akan berulang untuk setiap post. Kita gunakan tag h2 untuk judul dari post.
Kita juga harus menambahkan tag _the_permalink() yang akan menjadi link untuk setiap post.
Markup dari kode link seperti di bawah ini :
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
Perubahan lain yang akan kita lakukan

  • Ubah kata Sorry no results menjadi Maaf tidak ada post
  • Tambahkan tanggal dengan format misalnya

Monday, October 1st, 2012

Kita gunakan tag the_time()

the_time(‘l, F jS, Y’)

Tambahkan tag hr untuk memisahkan masing-masing post

Kode akhir dari home.php

<?php get_header(); ?>
<div class="row">
<div class="span8">
<h1>Berita</h1>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <p><em><?php the_time('l, F jS, Y'); ?></em></p>
<hr>
<?php endwhile; else: ?>
<p><?php _e("Sorry, there are no posts."); ?></p>
<?php endif; ?>
</div>
<div class="span4">
<?php get_sidebar(); ?>
</div>
</div>
<?php get_footer(); ?>
Untuk melihat hasilnya ubah dulu setting dari admin area
Setting > Reading
Dalam drop down Posts Page pilih Home
Refresh website dan lihat hasilnya.

Template Single Post


  • Buka page.php dan save as dengan nama single.php
  • Tambahkan tanggal dengan kode berikut ini :


<p><em><?php the_time(‘l, F jS, Y’); ?></em></p>


  • Tambahkan tag untuk komentar yaitu dengan tag comments_template()
  • Kode final dari single.php :


<?php get_header(); ?>
<div class="row">
<div class="span8">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h1><?php the_title(); ?></h1> <p><em><?php the_time('l, F jS, Y') ?></em></p>
<?php the_content();?>
<hr>
<?php comments_template(); ?>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no this page does not exist.'); ?></p>
<?php endif; ?>
</div>
<div class="span4">
<?php get_sidebar(); ?>
</div>
</div>
<?php get_footer(); ?>

Tutorial  1  2  3  4  5  6  7  8  9  10  11  12

Bagian 11 : Membuat Theme Wordpress dengan Framework Responsive Bagian 11 : Membuat Theme Wordpress dengan Framework Responsive Reviewed by Ainun Mahya on 4:48 PM Rating: 5

2 comments:

Silakan Berkomentar dengan Bijak

Powered by Blogger.