February 29th, 2008

Comment ListSaya masih saja agak kesulitan untuk menulis tutorial baru tentang membuat wordpress theme. Dikarenakan banyak hal yang terkait satu sama lain. Jadi mungkin akan lebih baik daripada tidak sama sekali, saya mencoba menulis tutorial yang masih berhubungan dengan wordpress, tapi hanya sebagian saja. Dan kali ini tentang bagaimana kita memanipulasi daftar komentar, dengan memberikannya sedikit CSS agar terlihat lebih berwarna dan tentu saja menarik.

Hasil dari tutorial ini adalah membuat kotak komentar menjadi warna strip. Bahasa gampangnya, punya warna berbeda di nomor ganjil dan genapnya. Selain itu, saya juga membahas bagaimana membuat komentar dari sang author atau sang empunya blog berbeda sendiri dari warna-warna lain seperti di blog ini.

Comments.php

Daftar-daftar komentar dan form komentar biasanya berada di file comments.php di theme wordpress yang sedang digunakan. Saya harapkan jangan berbuat hal yang macam-macam jika anda tidak tahu apa yang sedang anda lakukan. Seperti komentar di bagian bawah file comments.php, if you delete this the sky will fall on your head. Hehehe…

Buka comments.php di editor kesayangan anda. Jangan tanya saya editornya. Yang terpenting adalah, anda bisa mengubahnya. Mau pakai software apa saja, itu tergantung kesukaan.

Setelah membukanya, carilah kode di bawah ini

[source:php]foreach ($comments as $comment) :[/source]

Kode diatas bermaksud mencoba membaca semua komentar yang ada dengan menggunakan teknik iterasi (perulangan). Jadi proses yang berada di dalam kode tersebut, dieksekusi secara terus menerus sampai dengan komentar untuk post yang bersangkutan habis.

Membuat warna strip

Untuk membuat warna strip di blok komentar, anda membutuhkan sebuah variabel penunjuk status. Kita bisa membuat variabel sendiri bernama katakanlah, j. Jadi, ubah kode foreach di atas menjadi seperti ini kira-kira.

[source:php]<?php
$j=0;
foreach ($comments as $comment) :
?>[/source]

Artinya, kita mulai membuat sebuah variabel bernama j dan langsung memberikannya sebuah nilai 0.

Lalu tambahkan kode ini persis di bawah baris foreach:

[source:php]if($j%2==0) $class=”comment-1″;
else $class=”comment-2″;
$j++;[/source]

Artinya, jika nilai j habis dibagi dengan angka 2 (artinya nilai adalah genap) maka kita membuat sebuah variabel $class yang berisi “comment-1″. Selain itu (artinya nilai adalah ganjil) maka variabel $class kita isi dengan “comment-2″. Setelah itu, nilai $j ditambahkan satu.

Dengan kode di atas, maka kita membuat 2 buah blok komentar dengan masing-masingnya punya keunikan tersendiri dari nama class.

Kemudian ubah blok komentar anda dengan melakukan penambahan class seperti di bawah ini:

<div class="comments <?php echo $class ?>" id="comment-<?php comment_ID();?>">

Situasi blok komentar mungkin bisa saja berbeda, tapi yang jelas, biasanya ada di semua theme wordpress. Diperhatikan saja pola-nya. Pada prinsipnya, hanya untuk menambahkan sebuah class unik di setiap blok ganjil dan genap.

Dan sudah, halas, bas, finish. Itu saja. Gampang? oh iyaaa…

Membuat style sendiri untuk admin blog

Tidak jauh berbeda dengan bagian atas, untuk bagian ini hanya perlu membutuhkan kondisi saja. Konsepnya, anda cuma butuh mencocokkan email yang anda gunakan untuk verifikasi sebagai admin.

Langkah pertama, buat dulu sebuah variabel tepat di bawah variabel $j yang sudah kita tulis di bagian atas. Lengkapnya jadi begini.

[source:php]<?php
$j=0;
$author_class = “”;
foreach ($comments as $comment) :
?>[/source]

Kemudian, tinggal menaruh kondisi tepat di bawah kondisi nilai genap dan ganjil yang sudah kita buat di atas. Lengkapnya jadi begini:

[source:php]if($j%2==0) $class=”comment-1″;
else $class=”comment-2″;
$j++;
if($comment->comment_author_email == “didats@dimanasaja.com”) $author_class = “byauthor”;[/source]

Nah, langkah terakhir tinggal bagaimana kita menaruh variabel $author_class di bagian blok komentar. Tinggal edit saja bagian atas menjadi seperti ini:

[source:php]<div class=”comments <?php echo $class.” “.$author_class ?> ” id=”comment-<?php comment_ID();?>”>[/source]

Lengkapnya, jadi seperti ini:

