WordPress｜記事中にアドセンス広告をショートコードで表示する方法

WordPressの記事中にグーグルアドセンス広告を表示するプラグインはいくつかあります。

しかし、プラグインをたくさん入れ過ぎるとページ表示速度が遅くなる等の理由から出来るだけプラグインは利用したくないと考えている方もいるでしょう。

そのような方に向けて、この記事ではWordPressのショートコードを利用して記事中の任意の位置にアドセンス広告を表示させる方法について解説します。

1 ショートコードで記事中にアドセンスを表示する方法
2 まとめ

ショートコードで記事中にアドセンスを表示する方法

アドセンスの広告コードを取得する

まずはグーグルアドセンスにログインします。

そして、ショートコードで表示させたい広告を作成するか、既存の広告を選んで広告コードを表示させます。

上記の広告コード画面を開いたら、とりあえずそのままにして次へ進んでください。

functions.phpにアドセンスのショートコードを作成する

functions.phpをカスタマイズしてグーグルアドセンスのショートコードを定義します。

親テーマのfunctions.phpを直接編集するとテーマがアップデートした時に書いた内容が消えてしまいます。

WordPressの子テーマを作成するか、あるいはアップデートする前にfunctions.phpの内容を保存しておくかで対処してください。

WordPress子テーマの作り方とCSS等が反映されない原因を解説

WordPressのテーマをアップデートした時にカスタマイズした内容が元に戻って大変な思いをしたことはありませんか？サイト運営に慣れ...

takalog.jp

もしWordPressプラグイン「Code Snippets」を使っているなら、functions.phpを直接編集せずにコード管理できるのでファイルは上書きされません。

それではfunctions.phpを編集しましょう。

ここではWordPress管理画面から直接編集しますが、ローカル環境にfunctions.phpのバックアップを取った方が安全なので初心者はFTPソフトを使うことをおすすめします。

WordPress｜functions.phpがある場所はどこ？

WordPressのfunctions.phpがある場所がどこなのかをWordPress管理画面とFTPソフトを使った場合の2通りについてそれぞれ解説します。

takalog.jp

WordPress管理画面からは「外観＞テーマの編集」を選択して、右側に並んでいるファイルから「テーマのための関数（functions.php）」をクリックすれば開けます。

ファイルを開いたら下記のコードを追加します。

【functions.php】

function _adsense() {
    return <<< EOT
<div class="my-ad-space">
<div class="my-ad-label">スポンサーリンク</div>
<div>
【自分のアドセンス広告コード】
</div>
</div>
EOT;
}
add_shortcode('adsense', '_adsense');

function _adsense() {

return <<< EOT

<div class="my-ad-label">スポンサーリンク</div>

<div>

【自分のアドセンス広告コード】

</div>

EOT;

}

add_shortcode('adsense', '_adsense');

広告だと分かるように「スポンサーリンク」のラベルを付けています。

記事中のアドセンスは広告だと分かりづらいので、ユーザーが誤クリックした場合にすぐ画面を閉じられてしまうとスマートスプライシング機能が働く可能性があるので注意です。

6行目の「自分のアドセンス広告コード」の部分は先程取得したコードを貼り付けてください。

【自分のアドセンス広告コード】

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

<ins class="adsbygoogle"

style="display:block"

data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"

data-ad-slot="xxxxxxxxxx"

data-ad-format="auto"></ins>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

結果として、functions.phpは以下のような感じになるはずです。

【functions.php】

function _adsense() {
    return <<< EOT
<div class="my-ad-space">
<div class="my-ad-label">スポンサーリンク</div>
<div>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
EOT;
}
add_shortcode('adsense', '_adsense');

function _adsense() {

return <<< EOT

<div class="my-ad-label">スポンサーリンク</div>

<div>

<ins class="adsbygoogle"

style="display:block"

data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"

data-ad-slot="xxxxxxxxxx"

data-ad-format="auto"></ins>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

</div>

EOT;

}

add_shortcode('adsense', '_adsense');

ラベルとアドセンス広告を記事の真ん中に配置したい場合は、以下のスタイルを使用中のテーマのCSSファイルなどに追加します。

【テーマのCSSファイル】

.my-ad-space {
  text-align: center;
}

.my-ad-space {

text-align: center;

}

これでショートコードに関する定義は完了です。

もしfunctions.phpの編集でエラーになったらこちらの記事を参考にして対処してください。

WordPress｜functions.phpの編集で真っ白のエラー画面になった場合

WordPressのfunctions.phpの編集ミスで真っ白のエラー画面が表示された場合の対処法を解説します。 functions...

takalog.jp

パソコンとスマホで別々のアドセンスを表示する場合

パソコンとスマホで表示するアドセンスを切り替えたい場合はfunctions.phpの編集内容を以下のようにします。

【functions.php】

function _adsense() {
    if (wp_is_mobile()) {
        $adsense <<< EOT
【自分のアドセンス広告コード（スマホ用）】
EOT;
    } else {
        $adsense <<< EOT
【自分のアドセンス広告コード（パソコン用）】
EOT;
    }
    return <<< EOT
<div class="my-ad-space">
<div class="my-ad-label">スポンサーリンク</div>
<div>
{$adsense}
</div>
</div>
EOT;
}
add_shortcode('adsense', '_adsense');