Saya 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
golda @29.02.2008
bukannya plugins nya ada?