[source:php]<?php
$x=0;
$author_class = “”;
foreach ($comments as $comment) :
if($j%2==0) $class=”comment-1″;
else $class=”comment-2″;
$j++;

if($comment->comment_author_email == “didats@dimanasaja.com”) $author_class = “byauthor”;
?>
<div class=”comments <?php echo $class.” “.$author_class ?> ” id=”comment-<?php comment_ID();?>”>[/source]

Bagian CSS

Memanipulasi theme wordpress sudah, sekarang saatnya kita memberikan sebuah penyelesaian akhir atas manipulasi yang telah kita buat. Yang perlu diingat, akan ada 3 buat class baru yang harus kita definisikan di file style.css yang ada di theme aktif. Yaitu, class comment-1, comment-2, dan byauthor.

Buka file style.css, dan tempatkan kursor di bagian paling akhir. Tulis seperti ini:

[source:css].comment-1 {
background:#F1F0DC;
}
.comment-2 {
background:#F7F7F7;
}
.byauthor {
background:#EFEFEF !important;
border-top:1px solid #999;
border-bottom:1px solid #999;
}[/source]

Artinya, kita membuat blok komentar yang bernilai genap dengan background berwarna agak orange, dan blok komentar yang ganjil dengan background berwarna abu-abu terang. Sedangkan untuk si author, memberi warna abu-abu terang yang lebih gelap sedikit dari blok ganjil, serta menambahkan border di atas dan di bawah.

Ternyata memang mudah, kan? :P

Related posts:

  1. Tutorial: Membuat template WordPress (1) Siapapun yang punya blog dengan mesin WordPress tentunya ingin membuat...
  2. Tutorial: Membuat template WordPress(3) – Header Lanjut lagi. Setelah membahas masalah desain, kini kita berlanjut ke...
  3. Tutorial: Membuat template wordpress (2) – Desain template Yeah, akhirnya tutorial bagian pertama dilanjutkan. Dari beberapa komentar dan...
  4. Tutorial: Membuat 2 kolom sama tinggi tanpa bantuan image Perhatian: Tulisan ini sangat panjang. Lebih baik invite aan sebelum...
  5. Belajar Javascript lebih lanjut dengan JQuery (2) Membuat form dengan AJAX Membuat form adalah hal biasa dalam...

Label:, , , , , , ,



Kategori:Technology, blog, programming, tutorial, wordpress



66 Responses

  1. vixcious says:

    thanks mas tutorialnya blog say ajadi lebih cool hhee

  2. mas aku punya template wordpress ,tetapi kalo mau kasih komentar harus login dulu,gimana supaya bisa langsung isi saja
    karena kalo pakai login orang lain nggak bisa komentar,tolong di jawab yaaa?

  3. enggink says:

    coba ga coba ga coba ga,
    nti ajalah, ntar malah error

  4. kombes.com says:

    Wah master WordPress semua nich disini, bantuin dunk temen2 lainnya di Forum : http://forum.kombes.com/forumdisplay.php?f=55 (Forum WordPress) Thanks yach

  5. some map says:

    setuju dengan mas @agung, bikin sceme WP nya dong mas, macam logic flownya gitu. masih bingung ni…

  6. Bejo says:

    Salam Jumpa.

    Rencananya saya mau modifikasi template wordpress seperti pada web http://www.sriponews.com. Apa yg harus saya lakukan. Mengingat saya baru belajar wp tersebut.

    Untuk contoh templatenya sudah saya dapatkan. Atau moderator mau kasih template yang mendekati web tersebut.

    Terima kasih

    Bejo Roy

  7. YNa says:

    mau coba ah.. moga berhasil. doakan saya ya :D. thanks sharing-nya ;)

    *utak-atik blog*

  8. admin says:

    Saya masih kurang mengerti, apa mungkin karna baru memulai bikin blog ya. Mohon pencerahannya

  9. admin says:

    Terima kasih artikelnya yang sangat berguna untuk mendesain blog saya

  10. afif says:

    waduh,,,bikin pusing aku yang pemula boss

  11. arlina says:

    nice blog…
    masih hrs belajar banyak tuk ngikutin tips ini.. thx anyway…

  12. rudy says:

    Wah Mas, teler berat ngebaca & ngurutinnya. Jadi keriting :D.

    Makanya diciptain plug-in yg sangat berguna bagi orang2x kaya saya kali ya :D

  13. Farcham says:

    salam kenal, sip nih buat.
    saya lagi belajar bikin blog.

  14. pututik says:

    mas didats boleh donk saya dibuatin plugin untuk ini, tapi dengan asumsi begini dia mampu mengenal bahwa komen itu dari administrator. saya mau fungsikan ini di salah satu situs saya yang memiliki 4 administrator blog wp. Thanks

  15. Bener2 update terus blog ini, dari dulu sampe skrng selalu ada yg baru, semoga tambah sukses lah…