Mengatur Konten dalam Themes WordPress

Wah, tidak terasa sudah lama sekali saya tidak meneruskan penduan membuat theme di wordpress.or.id. Bagaimana PR yang saya berikan, harusnya sih udah selesai semua ya? Nah, pertemuan kali ini saya cuma akan menunjukkan pengaturan konten yang saya lakukan. Barangkali ada yang masih belum mengerjakan, silahkan deh di contek

  <div id="content">
   <?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>
    <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
      <h2 class="title"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
      <p><?php the_content(); ?></p>
      <div id="postmeta">Publish on <?php the_time('F jS, Y'); ?> under <?php the_category(', '); ?> by <?php the_author(); ?> | 
      <?php comments_popup_link('No Comments &raquo;', '1 Comment &raquo;', '% Comments &raquo;'); ?> 
      <?php edit_post_link('Edit','','|'); ?></div>
    </div>
    <?php comments_template(); ?>
    <?php endwhile;?>
   <?php endif;?>
  </div>

Saya jelasin per barisnya ya. Baris pertama sampai ketiga sudah saya jelaskan di cara membuat konten bagian looping. Jadi kita langsung melompat ke baris ke empat yaitu:

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>></div>

Disini kita pasang DIV pada bagian awal dan akhir tiap artikel. Gunanya sangat banyak, siapa tahu nanti anda ingin memberi warna khusus backgroud tulisan yang di sticky atau anda mau memberi warna khusus untuk kategori tertentu. Banyaklah nanti manfaatnya. Selain itu, ini juga akan merapikan struktur themes anda nantinya.

Selanjutnya:<h2 class="title"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>

Disini saya menempatkan tag H2 dan A untuk menampilkan judul artikel <?php the_title(); ?>. Tak hanya itu, saya juga menempatkan class=”title” di tag H2 sehingga nanti bisa kita atur stylenya. Rencana saya, nanti ketika di halaman single, tag H2 ini akan saya rubah menjadi H1 sehingga lebih SEO Friendly. Caranya? Nanti dulu ya? Pelan-pelan 

<p><?php the_content(); ?></p>

Kode diatas digunakan untuk menampilkan isi artikel. Jika kode ini ada di home atau archive, maka dia akan mencari tanda readmore secara otomatis dan memotongnya. Anda bisa memodifikasi tulisan default yang muncul di tempat pemotongan dengan menggunakan kode ini:

<p><?php the_content('Baca Selengkapnya'); ?></p>

Selanjutnya kita akan bahas langsung 3 baris karena nanti di blog 3 baris kode ini akan muncul hanya sebaris saja. Jadi kita sikat aja langsung ketiganya. OK?

<div id="postmeta">Publish on <?php the_time('F jS, Y'); ?> under <?php the_category(', '); ?> by <?php the_author(); ?> | 
<?php comments_popup_link('No Comments &raquo;', '1 Comment &raquo;', '% Comments &raquo;'); ?> 
<?php edit_post_link('Edit','','|'); ?></div>

Tiga baris diatas, diapit dengan DIV dengan id=”postmeta”. Kita beri id karena nanti akan kita rubah style-nya sehingga berbeda dengan konten. Biasanya sih dibuat ukurannya lebih kecil dan ada box gitu. Di dalam post meta ini kita masukkan tanggal artikel ini di publish dengan kode

<?php the_time('F jS, Y'); ?>.

Kita juga akan menampilkan kategori artikel ini dengan perintah <?php the_category(', '); ?>. Lalu disambung dengan menampilkan penulis artikel dengan kode <?php the_author(); ?>.

Baris berikutnya adalah kode untuk menampilkan jumlah komentar lengkap dengan link menuju lokasi komentar. Kata-kata dalam kurung adalah tulisan yang akan muncul bila tidak ada komentar, 1 komentar dan lebih dari satu komentar.

Baris yang dalam post meta ini adalah link Edit. Link ini hanya muncul jika anda login sebagai admin atau editor atau author artikel tersebut. Jika bukan itu, maka link tidak akan muncul.

Terakhir kode yang akan kita bahas adalah <?php comments_template(); ?>. Seperti nama fungsinya, kode ini adalah untuk menampilkan komentar lengkap dengan form untuk mengisi komentarnya.

Selamat Mencoba!

Source: Wordpress

Wordpress

Tweet