Mengatur Konten dalam Themes WordPress

Dipublikasi pada Maret 9, 2011 oleh Lutvi Avandi

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.

Dan inilah hasil akhir hingga pelajaran ini:

hasil akhir themes

Selamat Mencoba!

Diakses dg kata kunci:

mengatur wordpress (35), mengatur layout wordpress (23), bagaimana mengatur link post pada word press (20), mengatur tata letak di wordpress (13), mengatur tata letak wordpress (7), letak layout pada wordpress (5), letak theme editor pada wordpress (5), cara membuat konten di wordpress (5), mengatur judul wordpress (4), mengatur konten di wordpress (4), mengatur layout pada wordpress (4), mengatur spasi di wordpress (3), cara merubah lebar template wordpress (3), atur wordpress (3), mengatur konten wordpress dengan maksimal (3), layout wp yang baik (3), cara merubah lebar halaman wordpress (3), mengatur html wordpress (3), mengubah letak title menu pada wordpress (2), membatasi jumlah post yang muncul wordpress (2), memanage wordpress 3 1 (2), letak editor theme di worpress (2), cara mengatur tata letak di wordpress (2), merubah letak tanggal terbit pada blog wordpress (2), cara mengatur tata letak pada wordpress (2), mengatur tata letak layout web wordpress (2), letak theme admin wordpress (2), cara mengatur tata letak menu pada wordpress (2), cara mengatur tata letak wordpress (2), membuat h2 pada post wp (2), plugin untuk membatasi jumlah artikel yang tampil di wordpress (2), kode html untuk mengatur spasi paragraf wp (2), mengatur letak title menu pada wordpress (2), home wordpress tidak bisa tampil (2), mengedit layout template wordpress (2), mengatur letak menu di wordpress (2), menghilangkan header bawaan theme pada wordpress (2), wp: cara merubah tata letak (2), menghilangkan spasi dalam wordpress (2), kode menampilkan artikel kategori tertentu wordpress (2), membuat post_class() di wordpress (2), menampilkan kategori wordpress dengan dengan php (2), coding php untuk menmpilkan jumlah baris (2), mengatur templete pada wordpress (1), merubah tag menjadi baris (1), mengaturan jumlah posting yang muncul wordpress (1), mengganti tag post wors press (1), mengganti konten dengan php (1), mengatur tulisan terakhir tampil pada wordpress (1), mengatur theme pada wordpress (1)

Daftar Isi Membuat Theme WP

  1. Cara Membuat Theme WordPress
  2. Membangun Theme WP: Style.css
  3. Membangun WP Theme: index.php
  4. Bikin Theme WP: Designing
  5. Bikin Tema WP: Layout
  6. Membuat Theme: Heading
  7. Buat Theme WordPress: Blog Header
  8. Buat Theme WP: Konten
  9. Mengatur Konten dalam Themes WordPress
  10. Styling Konten WordPress
  11. Membuat Sidebar Widget
  12. Styling Sidebar
  13. Membuat Footer
  14. Membuat Custom Background
  15. Membuat Drop Down Menu
  16. Search Form Gaya dengan Image
  17. Memasang Featured Image
  18. Memperbaiki tampilan halaman depan
  19. Membuat Featured Slide Show
  20. Bermain-main dengan Looping WordPress
  21. Memecah File Themes
  22. Memecah Sidebar
  23. Membuat File Single.php, archive.php, dll
Suka dengan artikel Mengatur Konten dalam Themes WordPress ini gan? Bagi cendolnya dong... !! Silahkan dipilih-dipilih mana yang ente suka

Tentang Lutvi Avandi

Lutvi avandi adalah praktisi bisnis online dan aktif di forum WordPress sebagai moderator forum WordPress Indonesia. Sering melakukan penelitian seputar pengembangan WordPress untuk berbagai keperluan. SOCIAL NETWORK: Google+ Profile, Twitter
Tulisan ini dipublikasikan di Theme WordPress. Tandai permalink.

