芝生やDIY等のライフハックやWeb制作情報を発信するメディア

【WordPress】ショートコードを使ってGoogle Adsenseのコードを通常用/AMP用で出し分ける方法

WordPress2017年3月29日

Google Adsenseを記事の本文内に設置するには様々な方法がありますが、Web屋の芝生DIYではGoogle Adsenseの位置を記事ごとに詳細にコントロールするため、記事ごとWordPressのショートコードで設置するようにしています。

ですが、AMP対応するにあたって、単純にショートコードでソースを呼び出すだけではAMP対応ページでバリデータエラーを発生させることになってしまいます。これを回避するために、通常用/AMP用でGoogle AdsenseのソースコードをWordPressを使って出し分ける方法を本記事ではご紹介いたします。

function.phpにショートコードの記述を追加

function.phpに以下のソースコードを追加記述します。

function showAds(){
    if (empty($_GET['amp'])){
    	//通常のAdsenseコードを記述
    	return '<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-XXX" data-ad-slot="●●●" data-ad-format="rectangle"></ins><script>(adsbygoogle = window.adsbygoogle||[]).push({});</script>';
    }
    
    if(is_single() && $_GET['amp'] === '1'){
    	$is_amp = true;
    	//AMP用のAdsenseコードを記述
    	return '<amp-ad layout="responsive" type="adsense" width="300" height="250" data-ad-client="ca-pub-XXX" data-ad-slot="●●●"></amp-ad>';
    }
}
add_shortcode('adsense', 'showAds');

解説

最初のif文は通常時用の記述となります。empty($_GET['amp'])でAMPページではないことを判定し、returnに通常用のGoogle Adsenseコードを記述して出力します。2つめのif文はAMP用の記述となり、記事ページ(single.php)かつampの値が1である(AMPページである)場合に、AMPページ用のGoogle Adsenseコードを出力するようにしています。

使い方

投稿画面にて、最後の行にて記述したショートコード名「adsense」の名前を使って以下の以下の記述で呼び出します。

[adsense]

まとめ

特にプラグインも使用することなく、わりと汎用的に使えるのでオススメです。記事上用、記事中用でショートコードを分ければ(サンプルに加えてもう1セット記述追加すれば)さらに詳細に複数箇所でのGoogle Adsense出し分けが、AMPページでも可能となります。

「WordPress」の他の記事を読む

ページの先頭に戻る