Tutorial WordPress: Membuat daftar komentar lebih menarik

Written By naufal aulia on Rabu, 30 November 2011 | Rabu, November 30, 2011



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.
SILAKAN MENCOBA!! G00D LucK

Ditulis Oleh : naufal aulia ~nofal-sama77

Muh.Akram Anda sedang membaca artikel berjudul Tutorial WordPress: Membuat daftar komentar lebih menarik yang ditulis oleh nofal-sama77 Dan Maaf, Anda tidak diperbolehkan mengcopy paste artikel ini.

Blog, Updated at: Rabu, November 30, 2011

1 comments:

  1. Terima kasih.. Artikel yang sangat bermanfaat untuk seorang pemula seperti saya..

    BalasHapus