Jan 8, 2017

Cara Pasang Komentar Disqus di Wordpress AMP HTML

Plugin Disqus

Postingan kali ini masih seputar Komentar Disqus yang terpasang di Wordpress, pada postingan sebelumnya pernah juga saya bahas Cara Pasang Komentar Disqus Blogger dan Facebook di Blog untuk pembahasan kali ini saya khususkan Postingan Cara pasang komentar disqus khusus hanya untuk Platrom Wordpress AMP HTML. Memang saya akui untuk blog Wordpress yang meggunakan AMP HTML masih sedikit ribet cara pemasangannya terutama penginputan kode AMP pada Wordpress. Namun untuk di Wordpress masih lebih mudah dibandingkan dengan Blogger, karena pada Wordpress tersedia Plugin AMP yang bisa diinstal dan dapat membatu kita dalam menerapkan kode AMP tersebut ke dalam Wordpress dan dapat merubah halaman Wordpress menjadi AMP HTML.

Cara yang saya berikan ini adalah untuk pemasangan komentar Disquss pada Wordpress yang sudah menggunakan plugin AMP dari Automatic, karena pada plugin disini tidak menampilkan halaman komentar tetapi menampilkan tombol yang akan mengarahkan ke kolom secara default ke Wordpress yang non kode AMP.

Namun tidak ada salahnya saya akan berbagi informasi kepada sobat bagaimana memasang komentar Disqus pada Wordpress AMP, nah mari kita simak caranya.

Pertama
Bagi sobat yang sudah menggunakan Wordpress silahkan terlebih dahulu buat halaman Wordpress menjadi AMP HTML, caranya cukup tinggal cari dan ketik "amp" pada kolom pencarian plugin, cari PLUGIN AMP by AUTOMATIC kemudian di instal dan aktifkan plugin tersebut. 

Kedua
Pastikan plugin tersebut sudah aktif kemudian sobat edit plugin AMP tersebut lalu klik amp/templates/single.php jika sudah masuk lalu tambahkan kode dibawah ini
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

Kemudian sobat simpan kode diatas tepat dibawah kode berikut ini
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

Kemudian lanjut cari kode seperti kode dibawah ini
<article class="amp-wp-article">

Silahkan sobat ganti kodenya dengan kode dibawah ini
<article id="post-<?php the_ID(); ?>" class="amp-wp-article">

Lanjut silahkan sobat simpan kode dibawah ini tepat persis diatas kode </footer>
<div class="disqus-box">
<amp-iframe src="https://cdn.rawgit.com/KompiAjaib/kompi-html/master/amphtmldisqus.html?shortname=dbalik&fontBodyFamily=sans-serif&fontLinkColor=e8554e&url=<?php echo get_permalink(); ?>&identifier=post-<?php the_ID(); ?>" frameborder="0" height="321" layout="responsive" resizable="resizable" sandbox="allow-forms allow-scripts allow-same-origin allow-modals allow-popups" width="808">
<div aria-label="Disqus Comments" overflow="" role="button" tabindex="0"></div>
</amp-iframe>
</div>

Sobat silahkan ganti kode dbalik dengan shortname Disqus sobat punya, jenis huruf sans-sarif digunakan kalau jenis huruf yang ada pada blog sobat tumpul bisa diganti dengan jenis huruf seperti serif agar hurufnya terlihat lancip, kemudian sobat bisa ganti kode e8554e dengan kode warna yang sobat sukai (Baca juga : Kumpulan kode-kode Warna untuk Blog) untuk warna linknya, setelah itu klik update File.

Ketiga
Posisi sobat masih tetap di edit plugin lanjut ke langkah berikutnya sobat klik amp/templates/style.php kemudian sobat copy kode CSS berikut lalu simpan, kode CSS tersebut untuk menghilangkan tombol yang nantinya mengarah ke komentar default Wordpress non AMP dan secara otomatis akan mengatur letak dan tampilannya di komentar Disqus.
.amp-wp-article-footer .amp-wp-meta.amp-wp-comments-link {
    display: none;
}
.disqus-box amp-iframe {
    background: none;
    margin: 0 8px;
}

Jika sudah jangan lupa Klik Updated File

Setiap langkah diatas saran saya sobat catat atau simpan di notepad untuk berjaga-jaga jika nanti tidak tampil silahkan sobat bisa ulangi langkah-langkah tersebut di atas, perhatikan betul dan cermati penempatan kodenya ini juga untuk menjaga jikalau nanti plugin-nya terupdated komentar nya hilang akibat dari updated plugin dan ini sering terjadi pada plugin Wordpress.

Itu saja yang mungkin bisa saya bagikan, jika ada pertanyaan dapat mengisi kolom komentar dibawah ini dan dengan senang hati saya akan mencoba menjawabnya meskipun dengan keterbatasan pengetahuan yang saya punya, semoga bermanfaat ya sobat.

Artikel Terkait

Halo Sobat, sedikit cerita mengenai diri saya, saya adalah hanya seorang penulis amatiran yang mencoba berbagi pengetahuan dari apa yang saya dapat sehari-hari. Pengalaman ini saya tuangkan di tulisan dengan tujuan baik agar pengetahuan dan pengalaman saya ini dapat bisa di pergunakan dan bermanfaat khususnya untuk diri saya pribadi dan umumnya untuk orang lain, sehingga saya beri nama Web saya ini dibalikseo.com yang filosofinya adalah dibalik pengetahuan yang saya dapat.