Menempatkan Iklan Di Tengah Postingan Wordpress AMP HTML

Salah satu kelebihan Wordpress dengan AMP HTML yaitu bisa menempatkan iklan di tengah postingan tanpa menyebabkan error pada AMP.

Tentunya hal ini dapat memaksimalkan penghasilan iklan pada Wordpress dengan menempatkan atau menambah slot iklan di tengah postingan pada versi AMP.

Perlu diketahui bahwa blog Wordpress dapat dengan mudah membuat postingan AMP HTML dengan menggunakan plugin. Salah satu plugin yang bisa digunakan adalah plugin AMP buatan Automattic yang memungkinkan untuk kita kustomisasi pada beberapa bagian tampilannya.


Hal ini (menempatkan iklan di tengah postingan Wordpress AMP) bisa menggunakan script php untuk menampilkan iklan di tengah postingan pada Wordpress HTML5.

Salah satu script php untuk menempatkan iklan di tengah postingan Wordpress seperti di bawah ini. Simpan script ini 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 );
}

Silahkan tambahkan kode iklan AMP amp-ad pada kode di atas, sehingga tampilannya menjadi seperti di bawah 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 );
}

Kemudian, silahkan edit plugin AMP lalu masuk ke amp/templates/single.php dan silahkan copy kode di bawah ini.


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

Kemudian silahkan simpan di bawah kode


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

Bagaimana, mudah bukan? Selamat mencoba....

Reactions:
Share this with short URL:

You Might Also Like:

Use parse tool to easy get the text style on disqus comments:
Show Parser Hide Parser