Threaded Comments Dan Modifikasi Css Pada Wordpress

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

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

File yang akan di modifikasi untuk menciptakan threaded comments

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

• comments.php


• functions.php


• style.css

 

Membuat custom output melalui fungsi Callback

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

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

Fungsi wp_list_comments diatas akan mendapatkan parameter untuk fungsi callback. Fungsi ini menggantikan output dari setiap komentar.

Selanjutnya ganti dengan aba-aba 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 final simpan file tapi jangan buru-buru diupload atau website anda akan error alasannya 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 sesungguhnya sudah sanggup berfungsi layaknya komentar yang tampil pada umumnya di website WordPress. Tapi kita ingin menciptakan tampilannya sedikit berbeda atau tepatnya seperti  yang kita inginkan, oke?.

 

Menata gaya tampilan komentar (CSS)

Ini yaitu bab yang saya suka, menghias HTML biar terlihat rapi dan memudahkan pengunjung website dalam 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 melaksanakan sedikit perubahan pada code diatas, sebagai rujukan yang saya edit hanya yang bertanda merah. Tentu anda sanggup 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;}


/* komplemen 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.

Sumber https://idnetter.com

Mari berteman dengan saya

Follow my Instagram _yudha58

Baca juga:

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: