Panduan WordPress

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.

Tags:

Related Posts "Cara Membuat Kotak Komentar di WordPress"

10 Responses

  1. author

    Pitutur Jawa1 year ago

    mas untuk optimasi yang mudah dan gak ribet enaknya pake blogcepot apa wordpress ya?kelebihan dan kelemahan masing2 apa ya?maklum baru ndalami blogcepot. mau coba wordpress penasaran….jawab ya mas brow trims

    Reply
  2. author
    Author

    Husni Cahya Gumilar1 year ago

    Silakan lihat di sini mas
    http://tipsngeblog.com/blog/bagus-mana-blogger-atau-wordpress/
    Terima kasih.

    Reply
  3. author

    ashar1 year ago

    sangat bermanfaat artikelnya mas, akhirnya saya bisa juga memasang disqus comment fi blog saya pke theme nyeo. thanks

    Reply
    • author
      Author

      Husni Cahya Gumilar1 year ago

      Terima kasih mas Ashar, semoga blo gadgetnya makin sukses..

      Reply
  4. author

    Hamilplus12 months ago

    terimakasih tutorialnya, kebetulan saya pengguuna theme nyeo, kalo pake facebook comment pengaruh di loading nya nambah 1-2 detik. bookmarked. praktek dulu,

    Reply
    • author
      Author

      Husni Cahya Gumilar11 months ago

      Sama-sama, silakan dibookmark gan.

      Reply
  5. author

    Fiki11 months ago

    Kemaren sempet bingung karena baru pindah ke wp, beli template di indthemes hanya ada komentar facebook, sempat hilang juga sewaktu update wp versi 4.6. Kebetulan ketemu artikel ini jadi sekarang bisa pasang disqus.

    makasih banyak mas.

    Reply
    • author
      Author

      Husni Cahya Gumilar11 months ago

      Template indthemes memang gk support default comment, tapi cocok untuk blog niche yang kita sendiri kurang menguasai isinya sehingga tidak memberi kesempatan kepada pembaca untuk mengkritisi apa yang kita bahas, he
      Sejauh ini saya suka border seo, loadingnya cepat dan earning adsensenya cukup bagus mas..

      Reply
  6. author

    Info Kost10 months ago

    Makasih om ganteng… Terbantu nih

    Reply
  7. author

    azzam aviero10 months ago

    masih kurang paham mas, kalo misalkan kolom komentar cuma ada satu kolom itu gimana

    Reply

Leave a reply "Cara Membuat Kotak Komentar di WordPress"