VPS Murah

Cara Membuat Kotak Komentar di WordPress

Kotak komentar bawaan biasanya sudah terpasang pada template default, namun ada juga theme WordPress yang tidak support delauft comment, oleh sebab itu kita harus membuatnya sendiri dengan cara menambahkan kode php.

Beberapa contoh tema WordPress yang tidak support default comment di antaranya BorderSEO dan Nyeo dari INDThemes. Developer hanya memasang facebook comment pada template-template SEO tersebut.

cara membuat kotak komentar di WordPress

Jika kebetulan Anda menggunakan template yang tidak menyediakan kolom komentar bawaan WordPress, Anda bisa membuatnya dengan cara berikut ini.

Cara membuat kotak komentar WordPress:

>> Masuklah ke dasbor WordPress

>> Klik Tampilan > Penyunting

>> Buka file single.php

>> Cari kode :

<?php endwhile; ?>

>> Lalu tambahkan kode berikut di bawah kode tersebut

<?php comments_template(); ?>

>> Hasilnya seperti ini

<?php endwhile; ?>
<?php comments_template(); ?>

>> Klik Simpan

Silakan lihat single pos blog Anda. Sudah muncul kolom komentar belum? Kalau belum muncul, Anda tinggal mengaturnya di dashbord.

Kolom komentar tersebut masih sangat sederhana, bisa Anda modifikasi lagi agar terlihat lebih keren, misalnya dengan memasang plugin Disqus atau menambah kode pada style.css dan membuat comment.php pada folder theme.

Sebagai contoh, saya membuat kotak komentar pada BorderSEO theme dengan mengambil kode css dan comment.php dari template Education Times.

Caranya sebagai berikut:

>> Silakan login ke dasbor WordPress

>> Pilih Tampilan > Penyunting

>> Pada style.css, cari kode:
/* -------------- START Footer CSS ------------------ */

>> Tambahkan kode berikut ini di bawah kode tadi

/*————————————- Comments ————————————–*/

