Ditulis oleh: Ditulis pada: 12/12/2016
Untuk membuat halaman Wordpress menjadi AMP HTML lebih mudah daripada merubah Blogger menjadi AMP HTML. Ada beberapa plugin yang bisa digunakan untuk merubah halaman Wordpress menjadi AMP HTML.Namun kali ini saya akan membagikan cara memasang komentar Disqus pada Wordpress yang menggunakan plugin AMP dari Automattic. Karena plugin ini tidak menampilkan komentar pada halaman AMP, hanya menggunakan tombol yang mengarah ke kolom komentar default Wordpress non AMP.
Langkah Pertama
Hal yang pertama dilakukan tentunya adalah membuat halaman Wordpress menjadi AMP HTML. Silahkan ketikan "amp" di kolom pencarian plugin kemudian pilih plugin AMP by Automattic lalu install dan aktifkan.Langkah Kedua
Setelah plugin AMP aktif, silahkan edit plugin AMP lalu klik amp/templates/single.php. Tambahkan kode di bawah ini.
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
Simpan di bawah kode
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
Silahkan cari kode di bawah ini
<article class="amp-wp-article">
Lalu silahkan ganti dengan kode di bawah ini
<article id="post-<?php the_ID(); ?>" class="amp-wp-article">
Lalu simpan kode di bawah ini di atas kode
</footer>
<div class="disqus-box">
<amp-iframe src="https://cdn.rawgit.com/KompiAjaib/kompi-html/master/amphtmldisqus.html?shortname=ayointernet&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>
Ganti kode
ayointernet dengan shortname Disqus blog Anda, gunakan sans-sarif jika jenis huruf blog Anda tumpul, ganti dengan serif jika jenis huruf blog Anda lancip. Ganti kode e8554e dengan kode warna untuk link blog Anda.Kemudian silahkan klik Update File.
Langkah Ketiga
Masih di edit plugin, silahkan klik amp/templates/style.php lalu silahkan simpan CSS di bawah ini untuk menghilangkan tombol yang mengarah ke komentar default Wordpress non AMP dan mengatur letak dan tampilan komentar Disqus.
.amp-wp-article-footer .amp-wp-meta.amp-wp-comments-link {
display: none;
}
.disqus-box amp-iframe {
background: none;
margin: 0 8px;
}
Kemudian silahkan klik Update File.
Perlu diperhatikan! Silahkan catat langkah-langkah ini untuk jaga-jaga jika plugin-nya diupdate dan komentarnya menghilang, silahkan lakukan lagi langkah-langkah di atas.