Threaded Comments dan Modifikasi CSS Pada WordPress

Membuat sedikit perubahan pada website atau blog agar pengunjung tidak bosan adalah hal yang menarik. Jika anda mempunyai waktu luang hal berikut ini bisa anda lakukan dan artikel berikut ini akan membimbing anda untuk membuat Threaded Comments (komentar yang tersusun atau bertingkat) serta memodifikasi CSS (Cascading Style Sheets) default pada WordPress.

Anda bisa melihat demo tutorial ini pada artikel : Cara Setting All in One SEO Pack WordPress Plugin lihat pada bagian komentarnya.

File yang akan di modifikasi untuk membuat threaded comments

File di dalam themes WordPress yang akan kita edit adalah sebagai berikut:

• comments.php
• functions.php
• style.css

Membuat custom output melalui fungsi Callback

Buka file comments.php pada themes wordpress anda kemudian temukan kode berikut

<ul class="commentlist">
    <?php wp_list_comments();  ?>
</ul>

Fungsi wp_list_comments diatas akan menerima parameter untuk fungsi callback. Fungsi ini menggantikan output dari setiap komentar.
Selanjutnya ganti dengan kode berikut

<ul class="commentlist">
    <?php wp_list_comments('type=comment&callback=format_komentar'); // Custom callback in functions.php ?>
</ul>

Kode di atas hanya akan menampilkan khusus format komentar saja (bukan trackback atau pingback). Setelah selesai simpan file tapi jangan buru-buru diupload atau website anda akan error karena fungsi format_komentar belum kita buat sepenuhnya.

Membuat Function format_komentar

Fungsi ini akan menampilkan komentar standar pada umumnya yaitu:

• Link komentar : get_comment_link()
• Link author komentar: get_comment_author_link()
• Tanggal komentar: get_comment_date()
• Waktu komentar: get_comment_time()
• Link reply komentar: get_comment_reply()
• Komentar: comment_text() atau get_comment_text()
  
• Avatar, cancel reply, status moderasi, serta list style yang berformat HTML.

Referensi : wp_list_comments

<?php 

function format_komentar($comment, $args, $depth) {
        $GLOBALS['comment'] = $comment;
         extract($args, EXTR_SKIP);

if ( 'div' == $args['style'] ) {
         $tag = 'div';
         $add_below = 'comment';
 } else {
         $tag = 'li';
         $add_below = 'div-comment';
 }
?>

 <<?php echo $tag ?> <?php comment_class(empty( $args['has_children'] ) ? '' : 'parent') ?> id="comment-<?php comment_ID() ?>">
         <?php if ( 'div' != $args['style'] ) : ?>
         <div id="div-comment-<?php comment_ID() ?>" class="comment-body">
 <?php endif; ?>


 <div class="comment-author vcard">
         <?php if ($args['avatar_size'] != 0) echo get_avatar( $comment, $args['180'] ); ?>
         <?php printf(__('<cite class="fn">%s</cite> <span class="says">says:</span>'), get_comment_author_link()) ?>
 </div>


<?php if ($comment->comment_approved == '0') : ?>
         <em class="comment-awaiting-moderation"><?php _e('Your comment is awaiting moderation.') ?></em>
         <br />
<?php endif; ?>

<div class="comment-meta commentmetadata"><a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ) ?>">
         <?php printf( __('%1$s at %2$s'), get_comment_date(), get_comment_time()) ?></a><?php edit_comment_link(__('(Edit)'),' ','' ); ?>
 </div>

<?php comment_text() ?>

<div class="reply">
         <?php comment_reply_link(array_merge( $args, array('add_below' => $add_below, 'depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
</div>

<?php if ( 'div' != $args['style'] ) : ?>
         </div>
<?php endif; ?>
 
<?php } ?>

Hampir selesai. Sampai disini, threaded comments sebenarnya sudah bisa berfungsi layaknya komentar yang tampil pada umumnya di website WordPress. Tapi kita ingin membuat tampilannya sedikit berbeda atau tepatnya seperti  yang kita inginkan, oke?.

Menata gaya tampilan komentar (CSS)

Ini adalah bagian yang saya suka, menghias HTML agar terlihat rapi dan memudahkan pengunjung website dalam membaca setiap text yang tersaji. Ini adalah CSS default komentar WordPress.

ul.commentlist {}
 
.commentlist .reply {}
.commentlist .reply a {}
 
.commentlist .alt {}

.commentlist .odd .comment {}
.commentlist .even .comment {}

.commentlist .thread-alt {}
.commentlist .thread-odd {}
.commentlist .thread-even {}
.commentlist li ul.children .alt {}
.commentlist li ul.children .odd {}
.commentlist li ul.children .even {}
 
.commentlist .vcard {}
.commentlist .vcard cite.fn {}
.commentlist .vcard span.says { }
.commentlist .vcard img.photo {}
.commentlist .vcard img.avatar {}
.commentlist .vcard cite.fn a.url {}
 
.commentlist .comment-meta {} 
.commentlist .comment-meta a {}
.commentlist .commentmetadata {}
.commentlist .commentmetadata a {}
 
.commentlist .parent {}
.commentlist .comment {}
.commentlist .children {}
.commentlist .pingback {}
.commentlist .bypostauthor {}
.commentlist .comment-author {}
.commentlist .comment-author-admin {}
 
.commentlist {}
.commentlist li {}
.commentlist li p {}
.commentlist li ul {}
.commentlist li ul.children li {}
.commentlist li ul.children li.alt {}
.commentlist li ul.children li.byuser {}
.commentlist li ul.children li.comment {}
.commentlist li ul.children li.depth-{id} {}
.commentlist li ul.children li.bypostauthor {}
.commentlist li ul.children li.comment-author-admin {}
 
#cancel-comment-reply {}
#cancel-comment-reply a { }

Nah kita akan melakukan sedikit perubahan pada code diatas, sebagai contoh yang saya edit hanya yang bertanda merah. Tentu anda bisa membuatnya lebih menarik.

ul.commentlist {padding-left: 0;}
 
.commentlist .reply a {color: #fff; background: #cc3838; padding: 3px 10px; font-size: 12px;border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px;}


.commentlist .odd .comment {background:#fff; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; padding: 10px;}
.commentlist .even .comment {background:#f8f8f8; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; padding: 10px;}


.commentlist .vcard cite.fn { font-style: normal; font-weight: 700;}
.commentlist .vcard span.says { font-style: italic;}
 
.commentlist li { list-style: none; margin-top: 15px; margin-bottom: 15px; }
.commentlist li p { margin: 10px 0;}


/* tambahan untuk tombol cancel reply */
a#cancel-comment-reply-link {color: #fff; background: #cc3838; padding: 3px 10px; font-size: 12px;border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px;}

Cukup, tutorial WordPress kali ini sudah selesai. Sekarang waktunya upload file-file tersebut ke hosting dan refresh website untuk melihat hasilnya.