Threaded Comments dan Modifikasi CSS Pada WordPress

By | October 26, 2017
0 Comment

Merancang sedikit perubahan di laman atau blog agar pengunjung tak bosan yaitu hal yang menarik. Sekiranya kamu mempunyai waktu luang hal berikut ini dapat kamu lakukan dan artikel berikut ini akan membimbing kamu bagi merancang Threaded Comments (komentar yang tertata atau bertingkat) serta memodifikasi CSS (Cascading Style Sheets) default di WordPress.

Kamu dapat melihat demo panduan ini di artikel : Cara Setting All in One SEO Pack WordPress Plugin lihat di bagian komentarnya.

File yang akan di modifikasi bagi merancang threaded comments

File di pada themes WordPress yang akan kita modifikasi yaitu selaku berikut:

  • comments.php

  • functions.php

  • style.css

 

Merancang kembangkan output lewat manfaat Callback

Buka file comments.php di themes wordpress kamu kemudian dapatkan kode berikut

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

Manfaat wp_list_comments diatas akan menerima parameter bagi manfaat callback. Manfaat ini menggantikan output dari setiap komentar.

Berikutnya ganti dengan kode berikut

<ul class=commentlist>
    <?php wp_list_comments('type=commentcallback=format_komentar'); // Modifikasi 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 laman kamu akan error karena manfaat format_komentar belum kita bikin sepenuhnya.

 

Merancang Function format_komentar

Manfaat ini akan menampilkan komentar standar di 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(__('(Modifikasi)'),' ','' ); ?>
 </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. Hingga disini, threaded comments hakekatnya telah dapat berfungsi layaknya komentar yang tampil di umumnya di laman WordPress. akan tetapi kita ingin merancang tampilannya sedikit berbeda atau tepatnya seperti  yang kita inginkan, oke?.

 

Menata gaya tampilan komentar (CSS)

Ini yaitu bagian yang saya suka, menghias HTML agar terlihat rapi dan mempermudah pengunjung laman pada membaca setiap text yang tersaji. Ini yaitu 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 menjalankan sedikit perubahan di code diatas, selaku contoh yang saya modifikasi hanya yang bertanda merah. Tentu kamu dapat 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 bagi 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;}

 

Lumayan, panduan WordPress kali ini telah selesai. Sekarang ini waktunya upload file-file tersebut ke hosting dan refresh laman bagi melihat hasilnya.


Sumber https://idnetter.com