Costumisasi dan Optimasi di Bagian Komentar WordPress Agar Tampil Menarik

Posted on

Mendapat ilham begitu mengunjungi beberapa blog lokal favorit saya memperdalam ilmu optimasi wordpress, sebut saja m-alwi.com dan kafegue.com. Ada yang menarik ketika kita menilik ke bagian komentar, yaitu ada penambahan kata “wajib”, “pilihan”, “tidak akan ditampilkan” dsb. Di bagian form kotak komentar wordpress yang ada pada kedua blog tersebut.

Suka atau tidak suka hampir semua themes bawaan wordpress sudah memilikinya, cuma penggunaan kata hanya dalam versi bahasa Inggris. Nah, artikel ini menjelaskan kepada anda bagaimana cara mengubahnya menjadi berbahasa Indonesia.

Selain itu, ada beberapa cara optimasi di bagian komentar wordpress lanjutan yang menarik untuk anda ikuti seperti tidak terloadnya halaman blog ketika seseorang mereply dan mensubmit komentar di blog wordpress anda.

Iseng-iseng berhadiah postingan, ^^ saya akan mencoba cara membuatnya, hitung-hitung sambil menyelam minum air bukan^^

Cara Costumisasi dan Optimasi di bagian Kotak Komentar WordPress

Cara 1 : Menambahkan / mengedit kata di bagian form isian kotak komentar wordpress

Sama seperti yang saya ucapkan di bagian pendahuluan artikel ini, yaitu hanya mengganti atau menambah sepatah dua kata atau lebih di bagian form isian komentar wordpress

  1. Login ke dashboard wordpress anda
  2. Nonaktifkan terlebih dahulu plugin wordpress firewall 2 jika anda memilikinya, jika tidak langsung ke poin 3
  3. Pilih panel “appearance”
  4. Pilih menu “editor”
  5. Cari dan pilih “Comments.php”
  6. Silahkan di edit dan ikuti petunjuknya melalui gambar seperti di bawah ini
costumisasi kotak komentar wordpress
costumisasi kotak komentar wordpress

Karena themes yang saya gunakan sudah ada maka saya mudah untuk mengeditnya, sesuaikan dengan themes bawaan anda ya ^^

Cara 2 : Membuat reply komentar wordpress tidak loading alias tidak reload page

WordPress 2.7 ke atas sudah mendukung threaded comment atau reply komentar pada bawaan themes wordpress. Yang perlu anda lakukan hanya mensettingnya di bagian dashboard >> setting >> discussion.

Lakukan pengaturan di “Other Comment Setting” beri tanda centang pada “enable threaded (nested) comments Level deep” beri angka 5 jika anda ingin membuat jaringan reply komentar hingga kedalaman 5 level (sesuai kehendak anda tentunya).

Untuk membuatnya tidak terloading pada saat orang lain ingin meninggalkan komentar di blog wordpress, tambahkan sedikit kode di bawah ini di bagian header.php sebelum <?php wp_head(); ?>

[php]<?php if ( is_singular() ) wp_enqueue_script( ‘comment-reply’ ); ?>[/php]
  1. Login ke dashboard wordpress anda
  2. Nonaktifkan terlebih dahulu plugin wordpress firewall 2 jika anda memilikinya, jika tidak langsung ke poin 3
  3. Pilih panel “appearance”
  4. Pilih menu “editor”
  5. Cari dan pilih “header.php” pada themes yang sedang anda gunakan
  6. Untuk memudahkan dalam mencari wp_head() Tekan CTRL + F di keyboard anda, kemudian lakukan pencarian
  7. Jika sudah ketemu pastekan kode script di atas sebelum wp_head()
  8. Jangan lupa untuk disimpan
  9. Selesai
membuat reply komentar tanpa reload
membuat reply komentar tanpa reload

Cara 3 : Membuat pagination dan submit komentar tanpa reload page dengan menggunakan plugin WP Comment Master

Cara ketiga ini hanya menitikberatkan kepada persoalan navigasi komentar wordpress dengan menggunakan plugin wp comment master. Uniknya, selain berfungsi untuk membuat pagination atau halaman di bagian komentar juga memiliki fungsi tidak terloadnya halaman blog ketika seseorang mensubmit komentar di blog wordpress yang anda miliki. (mendukung ajax)

Namun, ada harga yang harus dibayar. Maksudnya ? konsumsi request load page sebelum meload halaman tersebut harus di bayar di muka, karena plugin wp comment master “menciptakan” beberapa file javascript sehingga menambah jumlah total permintaan file blog anda dari server ke pengguna. Berdampak kepada menurunnya kecepatan loading blog akibat HTTP request bertambah.