42 Respon untuk Mengatur Konten dalam Themes WordPress

  1. grandchief berkata:
    Maret 15, 2011 pada 7:31 am

    Akhirnya ada juga artikelnya di home page :D

    Balas
  2. john kova berkata:
    April 2, 2011 pada 9:07 am

    mas pada artikel sebelumnya pada bagian ini <a href="<?php the_
    kan menggunakan div terus yang harus diterapkan yang mana? Maksudnya pada bagian h2 class tittle.

    Balas
    • admin berkata:
      April 4, 2011 pada 1:21 am

      bisa diperjelas pertanyaannya? Jangan khawatir anda masukkan lebih banyak tulisanpun tetap saya yang tanggung space-nya kok hehehe.. Jadi gak perlu terlalu hemat ngasih kode :)

      Balas
  3. Souvenir Pernikahan berkata:
    April 23, 2011 pada 5:43 am

    Thanks sangat membantu

    Balas
  4. fadil berkata:
    Mei 2, 2011 pada 9:53 pm

    nice post…
    wah,, sy tertarik nih mas dengan mengubah H2 pada judul posting di home page mnjadi H1 pada single post… tutornya belum terbit ya?

    Balas
  5. Hasopa berkata:
    Juni 28, 2011 pada 10:41 am

    Mas, kok kalo isi komentar dipostingan error terus..?? Saya sudah sampai step akhir, tapi pas ngisi komentar malah eror..
    muncul error kayak gini :
    Warning: Cannot modify header information – headers already sent by (output started at C:\AppServ\www\wordpress\wp-content\themes\theme4571\functions.php:71) in C:\AppServ\www\wordpress\wp-includes\pluggable.php on line 897

    mohon pencerahan mas… :)

    Balas
  6. Mbah Lalar berkata:
    Agustus 8, 2011 pada 8:23 am

    Tolooooooooong. webku gak bisa dibukaaaaaaaaa…….!!!!
    Yg berkenan membantu di persilahkan hubungi 089668068388

    Balas
  7. yoyo berkata:
    Agustus 12, 2011 pada 4:15 am

    kalo buat single post aja yang tampil di home page gimana mas? biasanya kan artikel selalu kepotong sma readmore nah cr menghilangkan readmorenya gmn mas? jadi artikel bisa tampil secara full .. :D

    Balas
  8. agrobuah berkata:
    Agustus 21, 2011 pada 5:27 pm

    numpang tanya gan
    setelah daftar di http://blogdirectory.me/
    disuruh di bawah ini
    Please put his code in your blog before submitting it.

    src=”http://blogdirectory.me/strip.php?uid=8914&cat=9″>
    dimana tempatnya ya peng copy anya.
    mohon balasanya di
    agro_buah@yahoo.com

    Balas
  9. agrobuah berkata:
    Agustus 22, 2011 pada 12:00 pm

    terimakasih balasannya. dan akan saya coba.
    dan mohon beri tahu kami untuk optimasi yang simpel dan PR cepat naik Bagaimana caranya.

    Balas
  10. Reyz Schiffer berkata:
    Agustus 22, 2011 pada 4:40 pm

    Maaf, ketika saya melakukan langkah diatas…
    kenapa sidebarnya jadi dibawah yah bukan disamping ?

    Balas
    • Reyz Schiffer berkata:
      Agustus 22, 2011 pada 4:45 pm

      ini full script css nya

      #wrap {

  }
#header { 
  background-color:#cccccc;
  height:120px;
  }
#maincontent { 
  margin-top:15px;
  }
#content {
  background-color:#ffcc00;
  width:70%;
  float:left;
  }
#sidebar {
  background-color:#ff9900;
  width:29%;
  margin-left:1%;
  float:left;
  }
#lebar {
  background-color:#ff3300;
  margin-bottom:10px;
  }
#kiri {
  background-color:#660000;
  width:49%;
  float:left;
  }
#kanan {
  background-color:#660000;
  width:49%;
  float:left;
  margin-left:2%;
  }
#menu {
  margin-top:10px;
  padding:0;
  background:#000;
  height:30px;
  }
#menu ul {
  margin:0;
  padding:5px 0 0 15px;
  list-style-type:none;
  display:block;
  }
#menu li, #menu a {
  float:left;
  position:relative;
  margin-right:10px;
  color:#fff;
  text-decoration:none;
  }
