Memasang Komentar Disqus Di Wordpress AMP HTML

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.

Reactions:

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser