WordPress のプラグイン「WordPress Popular Posts」はアクセス数の多い記事を表示するプラグインですが、その一覧に AdSense の広告を挿入する方法です。

• AjaxコンテンツにはAdSenseは表示されない
• AdSenseのトリガーをJavascriptで挿入する
  • wpp-onloadイベントを利用する
• WordPress Popular PostsにAdSenseを表示する
• ライセンス等

01AjaxコンテンツにはAdSenseは表示されない

WordPress Popular Posts のソースを見ても広告を挿入できるようなフックが見当たりませんので、ソースを弄ることからはじめました。ただ、結局、Ajax を使っているようですのでPHPソースだけではうまくいきませんでした。それにソースはアップデートの際に上書きされてしまいますのであまり良い方法ではありません。

WordPress Popular Posts のバージョンは 5.5.0 です。

wordpress-popular-posts > src > Output.php がHTMLコンテツを送り出すクラスで、その 164行目からの関数 build_output がコンテンツを作り出しています。そして、227行目からの次の繰り返し処理で指定された表示数の記事を $this->output に代入しています。

// Format each post
foreach( $this->data as $post_object ) {
    $position++;
    $this->output .= $this->render_post($post_object, $position);
 }

ですので、その繰り返しの希望の位置で AdSense のコードを入れればいいことになります。例えば、

foreach( $this->data as $post_object ) {
    $position++;
    // 一覧の4番目に Adsense を挿入
    if( $position == 4){
        $this->output .= '<div id="wpp-ads'">
            <ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-62+ds+11-5i+eg" data-ad-client="ca-pub-1635719600228159" data-ad-slot="2690269990"></ins>
            <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
            </div>';
    }
    $this->output .= $this->render_post($post_object, $position);
}

とすれば、WordPress Popular Posts 一覧記事の4番目に AdSense が挿入されます。もちろん、仮に上のコードを利用されるにしても AdSense の個々のデータは自身のものに差し替えてください。

しかし、これでは広告は表示されません。ここまでやっておいてなんですが、WordPress Popular Posts は Ajax を使ってコンテンツを表示していますので、広告表示のトリガーであるスクリプト (adsbygoogle = window.adsbygoogle || []).push({}); が働きません。

02AdSenseのトリガーをJavascriptで挿入する

この状態で広告が表示されずしばらく悩んでいたんですが、結局、Ajaxコンテンツでは AdSense のスクリプトをそのまま入れてもトリガーが働かないようです。

で、いろいろ悩んだ末、DOMが構築されてから AdSense のスクリプトにトリガーを挿入すればいいのではないかと思いつき、WordPress Popular Posts の Javascript を見てみました。

wpp-onloadイベントを利用する

WordPress Popular Posts がフロントエンドでコンテンツを表示するのは wordpress-popular-posts > assets > wpp.js の Minify ファイルです。そして、その中にある renderWidget 関数が Ajaxコンテンツをレンダリングしています。

renderWidget 関数の最後にこんなスクリプトがあります。

let event = new Event("wpp-onload", {"bubbles": true, "cancelable": false});
parent.dispatchEvent(event);

このスクリプトが具体的になにを意味しているのかは今のところよくわかりませんが、処理の最後に wpp-onload というカスタムイベントが実行されていることは間違いありません。ですので、このイベントをひろって、AdSense のトリガースクリプトを挿入すれば広告が表示されるのではないかと思い、次の Javascript をフロントエンドに読み込んで試してみました。

document.addEventListener('wpp-onload', () => {
  const wpp_ads = document.getElementById('wpp-ads');
  const adsScript = document.createElement('script');
  adsScript.text = '(adsbygoogle = window.adsbygoogle || []).push({});';
  wpp_ads.appendChild(adsScript);
});

これで、無事 AdSense の広告が表示されました。別の方法としてはタイマーを使って要素 wpp-ads（idは任意）が表示されるのを監視する方法もあるかと思います。

03WordPress Popular PostsにAdSenseを表示する

ということであれば、トリガーだけではなくすべての Adsense スクリプトを DOM 構築後に Javascript で読み込めばいいということになります。

document.addEventListener('wpp-onload', () => {
    const wpp_contents = document.querySelector('#wpp-番号 .widget-    entry-wrap');
    const adsScript = document.createElement('script');
    adsScript.text = '(adsbygoogle = window.adsbygoogle || []).push({});';
    const adsDiv = document.createElement('div');
    adsDiv.innerHTML = '<ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-1635719600228159" data-ad-slot="5997518283"></ins>';
    adsDiv.appendChild(adsScript);
    wpp_contents.insertBefore(adsDiv, wpp_contents.children[4]);
});

これで WordPress Popular Posts のソースをいじらなくても広告が表示されるようになりました。もちろん、利用される場合は、上のコードの「番号」及び AdSense の個々のデータは自身のものに差し替えてください。また、コードの転載はしないでください。

04ライセンス等

ご使用の場合は以下の注意事項をお守りください。

• ライセンスは IMUZA.com にあります。
• 紹介は歓迎ですが、バグ対応ができなくなりますので転載はしないでください。
• 紹介していただく場合は、当記事へのリンクをお願いします。
• 自己責任でお使いください。
• お問い合わせ、バグの報告、仕様変更のご要望等は Contact Us までお願いします。