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.

Dan inilah hasil akhir hingga pelajaran ini:

hasil akhir themes

Selamat Mencoba!

Dicari dengan kata kunci:

mengatur layout wordpress,mengatur wordpress,mengatur tata letak di wordpress,cara mengatur layout wordpress,bagaimana mengatur link post pada word press,cara mengatur tata letak wordpress,mengatur tata letak wordpress,cara edit tata letak wordpress,cara mengatur tata letak di wordpress,cara mengatur THEMES

75 thoughts on “Mengatur Konten dalam Themes WordPress

  1. john kova

    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.

    1. admin Post author

      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 πŸ™‚

  2. fadil

    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?

  3. Hasopa

    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… πŸ™‚

    1. admin Post author

      Kemungkinan ada masalah di functions.php karena seharusnya file itu tidak boleh menampilkan apa-apa tapi dalam themes anda dia menampilkan sesuatu

      1. Hasopa

        Mas, bisa minta file source kode semuanya gak (index.php, style.css, functions.php)..??

        Sampai saat ini belum dapet solusinya.. πŸ™

  4. yoyo

    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 .. πŸ˜€

    1. Reyz Schiffer

      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 πŸ˜€ terima kasih

  5. Catatan Harian

    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

  6. Edso CoreLives

    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)

    1. Lutvi Avandi Post author

      Kodenya kok aneh? Beneran pakai kurung? Kalau ingin kirim kode gunakan seperti ini:

      
      <pre name="code" class="php">
        <p><?php the_content(); ?></p>
      </pre>
      

      1. Ω…Ψ­Ω…Ψ― Ψ³Ω‡Ω„Ψ§Ω† Ψ±Ψ΄ΩŠΨ―Ω‰

        Maaf Mas Lutvi, saya cuma nyoba SyntaxHighlighter. Ternyata berjalan di komentar dan tidak terfilter. Kalau saya lihat source blog ini tertulis:

        <link href="http://wordpress.or.id/wp-content/plugins/google-syntax-highlighter/Styles/SyntaxHighlighter.css" type="text/css" rel="stylesheet" />
        .
        Mas Lutvi pakai plugin Google Syntax Highlighter for WordPress (http://wordpress.org/extend/plugins/google-syntax-highlighter/) atau yang lainnya? Saya merasa ketika membuka blog ini sangat ringan dibanding blog saya yang pakai plugin yang saya pakai (http://wordpress.org/extend/plugins/wp-syntaxhighlighter/). Maaf dan terimakasih.

  7. wisnusamiaji

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

    1. panghaidar

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

  8. Endri

    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.

      1. Dadang herdiana

        Mas kalo buat modifikasi bagian komentarnya gmana mas, untuk style dll. saya udah buat thema sesuai di tutorial web ini, tp untuk Menu komentar belum nemu… πŸ™‚

  9. Yudi Long

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

    <div id="post- ” >

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

    publish on
    under by

  10. masbro

    mas, ini kok yg bagian ini ga mau motong dan ga kluar tulisan ‘Baca Selengkapnya’ ya?

  11. Parimin

    MAs, punya saya kog gak bisa ada “read more” nya ya, munculnya post nya penuh… salahnya dimana ya?

  12. rizal

    Mas, box #Wrap ku kok gak ikut memanjang menyesuiakan #content yang memanjang ke bawah. Kenapa ya mas?

  13. ridho

    Mas,itu kenapa yah kok punya saya g bisa muncul2.malah eror bgin.

    Fatal error: Call to undefined function have_post() in C:\xampp\htdocs\wordpress\wp-content\themes\ridho\index.php on line 34

  14. astie

    ketoke kok mumet yow mas..
    aku belum pernah bikin template apapun πŸ˜€
    tp pengen bisa.
    nanti ku coba deh..
    tangkiyu ya tutornya πŸ™‚

  15. nuron

    mas mhon ilmunya , saya ingin mengatur jumlah postingan, berita terbaru. mohon bantu mesti ditambah apa? disini :
    //

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

    //
    trims..

  16. haka

    Mas Lutvi, punya saa kok gak bisa dipasang read more yah?

    Kode ini juga gak ada :

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

    Tolong pencerahannya. Saya pakai template dari ThemeZee πŸ™‚

  17. like this

    I simply want to tell you that I’m beginner to weblog and actually savored this blog. Very likely I’m planning to bookmark your site . You actually have terrific articles and reviews. Appreciate it for sharing your web site.

  18. Rogelio Laford

    I loved as much as you’ll receive carried out right here. The sketch is attractive, your authored subject matter stylish. nonetheless, you command get got an edginess over that you wish be delivering the following. unwell unquestionably come more formerly again since exactly the same nearly a lot often inside case you shield this increase.

  19. Cory Brodbeck

    Thanks for sharing excellent informations. Your web-site is so cool. I am impressed by the details that you have on this blog. It reveals how nicely you perceive this subject. Bookmarked this web page, will come back for extra articles. You, my pal, ROCK! I found just the info I already searched all over the place and simply could not come across. What a great site.

  20. Norberto Chappie

    you are really a good webmaster. The site loading speed is amazing. It seems that you’re doing any unique trick. Also, The contents are masterwork. you’ve done a great job on this topic!

  21. Kevin Lukes

    I like the valuable information you provide in your articles. I’ll bookmark your weblog and check again here regularly. I am quite certain I’ll learn plenty of new stuff right here! Good luck for the next!

  22. Lura Zourkos

    Undeniably believe that which you stated. Your favorite justification seemed to be on the net the easiest thing to be aware of. I say to you, I certainly get irked while people consider worries that they just do not know about. You managed to hit the nail upon the top as well as defined out the whole thing without having side-effects , people can take a signal. Will likely be back to get more. Thanks

Comments are closed.