CocoonでAdsenseのエラーが表示される場合の解決方法 “adsbygoogle.push() error”

Adsenseのエラー

事象

ブログを更新していた際に、次のようなエラーが出ていることに気が付きました。

表示方法

どのタイミングで表示されるようになったのかはわかりませんが、エラーが出ているのは気持ちが悪いので、その原因と解決方法を探ってみることにしました。

WordPressのテーマ「Cocoon」との関連

当ブログはWordPressのテーマに「Cocoon」を採用しています。

今回のエラーについては、テーマの設定とAdsenseの設定の組み合わせによって発生するということが確認できました。

そして、当エラーを解決するために、私が行ったCocoonの設定やコードの修正などについて、それぞれ記載します。

Cocoonのフォーラムでも当事象について質問させて頂きました。

参考

adsenseがページによって出たりでなかったりする

こんにちは。 いくつかのサイトをCocoonにしています。 いま、同じサイト内でも記事によってadsenseが出たりでなかったりする症状が出ています。僕が何か間違いを犯しているのか、そういうものなのか...

wp-cocoon.com

原因

いろいろ調べたり試したりした結果、エラーが発生するのは次のケースでした。

結論から言うと、これらのどちらかをやめることでエラーは出なくなります。

理由は（おそらくですが）Adsenseの広告コードが出力されている箇所が非表示になっているためではないかと思われます。具体的には、スライドインボタンの「サイドバー」ボタンで表示／非表示となる部分。

この部分にAdsenseの広告コードが出力されているにもかかわらず、スタイルで非表示(display:none)としてしまうことによって、広告を表示しようとするjavascript内でエラーが発生しているのではないかと。

サイドバーの広告、モバイルボタンの「スライドインボタン」については次の通りとなっています。

サイドバーの広告表示

Cocoonの機能でウィジェットのサイドバーにAdsense広告を表示することが出来ます。

参考　ウィジェットを利用して広告（AdSense）を表示する方法

モバイルボタンの「スライドインボタン」

モバイルボタンの「スライドインボタン」とは、モバイル表示の場合に画面下部にメニューの用なボタンを表示するCocoonの機能です。

参考　ウィジェットを利用して広告（AdSense）を表示する方法

モバイルボタン表示例

設定画面

解決方法

上記の通り、Adsenseをサイドバーに表示しない、もしくはスライドインボタンを使用しないことでエラーが出ないことは確認できました。

よって、エラーを表示しないようにするには次の設定を変更することで解決が可能となります。

設定による解決

• サイドバーのウィジェットから広告を外す
• スライドインボタンを使用しない

どちらかの機能を使わなくてもいい場合は、この変更で問題ありません。

しかしながら、私は「スライドインボタン」はモバイル表示において非常に素晴らしいUIだと思っているので、できればそのまま残しておきたいと考えました。

その他の解決方法

そこで、次はCocoonのカスタマイズを検討してみました。

具体的な対応としては、不要な（エラーの原因となってしまう）広告コードを出力しないように修正を行います。

対象ファイル

Cocoonの実装は、できるだけ親テーマを変更することなく、子テーマでカスタマイズできるようになっています（functions.phpへの実装など）。

しかしながら、今回の修正箇所については親テーマのソースファイルを直接変更するしか方法が見当たりませんでした。

該当ファイルは「mobile-menu-buttons.php」です。

変更内容

以下の内容は親テーマを直接編集するため、コードの変更によってテーマ全体に不具合が発生する可能性もあります。動作結果はCocoonのバージョン「1.2.4.5」で行っていますが、異なるバージョンの場合は、該当ファイル及びコードへの影響を確認した上で自己責任で行うようにしてください。また、作業前に必ずバックアップを取るようにしてください。

変更箇所抜粋

“echo $sidebar;”の直前に、広告コードを削除する処理を追加します。

  <?php if (is_active_sidebar( 'sidebar' ) || is_active_sidebar( 'sidebar-scroll' )): ?>
  <!-- サイドバーボタン -->
    <div class="sidebar-menu-button menu-button">
      <input id="sidebar-menu-input" type="checkbox" class="display-none">
      <label id="sidebar-menu-open" class="menu-open" for="sidebar-menu-input">
        <span class="sidebar-menu-icon menu-icon"></span>
        <span class="sidebar-menu-caption menu-caption"><?php _e( 'サイドバー', THEME_NAME ) ?></span>
      </label>
      <label class="display-none" id="sidebar-menu-close" for="sidebar-menu-input"></label>
      <div id="sidebar-menu-content" class="sidebar-menu-content menu-content">
        <label class="sidebar-menu-close-button menu-close-button" for="sidebar-menu-input"></label>
        <?php //サイドバー
        ob_start();
        get_template_part('sidebar');
        $sidebar = ob_get_clean();
        //ドロワーメニュー用のサイドバーからIDを削除（IDの重複HTML5エラー対応）
        $sidebar = preg_replace('/ id="[^"]+?"/i', '', $sidebar);

        // --------------------------------------------------------------------
        // Adsense広告を表示しないようにする
        // from >>>
        $sidebar = preg_replace('/(?:\n|\r|\r\n)/', '', $sidebar );
        $sidebar = preg_replace('/<div class="ad-label.*?<\/div>/', '', $sidebar);
        $sidebar = preg_replace('/<div class="ad-responsive ad-usual.*?<\/div>/', '', $sidebar);
        $sidebar = preg_replace('/<div class="ad-wrap".*?<\/div>/','',$sidebar);
        // <<< To
        // --------------------------------------------------------------------

        echo $sidebar;
         ?>
        <!-- <label class="sidebar-menu-close-button menu-close-button" for="sidebar-menu-input"></label> -->
      </div>
    </div>
  <?php endif ?>

追加コードの抜粋

        // --------------------------------------------------------------------
        // Adsense広告を表示しないようにする
        // from >>>
        $sidebar = preg_replace('/(?:\n|\r|\r\n)/', '', $sidebar );
        $sidebar = preg_replace('/<div class="ad-label.*?<\/div>/', '', $sidebar);
        $sidebar = preg_replace('/<div class="ad-responsive ad-usual.*?<\/div>/', '', $sidebar);
        $sidebar = preg_replace('/<div class="ad-wrap".*?<\/div>/','',$sidebar);
        // <<< To
        // --------------------------------------------------------------------

結果

上記のコードを追加することでエラーは出なくなりました。

親テーマのファイルを編集しているので、望ましい方法ではないのですが、エラーが出るよりはいいかと思います。

テーマのバージョンアップを行うと、該当ファイルが新しいファイルで置き換わってしまうので、再度変更を行う必要があるのも面倒ですが、当面はこの形で運用してみます。

まとめ

以上、CocoonでAdsenseのエラーが出る場合の原因と解決方法でした。

スマートな解決策ではありませんが、とりあえずエラーを出ないようにしたい場合などは参考になるかと思います。