Jika anda ingin menitikberatkan kepada kenyamanan pengguna dalam hal navigasi sekaligus meningkatkan kenyamanan pembaca, mungkin plugin comment master wajib anda miliki

Cara setting plugin wp comment master.

  1. Install dan aktifkan plugin wp comment master,
  2. Login ke dashboard wordpress anda.
  3. Pada panel “settings” pilih menu “discussion
  4. Pada bagian “Other comment setting” Hilangkan tanda centang pada “break comments into pages with (set ke angka 0) top level comments per page and the (last / first) page displayed by default
  5. Jangan lupa untuk menyimpan.
  6. Selanjutnya, lakukan pengaturan yang menurut anda penting sesuai kehendak masing-masing di bagian dashboard >> settings >> wp-comment-master

Ilustrasi seperti gambar di bawah ini,

settingan plugin wp comment master
settingan plugin wp comment master

Petunjuk singkat mengenai cara setting plugin wp-comment-master

  1. Reposition the comment form before all comment = mengubah posisi form komentar wordpress (enable = form komentar berada di atas komentar, disable = sebaliknya)
  2. Comment per page = jumlah komentar setiap halaman (tidak termasuk dengan reply
  3. Number of page-number to show = jumlah maksimal halaman yang muncul di pagination komentar wordpress anda

Hasilnya,

memberi halaman pada komentar wordpress
memberi halaman pada komentar wordpress

Menarik bukan, Bagaimana ? apakah anda ingin mencobanya? Atau ada yang ingin menambahkan mengenai costumisasi dan optimasi di bagian kotak komentar bawaan wordpress ? silahkan berkomentar di bawah ^^

101 comments

  1. kalau mau menampilkan kotak komentar bagaimana mas..??saya pakai template premium, kotak komentar nya hilang..

    1. themes yang anda gunakan sekarang saya kurang begitu paham, karena tidak ada source code pembuat themes tersebut. jadi saya agak kesulitan meneilitnya, soalnya apakah menggunakan framework atau bukan..

      tapi jika ada file comments.php di menu editor themes yang anda gunakan sekarang
      maka tinggal sisipkan saja kode

      di single.php anda.

      jika tidak ingin repot, instal plugin yang cara kerjanya menampilkan costum komentar,
      apakah bisa menggunakan, seperti facebook comment, intense debate atau disqus (jalan alternatif lain)

      semoga membantu ^^

  2. mantap mas triknya, saya pake plugin wp thread comment untuk komentarnya, soalnya ga load page juga.

    1. yup, wp thread comment salah satu alternatif lain, user bisa memilihnya mana yang bagus untuk digunakan ^^

  3. plugin yang bermanfaat. agak susah sepertinya untuk setingnya. tapi dicoba dulu. thanks sudah bagi ilmunya

      1. klo saudara #lia menggunakan blog di wordpress.com memang tidak ada, klo boleh tahu blognya apa ya?
        Tutorial di atas hanya untuk blog wordpress self host yang berdomain dan hosting sendiri maka dari itu bisa di edit sesuka hati wordpress nya 🙂

  4. Trims, cara pengatur kolom komentar biar bisa seperti pada blog ini, caranya gimana ?, {maaf, link terhapus secara otomatis} kolom komentarnya masih amburadul, minta diajarin donk…………..

    1. tiga langkah di atas merupakan penerapan kolom komentar sperti blog ini, sudah saya ulas di atas, tinggal saudara #kekyone terapkan saja di blognya,, Insya Allah nanti kolom komentarnya akan menjadi seperti di blog ini

  5. sudah saya terapkan tp di bawah kolom komen masih muncul kode html, gmana cara menghilangkannya ? TQ

    1. maksudnya?? kode ini yang muncul ???

      ketikkan tanda petik secara manual bro soalnya kode di atas tanda petiknya terbaca sebagai simbol yang lain

      1. klo tulisan itu sih tidak masalah mas, malahan saya malah mau masang tulisan seperti itu, cuma tidak tau caranya bagaimana,
        klo untuk menghilangkannya, maaf saya sudah ubrak abrik thems yang memunculkan kalimat itu tidak ketemu di bagian mananya< ^^

    1. aneh ya? klo saya pake chrome dan mozilla muncul tuh,
      atau ada indikasi browser yang tidak memunculkan tersebut, masih menyimpan cache halaman sebelumnya, tinggal mas #kevin hapus saja cachenya di chrome

  6. Trik ini yg udah lama saya cari…………. tapi Mas,
    dibagian file header blog saya udah terpasang :

    tepat diatas :

    Tetapi kok ketika komentar masih reload seluruh halaman? mohon penjelasannya 🙁

    1. klo untuk cara kedua,
      jika mas mengambil script code di atas (tanda petik) lebih baik diketik ulang mas, soalnya script di atas symbol tanda petik sudah terbaca sebagai simbol lain,

      saya mngalaminya juga, tapi semenjak menggunakan wp comment master hal tersebut teratasi,
      dulu saya menggunakan wp comment master tanpa memamsukkan script seperti langkah kedua, wp comment master tidak dapat bekerja mas, sepertinya ada indikasi tidak compitable dengan themes

      sama seperti plugin wp pagenavi, di themes saya sudah tertanam scriptnya tapi entah mengapa tidak jalan, baru setelah menginstal plugin pagenavi baru jalan

      setelah mas ari mencoba cara kedua dan ketiga namun tetap juga tidak jalan,

      apakah menggunakan plugin cache ?
      apakah menggunakan plugin minify?

      jika menggunakan plugin wp minify, nonaktifkan fitur javacriptnya (hilangkan centang) atau jika fitur javascript tetap ingin diaktifkan jangan lupa memasukkan file

      cm.js
      comment-reply.js?ver=20090102
      (file javascript plugin wp comment master)

      ke dalam “JavaScript files to exclude from minify (line delimited)” di plugin wp minify,

      jika menggunakan plugin cache, jangan lupa untuk menghapus cache lewat konfigurasi plugin cache yang mas ari gunakan, sakalian hapus juga cache di browser ^^

    1. yup, salam kenal balik dari sana, blognya ringan,, enak diakses, 🙂
      terima kasih atas kunjungan perdanya dan komentarnya 🙂

  7. Kalau mau dbuat support multi lang bs pake jadi kalo wp pake bhs indo, jadi indo dsb.. Oh ya mas, itu komen pagination dbuat komen terbaru yg nampil duluan, sy ampe bingung kumen sy dah msuk apa belum..

    1. masuk kok mas arif, ^^ tenang aja hehehe
      komen pagination sengaja saya buat yang lama muncul duluan agar, pengungjung yang membaca komentar bisa runtut dari awal hingga akhir, juga sengaja saya buat tidak loading agar tidak terlalu menghabiskan waktu dan bandwidht, terkecuali pengguna opera mini,, maaf atas ketidaknyamanannya ^^

  8. Setelah lama saya mencari cara gimana memodifikasi kotak komentar wordpress, akhirnya ketemu di blog ini, saya cukup direpotkan masalah loading yang lama karena semua komentar pada sebuah posting blog harus muncul terlebih dahulu. ternyata triknya cukup mudah ya 🙂 makasih ya sob atas ilmunya 🙂

  9. saya coba dulu ah…..sudah lama cari-cari tutorial ini, tapi muter-muter ga jelas,,,,akhirnya dapat juga…niche infonya gan

  10. maaf gan, ko di ane paginationnya ga berjalan gan? gimana neh? Saya hanya melakukan tutorial terakhir saja..

      1. Tidak gan,, Wp-minify tu makanan semacam apa gan..hhe,, eh maaf, untuk apa fungsi wp-minify maksudnya..

      2. plugin wp minify dapat mengakibatkan javascript dari wp comment master tidak berjalan,

        berarti kita hilangkan opsi pengaruh wp minify terhadap tidak munculnya pagination..

        dulu, saya penah juga mengalami kesulitan yang sama,karena tidak melakukan settingan di sini

        di dashboard wordpress,
        Pada menu “settings” pilih menu “discussion settings“
        Cari “Other comment setting”
        Hilangkan tanda centang pada “break comments into pages with (set ke angka 0) top level comments per page and the (last / first) page displayed by default“

        jika belum muncul juga, sisipkan kode

        seperti cara dua di atas

        catatan : Tanda petik harap di ketik manual, dari kode di atas.

        sebelum mengedit editor, ada baiknya membackup file yang asli

      3. Ada indikasi themes yang digunakan tidak compatible dengan plugin ini, sebab dari halaman download plugin wp comment master, ada penjelasan dari authornya
        “Please note that this plugin should work with most wordpress themes, but may not work with some themes due to your different theme css construct, in this case, you can leave a comment to me and I will help you get it to work.”

        mungkin langkah terakhir, saya cuma bisa merekomendasikan halaman ini
        http://wordpress.org/extend/plugins/wp-comment-master/installation/
        siapa tahu ada tutorial yang terlewat dari artikel di atas,

  11. wah bener banget neh gan,, ternyata memang benar template ane kagak ndukung.. Ane dapet tutor lagi dan akhirnya berhasil tapi pake loading page neh gan,, ada solusi gan?

  12. mohon pencerahanya.
    blok kami wordpress beralamat di agrobuah.com
    kami mempunyai sedikit permasalahan yaitu
    bila pengunjung masuk dan mau komentar setelah mengisi form yang ada yaitu
    nama, email, alamat web, isian komentar sudah di isi selanjutnya kirim komentar.
    akan tetapi tidak sukses terkirim dan
    tertahan mesin pengaturan yang isinya

    Error 1: Click back and type in the password.

    apakah maksudnya itu. dan bagaimana untuk mengaturnya.
    mohon bantuannya bagaimana cara mengaturnya ?

    1. ada menggunakan plugin captca?
      nonaktifkan dulu gan..

      jika tidak punya,
      caranya nonaktifkan semua plugin,, lalu tes lagi, lihat2 siapa tau ada plugin yang bentrok,

      seandainya tetap tidak bisa, reinstal versi wordpressnya,,,,tapi sebelum itu backup dulu untuk jaga-jaga dengan menggunakan plugin wp db manager

  13. Untuk modifikasi formnya ($args array) masih belum hapal betul nih. bisa kasih kamus defaultnya ?

    1. maaf mas imam, saya tidak punya pengetahuan tentang hal itu jadi saya tidak mengetahui apa yang dimaksud 🙂

      1. _http://codex.wordpress.org/Function_Reference/comment_form#.24args

        sekian dan terimakasih. ckckck

      2. oh itu toh maksudnya, maklum gan, ane cuma ngerti sedikit masalah coding ^^, syukurlah klo begitu sudah ketemu pencariannya 🙂

  14. berkunjung lagi neh gan,,
    oya gan,, tolong crosscheck blog ane terutama bagian komentar, ko comentar navigationnya gede amir ya?? di bagian css mana agar saya bisa mengatur besar kecilnya navigation tersbt. trims..

    1. Sebelum itu, di settingan wp comment master sudah seperti gambar di atas belum gan,, terutama di text-area autogrow, pilih enable

      jika tetap tidak berubah
      cari di CSS themes gan,, cari wp-pagenavi, ganti angka di font-sizenya, tapi sebelum itu backup dulu untuk antisipasi jika nanti error

      Cara mudahnya, masuk ke CSS themes Tekan CTRL + F ketikkan wp-pagenavi, sehingga agan menemukan font-sizennya

      atau jika masih tetap ukurannya, bisa ke editor plugin wp comment master
      trus buka wp-comment-master/cm.css ganti font size di

      .yjl-mes{
      color:#c22;
      font-size:14px; (ganti angka 14)

      Saya belum pernah mengeditnya, tapi coba aja dulu gan, kemungkinan terbesar ada di css, atau belum me enable text area autogrow

  15. Salam kenal.. artikelnya menarik
    oia mau nanya mas, theme yg saya gunakan ga mendukung threaded (nested) reply. Padahal pada setinggan discusionya sudah saya enable. source comment.php nya seerti ini :

    (saya paste disini pake code ga bisa)

    Saya udah coba otak atik tapi tetep ja ga sempurnya, bisa muncul nested replynya tapi semua komenya jadi muncul berulang”. Mohon bantuanya.. trimakasih..

    1. sudah coba menyisipkan shortcode sperti langkah ke dua?
      seandainya tidak terjadi perubahan,, mungkin bisa menggunakan plugin WordPress Thread Comment soalnya lebih simple menurut saya, tanpa harus editing script php

  16. makasih banget mas postingnya..bermanfaat buat ane
    ane dah praktekin mas
    ni hasilnya di web ane: hxxp:www.seo-society.com

  17. Mantab tutorialnya Gan… saya sudah aplikasikan tipsnya di web saya makasih…
    Gan gimana caranya ketika link kategory diklik yang muncul hanya “summary” bukan full halaman seperti sekarang (coba mampir gan..) postingan saya baru sedikit, nanti klo sudah banyak bisa-bisa sampe bermeter-meter tu..
    gimana gan caranya..?

    1. apakah saat mengetik postingan tidak memberi “readmore” ?
      maksudnya memberi perlakuan summary pada artikel ?

      kalau sudah, tetapi kategori yang muncul tetap full artikel, maka cara termudah adalah

      1. pasang plugin auto readmore, atau
      2. ganti themes

      cara tersulit, menambahkan script ke dalam editor themes, tapi ini agak ribet, karena tidak semua struktur themes sama,

  18. Udah nyoba yang cara 2, kalo menambahkan pagination di komentar tapi tanpa plugin gimana mas?

    1. kalau tanpa plugin wah, saya tidak tahu mas, tapi lebih mirip cara membuat halaman seperti pada plugin wp-pagenavi secara manual. cuma pengimplementasiannya saja yang berbeda..

  19. maksudnya tidak terload apa gan?
    trus gimana cara buat error message “O…. tidak… bisssaa….. check dulu gan”

    1. tidak terload maksudnya ketika mas nino meninggalkan sebuah komentar di blog wordpress, maka halamnnya tidak terload kembali ketika submitkomentar, mungkin bisa testing komentar di blognya m-alwi dot com atau psdesain dot net.

      buat error message “O…. tidak… bisssaa….. check dulu gan” itu saya menggunakan plugin growmap anti spamboot

  20. Mau tanya nih, angka pada “enable threaded (nested) comments Level deep” itu gunanya apa mas ? dan apa pengaruhnya ?

    1. gunanya untuk membuat reply komentar menjadi beberapa level bertingkat (contoh di atas diisi angka 5 maka akan menjadi 5 susun kebawah jika di reply terus, kemudian akan berhenti di tingkatan ke-5 dengan panjang tabulasi yang berbeda2),

      pengaruhnya ya tidak ada, gunanya ya lebih kepada tampilan saja mas,

  21. kang kalo pengen menampilkan kotak komentar di page wordpress gimana cara nya ???

    1. edit pagenya kemudian di bawah box content ada box discussion, tinggal beri centang di bagian allow comment

  22. sayang sekali tricknya kurang mengena khususnya bagian reply comments tanpa reload (secara ane butuh ntu)

    kalau g salah sih kode di atas untuk membuat textarea akan muncul di bawah comments yg kita reply (textarea berpindah)

    cuman ane ada masalah pada feature itu yg mana bila tombol reply ane klik, ya memang textarea nya berpindah tapi tidak bisa di klik (tidak bisa untuk menulis komentar). itu hanya terjadi pada reply saja….

    1. aneh ya,
      terima kasih atas masukkannya, tapi sayang saya tidak melihat websitenya jadi saya tidak tahu dimana letak kesalahannya, atau begini aja gan, coba ganti themes, secara langsung theme2 keluaran sekarang pada bagian commentnya sudah tidak terloading lagi saat diklik reply,

      tutorial di atas, kalau tidak salah saya menggunakan themes newslink, karena tidak ada fitur replynya. sementara setelah saya menggati theme ke bassically, tanpa memasukkan kode di atas, reply komentar sudah berjalan seperti yang saya ingingkan

  23. hmmm.. ini yang di cari customisasi comment. kalo comment di blog saya. (pake’ theme twenty eleven), mo diganti seperti commentnya mas adhani gmn ya?

    1. cara termudah, ganti theme, 🙂
      kalau mau repot sedikit dan mengetahui bahasa html dasar dan php, bisa hardcode mengikuti theme bassically yang saya gunakan. tapi tampilan comment.php di twenty eleven sudah bagus dan enak dilihat kok. jadi tidak perlu mengganti tampilan komentar, cukup bermain di bagian css stylenya saja jika ingin mengubah warna, bentuk dll

    1. kalau menggunakan plugin komentar semacam captcha atau kuis memang seperti itu mas, saya sudah lihat blognya, tinggal di copy saja kata yang muncul lalu paste di box yang disediakan saat komentar

  24. Di website toko Online saya kok tidak ada form untuk kolom website ya? hanya ada nama, email dan kota. Apasih sebenarnya kekurangan dan kelebihan kolom website pda form komentar?

  25. sudah berhasil dicoba,terima kasih. kunjungi kami di:
    skaamenities.com untuk kebutuhan amenities hotel villa dan
    semetonkopibali.com untuk kenikmatan taste kopi asli bali yg melegenda
    08123 868 5206

    1. bawaan dari themes yang sedang saya pakai pak, diblognya bapak mungkin menggunakan komentar dari jetspack

  26. mas cara menghilangkan komentar terdahulu dan komentar terbaru nya bagaimana, soalnya saya sudah ada pagination komentar, sebelum menggunakan plugin wp-comment-master

    1. iya pak, di google bisa dicari referensinya dengan kata kunci, “belajar dasar html”, mudah kok pak HTML karena berisi perintah2 sederhana

  27. Siang mas .. saya mau tanya cara memasang komentar default di theme border seo gimana ya mas ? soalnya bawaan theme nya cuman ada facebook comment.. Thanks

Comments are closed.