.blogtitle {
  font-size:30pt;
  padding:30px 0 0 30px;
  margin:0;
  }
.description {
  font-size:15px;
  padding-left:30px;
  margin:0;
  }
body { 
  font-family:georgia;
  }

      kesalahannya ketika saya memasukkan artikel blog. saat sebelumnya waktu cuma teks biasa (“Artikel disini”) sidebar berfungsi dengan baik.
      tapi stelah muncul artikel wordpress jadi dibawah

      tolong bantuannya :D terima kasih

      Balas
  11. Catatan Harian berkata:
    Oktober 22, 2011 pada 4:33 am

    Mas juragan, mau tanya maksud tanda koma dalam kode ini apa ya >>>

    Kebetulan tadi pas nyoba salah ga dikasih tanda koma, terus jadi list gitu kategorinya, nah pas dikasih tanda koma seperti contoh disini memang langsung tidak nge-list.

    Nah memang maksud dari tanda koma tersebut apa ya mas ? trims

    Balas
  12. Catatan Harian berkata:
    Oktober 22, 2011 pada 4:35 am

    Waduh kode PHP nya malah ngilang ?
    Test,,, ini mas kodenya:
    <?php the_category(', '); ?>

    Balas
  13. Edso CoreLives berkata:
    November 3, 2011 pada 8:21 am

    mas… pada bagian ini kq tampilan punya saya ga ada “” Read More”" / Baca Selengkapnya ya.???
    padahal saya sudah merubah
    (p>(?php the_content(); ?></p)
    menjadi
    (p></p)

    Balas
  14. Edso CoreLives berkata:
    November 3, 2011 pada 8:22 am

    hadoh … contoh scripnya ga jadi… :D

    Balas
  15. wisnusamiaji berkata:
    November 17, 2011 pada 2:44 am

    maaf mas mau nanya gimana perintahnya kalau tampilan jumlah komentar ada di bawah posted on,jadi gak sebaris gitu ?

    Balas
  16. bamz berkata:
    November 24, 2011 pada 12:53 am

    Assalamu’alaikum, mf kang, klo untuk merubah warna isi content (isi postingan), itu gmn ya? makasih

    Balas
  17. panghaidar berkata:
    Desember 10, 2011 pada 2:28 am

    URL kontennya pas diklik “object not found!” kira2 kenapa ya mastah…

    Balas
    • panghaidar berkata:
      Desember 10, 2011 pada 2:34 am

      RALAT..
      itu karena permalinknya saya set /%postname/, waktu saya hapus kode permalinknya URL artikel bisa diklik.. :D . maaf neh Kang lutvi banyak komentar.. coba kalau bisa dihapus komentar saya :D

      Balas
  18. Endri berkata:
    Desember 25, 2011 pada 12:09 pm

    Mantap mas, tulisan2nya sangat bermanfaat,.
    saya ada sedikit pertanyaan nich,
    - while ( have_posts() ) : the_post(); apakah script ini akan memunculkan semua post yang kita miliki??
    - bagaimana membatasi jumlah post yang muncul dihalaman utama. (kasus jika post sudah banyak)
    - adakah fungsi bawaan untuk paging ? jika jumlah post yang tampil dibatasi?
    terimakasih.

    Balas
  19. IT Informasi berkata:
    Maret 16, 2012 pada 4:42 am

    manfaat sekali ilmunya…..
    thanks ya mas!!!

    Balas
  20. Wp fans berkata:
    Maret 19, 2012 pada 9:07 am

    Mas Lutvi, naro dimana :-s

    Balas
  21. amin berkata:
    April 27, 2012 pada 1:22 am

    mas saya yang baca selengkapnya gg muncul, kenapa yah?

    Balas
  22. Yudi Long berkata:
    Mei 14, 2012 pada 2:30 am

    Mas tolong di cek sort code saya karena dimana letak salah nya

    <div id="post- ” >

    <a href="” rel=”bookmark” title=”

    publish on
    under by

    Balas

Tinggalkan Balasan

Alamat surel Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

*

Anda dapat menggunakan tag dan atribut HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>