#comments { margin-bottom: 15px; }
#comments p { margin: 5px 0 10px 0; }
h3#comments-title { font-weight: bold; font-size: 20px; padding: 0; margin: 0 0 15px 0; }
.commentlist { list-style: none; margin: 0; padding: 0; }
.commentlist li.comment { line-height: 24px; margin: 0 0 15px 0; padding: 0 0 0 0px; position: relative; }
.commentlist li:last-child { border-bottom:none; margin-bottom:0; }
#comments .comment-body ul,
#comments .comment-body ol { margin-bottom: 15px; }
#comments .comment-body blockquote p:last-child { margin-bottom: 15px;}
.commentlist .avatar { border: 3px solid #ffffff; margin-right: 10px; width: 40px; height: 40px; vertical-align: middle; margin-bottom: 2px; }
.comment-author { padding: 5px; display: block; background: #F2F2F2; border: 1px solid #DFDFDF; -moz-border-radius: 4px; -khtml-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }
.comment-author cite { font-style: normal; font-weight: bold; }
.comment-author .says { font-style: italic; }
.fn, .fn a:link, .fn a:hover, .fn a:visited { font-family: Arial, Helvetica, Sans-serif; font-size: 16px; font-style: normal; font-weight: bold; text-decoration: none; }
.comment-meta { margin: -23px 0 0 65px; display: block; font-size: 11px; padding:0; }
.comment-meta a:link,
.comment-meta a:visited { text-decoration: none; }
.commentlist .bypostauthor {}
.reply { text-align: right; margin-bottom: 10px; }
.comment-reply-link { font-size: 11px; font-weight: normal; text-decoration: none; background: #EDEDED; color: #333; padding: 2px 8px; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; border: 1px solid #999999; }
.comment-reply-link:hover { background: #F5F5F5; color: #333; }
.commentlist .children { list-style: none; margin: 0; }
/* ——————————————- Children ——————————————- */

.commentlist .children li { border: none; margin: 0; }
.nocomments { display: none; }
#comments .pingback { margin-bottom: 18px; padding-bottom: 18px; }
.commentlist li.comment+li.pingback { margin-top: -6px; }
#comments .pingback p { font-size: 12px; line-height: 18px; display:block; margin: 0; }
#comments .pingback .url { font-style: italic; font-size: 13px; }

/* ——————————————- Comments form ——————————————- */

#respond { overflow: hidden; position: relative; margin-bottom: 15px; }
h3#reply-title { font-weight: bold; font-size: 20px; padding: 0; margin: 0 0 15px 0; }
#respond .required { color:#FF4B33; }
#respond .comment-notes { margin-bottom: 1em; }
.form-allowed-tags { display: none; }
.children #respond { margin: 0 48px 0 0; }
#comments-list #respond { margin: 0 0 18px 0; }
#comments-list ul #respond { margin: 0; }
#cancel-comment-reply-link { font-size: 12px; line-height: 18px; font-weight: normal; }
#respond .required { color:#FF4B33; font-weight:bold; }
#respond label { font-size: 12px; font-weight: bold; }
#respond input { margin:10px 0 0 0; width:98%; }
#respond textarea { width:98%; margin:10px 0 0 0; }
#respond .form-allowed-tags { font-size: 12px; line-height: 18px; }
#respond .form-allowed-tags code { font-size: 11px; }
#respond input[type=submit] { margin: 0; }
#respond .form-submit { margin: 0; }
#respond .form-submit input { width: auto; font-size: 14px; }
#respond dl { margin: 0 0 10px; }
#respond dt { display: inline; font-weight: normal; }
#respond dd { display: inline; }

>> Klik Simpan

>> Buka Tab baru di browser Anda, lalu login ke cPanel

>> Pilih File Manager > public_html > Pilih wp-content > double klik themes > double klk template yang Anda gunakan (misalnya border SEO)

>> Buat file baru dengan nama comment.php

cara membuat kolom komentar di WordPress

>> Edit file comment.php, simpan kode berikut di dalamnya

<?php if ( post_password_required() ) { ?>
<p><?php _e( ‘This post is password protected. Enter the password to view any comments.’, ‘themater’ ); ?></p>
<?php return; } ?>

<?php if ( have_comments() ) { ?>
<div id=”comments”>

<h3 id=”comments-title”><?php
printf( _n( ‘One Response to %2$s’, ‘%1$s Responses to %2$s’, get_comments_number(), ‘themater’ ),
number_format_i18n( get_comments_number() ), ‘<em>’ . get_the_title() . ‘</em>’ );
?></h3>

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

<?php if ( get_comment_pages_count() > 1 ) { ?>
<div class=”navigation clearfix”>
<div class=”alignleft”><?php previous_comments_link( __( ‘<span class=”meta-nav”>&larr;</span> Older Comments’, ‘themater’ ) ); ?></div>
<div class=”alignright”><?php next_comments_link( __( ‘Newer Comments <span class=”meta-nav”>&rarr;</span>’, ‘themater’ ) ); ?></div>
</div><!– .navigation .clearfix –>
<?php } ?>

</div><!– #comments –>
<?php } ?>

<?php comment_form(); ?>

>> Klik Save Changes

Silakan coba lihat lagi single pos blog Anda. Seharusnya tampilan tampilan default komentar WordPress Anda sudah berubah. Jika template malah error atau berantakan, silakan atasi dengan Cara Memperbaiki Template WordPress Error, Berantakan dan Tidak Bisa Dibuka.

Demikianlah cara membuat kotak komentar di WordPress. Semoga bermanfaat.

Kalau tutorial ini kurang jelas, silakan tulis pertanyaan pada kolom komentar di bawah. Terima kasih.

Bagikan yuk!

16 Komentar

  1. Pitutur Jawa Februari 11, 2016
  2. Husni Cahya Gumilar Februari 11, 2016
  3. ashar Februari 13, 2016
    • Husni Cahya Gumilar Februari 13, 2016
  4. Hamilplus Agustus 6, 2016
    • Husni Cahya Gumilar Agustus 21, 2016
  5. Fiki Agustus 21, 2016
    • Husni Cahya Gumilar Agustus 21, 2016
  6. Info Kost September 24, 2016
  7. azzam aviero September 29, 2016
  8. perusahaan konsultan it Juni 7, 2017
  9. Serba-Serbi Informasi Agustus 6, 2017
  10. jangkung Agustus 27, 2017
  11. Ronron Oktober 24, 2017
  12. Amin Januari 21, 2018
  13. Kamal Suwargi April 11, 2018

Tinggalkan Komentar