Aug 10, 2017

Cara Menampilkan Iklan Di Tengah Postingan Wordpress AMP HTML

Iklan Di Tengah Postingan Wordpress AMP HTML

Postingan kali ini adalah lanjutan dari pembahasan sebelumnya yaitu Cara Memasang Iklan Adsense di Tengah Postingan Blogger, dikarenakan banyak permintaan bagaimana menempatkan iklan selain di Blogger tapi menggunakan Platform Wordpress akhirnya saya coba cari solusinya dan ini dia pembahasannya Cara Menampilkan Iklan Di Tengah Postingan Wordpress AMP HTML.

Seperti yang kita ketahui media blogging tidak hanya di Platform Google Blogger saja namun di Wordpress pun banyak juga, di Platform Wordpress ini sebenarnya banyak tools atau plugin yang dapat memudahkan kita untuk mengatur tampilan yang dibutuhkan salah satunya adalah plugin Iklan adsense yang tidak akan menyebabkan error dan kelebihan lainnya menggunakan Plugin di Wordpress dapat Menyisipkan Iklan ditengah Postingan tinggal di atur saja penempatannya.

Terkait pembahasan kali ini kita akan menyisipkan atau Menampilkan Iklan di tengah postingan Wordpress AMP HTML yang nantinya akan meningkatkan penghasilan di Google Adsense, yaitu dengan menggunakan script php agar ilkan dapat ditampilkan di tengah postingan Wordpress HTML5.

Bagi sobat yang mau mencobanya Cara Menampilkan Iklan Di Tengah Postingan Wordpress AMP HTML bisa mengikuti langkah berikut ini.

Langkah Pertama
Silahkan salin kode dibawah ini lalu simpan di functions.php.

//Insert ads after second paragraph of single post content.
add_filter( 'the_content', 'prefix_insert_post_ads' );
function prefix_insert_post_ads( $content ) {
  $ad_code = '<div class="insertads">
<!-- Iklan Adsense Di Sini  -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>';
  if ( is_single() && ! is_admin() ) {
            return prefix_insert_after_paragraph( $ad_code, 2, $content );
  }
  return $content;
}
// Parent Function that makes the magic happen
function prefix_insert_after_paragraph( $insertion, $paragraph_id, $content ) {
  $closing_p = '</p>';
  $paragraphs = explode( $closing_p, $content );
  foreach ($paragraphs as $index => $paragraph) {
            if ( trim( $paragraph ) ) {
                  $paragraphs[$index] .= $closing_p;
            }
            if ( $paragraph_id == $index + 1 ) {
                  $paragraphs[$index] .= $insertion;
            }
  }
  return implode( '', $paragraphs );
}


Langkah Ke Dua
Agar kode iklan ini dapat berjalan dengan baik di Wordpress AMP silahkan tambahan kode iklan amp-ad sehingga tampilannya seperti dibawah ini.


//Insert ads after second paragraph of single post content.
add_filter( 'the_content', 'prefix_insert_post_ads' );
function prefix_insert_post_ads( $content ) {
  $ad_code = '<div class="insertads">
<!-- Iklan Adsense Di Sini  -->
<amp-ad data-ad-client="ca-pub-xxxxxxxxxxxxxxx" data-ad-slot="xxxxxxxxxx" height="300" layout="responsive" type="adsense" width="808">
 </amp-ad>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>';
  if ( is_single() && ! is_admin() ) {
            return prefix_insert_after_paragraph( $ad_code, 2, $content );
  }
  return $content;
}
// Parent Function that makes the magic happen
function prefix_insert_after_paragraph( $insertion, $paragraph_id, $content ) {
  $closing_p = '</p>';
  $paragraphs = explode( $closing_p, $content );
  foreach ($paragraphs as $index => $paragraph) {
            if ( trim( $paragraph ) ) {
                  $paragraphs[$index] .= $closing_p;
            }
            if ( $paragraph_id == $index + 1 ) {
                  $paragraphs[$index] .= $insertion;
            }
  }
  return implode( '', $paragraphs );
}


Langkah Ke Tiga
Setelah kode amp-ad ditambahkan lalu silahakan sobat edit plugin AMP lalu cari amp/templates/single.php setelah itu silahkan cari kode seperti dibawah ini.

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

Setelah ketemu dengan kode dimaksud silahkan salin kode dibawah ini lalu letakkan tepat dibawah kode diatas tadi.

<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>

Perhatikan dengan baik langkah penerapan kodenya, jika sudah selesai SAVE dan selamat mencoba.

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.