Technology, blog, programming, tutorial, wordpress

Tutorial Wordpress: Membuat daftar komentar lebih menarik

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

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.

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

Lalu tambahkan kode ini persis di bawah baris foreach:

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.

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

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

Lengkapnya, jadi seperti ini:

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:

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


Share:
These icons link to social bookmarking sites where readers can share and discover new web pages.

  • bodytext
  • del.icio.us
  • Facebook
  • Google
  • Ma.gnolia
  • StumbleUpon
  • Technorati

Daftar sekarang juga untuk cara gampang dapat uang lewat blog


41 Comments


Gravatar
#1. golda » 29.02.2008

bukannya plugins nya ada?

Gravatar
#2. Didats Triadi » 29.02.2008

#1 embeer. cuma apa ndak lebih baik langsung ke code-nya daripada install2 plugin.

Gravatar
#3. Yogie » 29.02.2008

Pusyiiiinggg…..

Gravatar
#4. dadan » 29.02.2008

aku coba, looping if dalam foreach nya udah jalan. jadi udah bisa ganti-ganti id.

tp script css nya gak jalan. jadi background comment masih tetep aja nih… napa ya ?

ini source html yang di generate :

dan ini css nya :
comment-1 {
background-color:#F1F0DC;
color:#333333;
}
comment-2 {
background-color:#F7F7F7;
color:#333333;
}

bisa kasih saran, Dats ?

Gravatar
#5. dadan » 29.02.2008

ini source html yang digenerate :

Gravatar
#6. agung » 29.02.2008

mas,klo boleh request nih..bikin tutor ttg sistem wordpress itu sendiri dunks.

coz aq rada susah baca sistematika yang dipakai Wordpress buat jalanin semua fungsi php’a.

ato terusin dunks tutorial membuat Tutorial: Membuat template Wordpress (1)
tapi langsung jelasin fungsi php’a.


Trims.

Gravatar
#7. Didats Triadi » 29.02.2008

#4 itu kode css-nya, gag pake titik di depan?

Gravatar
#8. agung » 29.02.2008

#4 DADAN

maksudnya, ganti ID author ya..
klo iya..kenapa harus looping..langsung aja ditentukan didalam statmentnya

jadi misalnya admin punya 2 akun email bisa langsung:
if($comment->comment_author_email == ("didats@dimanasaja.com","email@dimanasaja.com")) $author_class = "bya

mungkin begitu…
Mohon pembenarannya karena aq blum mengujinya.


Trims.

Gravatar
#9. Didats Triadi » 29.02.2008

#8 kok ganti ID author?
bukaan, itu kan karena dia lupa naro titik di css-nya.

eh, lagi pula, kodenya salah tuh. dan memang harus berada di dalam looping. gag bisa di luar.

untuk 2 account email, bisa dilakukan begini:

if(
$comment->comment_author_email == "didats@dimanasaja.com" ||
$comment->comment_author_email == "email@dimanasaja.com")
$author_class = "byauthor";

Gravatar
#10. dadan » 29.02.2008

9@DIDATS TRIADI
haha…
It works.
Ada dua kesalahan yang perbaiki :
- kurang ’s’ (comments di css style, aku tulis comment di file Comments.php)
- looping. Saya masukin ke dalam looping dari div hingga /div

Hoa… ! Thx ya Dats.. !
Ajiiib….

Gravatar
#11. dadan » 29.02.2008

eh kesalahan ketiga, dink :
- seperti yang dibilang ente Dats, kurang titik !

Sorry, ngejunk disini. Internet ku lagi sux nih …

Gravatar
#12. Didats Triadi » 29.02.2008

#11 zen!
karena saya liat kode html-nya udah bener.

ngejunk? gak apa-apa… dipersilahken

Gravatar
#13. iang » 29.02.2008

kalo gue tau email yg lo pake, gw bisa pura2 jadi elo dong?

trus.. ini versi 1 baris :D

inisialisasi dg..

$j = 1;

lalu di dalam loop nya..

$class = "comment-" . ($j = 3-$j);

~berlalu

Gravatar
#14. iang » 29.02.2008

komen gw kok gak masuk? apa kena moderasi? huhuhu

Gravatar
#15. iang » 29.02.2008

tambahin lg ahh.. ngomentarin #9.. akan lebih rapi jika dibuat seperti ini :D

if (in_array($email, array("satu", "dua", "tiga"))) { ...

Gravatar
#16. Deny Sri Supriyono » 01.03.2008

nah, manteb nih!
iya, coding langsung emang lebih enak daripada pake plugin
kalo ngerti :d

berguna nih - thanks, dats.

Gravatar
#17. sidaut » 01.03.2008

wah.. ga pernah jadi melulu nih ketemuan.
mungkin udah males duluan krn aku bilang mau banyak tanya ya? aku cuma mau tanya basic aja.. ga ngerti sama sekali nih.. ditunggu sharing nya.. terimakasih

Gravatar
#18. sidaut » 01.03.2008

cuma mau ngecek.. yg tadi masuk ga ya?

Gravatar
#19. Yogi » 01.03.2008

Woi, bayar hak paten! Komen gw kok masuk dalam skrinsut? Huehuehue :p

Btw, great tutorial! Keep it up mate. Cheers!
*sok jadi orang aussie*

Gravatar
#20. Didats Triadi » 01.03.2008

#13 yang baca kan bukan para programmer kaya elu… jadinya, gw kasih logika yang simpel aje… hehehe

#16 setelah mendalami wordpress, dan melihat-lihat plugin, ternyata banyak plugin sederhana yang bisa diselesaikan langsung di code. nah, inilah yang menjadi perhatian saya.

#17 ya nda to mas. memang kita belum dapet waktu yang pas. ayo kapan ketemuannya…

#19 ooh, udah jadi orang aussie nih ceritanya? gaji dapet berapa? :p

Gravatar
#21. Rosyidi » 01.03.2008

Wah ganti lagi nih theme komennya. Lebih bagus yg ini daripada yg dulu menurutku :)

Gravatar
#22. dadan » 01.03.2008

dats, next tulisin ttg codingnya browser plugin ya..

** ngelunjak **

hihi..

Gravatar
#23. rd Limosin » 02.03.2008

kalo nentuin komeng_author pake email, gimana kalo ada komentator yang tau email author, kan dikira orang inilah sang author, padahal bukan.

Gravatar
#24. Didats Triadi » 02.03.2008

#23 halah

okeh, analoginya gini.

gw punya blog, trus gw tau email elu. nah, sekarang, masa gw pengen pasang email elu sebagai admin di blog gw?

lah, kan gag lucu. buat apa? toh, blognya itu blog gw.

buat yg gag setuju caranya, gampangnya bisa pake is_author() aja dah.

Gravatar
#25. hielmy » 02.03.2008

salut buat para programmer, saya mah segini aja udah pusing minta ampun, apalagi yang bikin dari nol….. ckckckck…

Gravatar
#26. iang » 02.03.2008

#24: emang email yg ditulis di komentar ini bakal didaftarkan jadi member blog?

emang gw gak bisa masukin email elo?

Gravatar
#27. devari » 02.03.2008

waaah yg pastinya rumus2 diatas bukan untuk konsumsi saya neh :(
nyerah deh mas.

Gravatar
#28. Didats Triadi » 03.03.2008

#26 kenapa berfikiran kaya gitu?
bingung gw…

elu bisa aja masukin email gw. tapi buat apaan? kan blog gw…

Gravatar
#29. iang » 03.03.2008

kan di komen keliatannya dari elo dat :P stylenya jadi beda karena dikasih kelas “byauthor” juga. *pemalsuan identitas* yayaya. ini bisa terjadi dimana saja kok :-)

Gravatar
#30. geblek » 03.03.2008

yah lagi2 tutormu nendang banget dats :), saya sih nglirik kapan ada free themes lagi di blogmu :)

Gravatar
#31. agung » 03.03.2008

wuiihh..

seru khan klo ngomongin pemograman web, gk ada habisnya..

terus aja om didats bikin tutor ky gini..


Trims.

Gravatar
#32. Jauhari » 03.03.2008

Tambah Kreatip wae arek iki :D Yo ngono lo, ilmu di bagi bagi ;)

Gravatar
#33. indra » 04.03.2008

buat gravatarnya manaaa???

Gravatar
#34. yaddi » 09.03.2008

ooo gitu toh caranya.. klo ngatur tampilan gravatar caranya gimana?

Gravatar
#35. day... » 14.03.2008

aku baru masuk WP. aku mau pakai cara ini..

Gravatar
#36. Insan » 15.03.2008

sekedar tambahan, pak didat. bisa pake:

if( 0 == $comment->user_id )

komentator (tanpa login), nilai defaultnya selalu “0″ walaupun dia tahu + malsuin alamat email penulis/pemilik blog.

Gravatar
#37. Didats Triadi » 16.03.2008

#36 pinter! cerdas!

makasih mas.

Gravatar
#38. gagahput3ra » 17.03.2008

Lam kenal mas :)

Nice tips, tp ada pertanyaan yg OOT neh…klo mo nambahin tagline ke header yg gak ada taglinenya gimana ya? Soalnya di blog sy cuma bisa pake judul doang :|

Gravatar
#39. gagahput3ra » 17.03.2008

langsung pake tag html gitu? mang bisa? :P wah giling dipanggil mas…. :mrgreen:
masi abegeh mas :lol:

Gravatar
#40. Gung De » 22.03.2008

Wah… mantab Mas ilmu yang bisa diambil.
jadi pengen blajar PHP.

Gravatar

[…] lebih cantik, bisa main main di kode style.css dan mainkan jarimu, atau bisa juga menerapkan teknik mempercantik komen dari seorang mantan playboy css yang saat ini sedang berada di […]

Leave a Reply




Daftar sekarang juga untuk cara gampang dapat uang lewat blog