WordPressでAdSenseのショートコードを作って、記事内の好きな位置に配置する方法

ライター
北野 啓太郎
-

Google AdSenseには、自動広告という機能があります。Googleに完全にお任せで、サイト内・記事内に広告ユニットを自動で配置してくれるサービスです。

一見便利だし、効果的な気がしますよね。

でもこれ、自動広告の「記事内広告」を有効にすると、記事内の文章をぶった切って、広告を差し込んでくるので、非常に読みづらくなるのです。また、突然広告が入るので、これは記事なのか、広告なのか、わかりにくなります。

Googleが提供するツールですが、「自動広告は使いたくない」という方もいるでしょう。

今回は、自動ではなく、手動で記事内の好きなところにAdSense広告ユニットを配置する方法をお伝えします。

プラグインを使わず、記事内の好きな場所にショートコードでAdSenseを配置する手順

ここでは、WordPressを使ったウェブサイトでの手法をお伝えします。

記事内の好きな場所にAdSense広告を配置するには、ショートコードを作る必要があります。ショートコードは、WordPressのプラグインを使う方法もあるのですが、サイトの読み込みに負荷がかかったり、セキュリティのリスクもあり得るので、可能であればプラグインを使わない方法が良いでしょう。

その具体的な手順は、以下のとおりです。

  1. AdSense コードを作成・カスタマイズする
  2. WordPressの子テーマを作る
  3. 子テーマの function.php にコードを追記する
  4. 記事内にショードコードを記入する

それでは、解説いたします。

記事内に入れる用の「AdSenseコード」を準備

Google AdSenseのコードをそのまま設置するより、「広告サイズをレクタングルにする」「誤タップ（誤クリック）を防ぐ」というカスタマイズを施すことで、収益が上がると思われます。

バナーサイズが大きくなり、クリックの質が高まるからです。

その手順は以下の通りです。

【手順１】AdSense レスポンシブ広告のデフォルトタグ

  1. Google AdSenseの管理画面へログイン
  2. 広告の設定 > 広告ユニット
  3. テキスト広告とディスプレイ広告
  4. 自動サイズ レスポンシブ
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 任意の広告ユニット名 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxxxxxxx"
data-ad-slot="xxxxxxxxx"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

これはGoogleが生成する、デフォルトのAdSenseコードです。

 

【手順２】AdSense レスポンシブ広告をレクタングルだけにする

  1. 広告コードの auto 部分を rectangle に変更する
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 任意の広告ユニット名 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxxxxxxx"
data-ad-slot="xxxxxxxxx"
data-ad-format="rectangle"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

autoのままだと、長方形の小さなバナーが表示されることがあります。見た目にも貧相で、クリック率も低そうです。そこで、レクタングル（rectangle）に限定してやることで、レクタングル大（336×280）など、正方形に近いインパクトある広告だけを表示することができるのです。

 

【手順３】AdSense レスポンシブ広告を画面の横幅いっぱいにしない（左右に余白）

  1.  広告コードにパラメータを追加する
    data-full-width-responsive=”false”
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 任意の広告ユニット名 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxxxxxxx"
data-ad-slot="xxxxxxxxx"
data-ad-format="rectangle"
data-full-width-responsive="false"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Googleは、横幅いっぱいのバナーサイズの方が収益が上がると推奨していますが、スマートフォンで画面をスワイプでスクロールする際、左右に余白が無いと広告を誤タップしてしまう恐れがあります。

ユーザーに不便を掛けてしまわないよう、僕は左右に余白がある方が良いと考えています。

手順２・３のカスタマイズは、Googleが公式に認めているので問題ありません。

＊【備考】Google AdSenseの「新しい記事内広告」では、data-full-width-responsive=”false” が効きませんでした。またわかったら追記します。

■参考にした記事
Google AdSense ヘルプ：レスポンシブ広告のタグパラメータの使用方法

 

【手順４】AdSense広告の上に「スポンサーリンク」の文字を小さく入れる

  1. AdSenseコードの上に、1行追加する
<p style="color: #666; text-align: center;"><span style="font-size: 80%;">スポンサーリンク</span>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 任意の広告ユニット名 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxxxxxxx"
data-ad-slot="xxxxxxxxx"
data-ad-format="rectangle"
data-full-width-responsive="false"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

本文中にある広告ユニットは、記事なのか、広告なのか、ユーザーにわかりづらくなります。そこで誤タップを防ぐため、広告の上に「スポンサーリンク」の文字を入れました。

フォントサイズは本文の80%で、色はグレーを指定しています。ここはお好みで変更可能です。

以上、h2タグの上に入れたい「AdSenseコード」が、まずは完成です。

■参考にした記事
DANDELIONGAMEBLOG：【グーグルアドセンス】スポンサーリンクのラベルを中央寄せで文字色を変更し小さくスタイリッシュにカスタマイズする方法（【追記】記事公開終了しました）

 

WordPressの子テーマを準備する

（左）子テーマ　（右）テーマ本体

記事内にショートコードでAdSenseタグを配置するには、「function.php」というファイルにコードを埋め込む必要があります。

function.phpは、非常に重要なファイルで、記述を間違えるとサイトが表示されなくなる恐れがあります。function.phpをカスタムする場合は、子テーマを作って追記するのが一般的です。

まずは、子テーマを作成しましう。

ただし、子テーマの作り方については、ここでは省略します。ご利用のテーマによっては、子テーマ用のテーマを配信している場合があるからです。

参考までに、本サイトは海外テーマ「Newspaper」を使用していますが、子テーマ（Child Theme）も同梱されています。有料・無料に関わらず何かテーマをご利用の方は、それぞれのテーマ配布サイトの「子テーマ」を確認してください。

また、デフォルトのテーマをカスタマイズしている方は、こちらの記事が参考になります。

■関連リンク
WordPress Cortex 日本語版：子テーマ

AdSense広告ユニット配置用のショートコードを作成

実際にh2タグの上に、AdSense広告ユニットを配置して行きます。

  1. 子テーマの「function.php」に、以下のコードを追記
//[ad]ショートコードに対して広告を表示する
function replace_ad_shortcode_to_advertisement_ex($the_content){
$ad_shortcode = '[ad]';
$ad_code = <<< EOF
//////////////////////////
//ここにアドセンスコードを挿入//
//////////////////////////
EOF;
$the_content = preg_replace('{^(<p>)?'.preg_quote($ad_shortcode).'(</p>)?$}m', $ad_code, $the_content);
return $the_content;
}
add_filter('the_content', 'replace_ad_shortcode_to_advertisement_ex');

上記コードにある「ここにアドセンスコードを挿入」部分には、先に用意したAdSenseのカスタムコードをコピー＆ペーストしてください。「//」は不要です。

また、ad の部分は、好きな文字に変更することができます。

例）adsense、ad1 など

ショートコードを複数作る方法

配置場所によって違うAdSenseコードを使用したり、新しい記事内広告を設置したい場合もあるでしょう。その場合は、上記「AdSense広告ユニット配置用のショートコードを作成」のコードを function.php に複数追記してください。

その際、それぞれのショートコードの名前を変えるのをお忘れなく。

■参考にした記事
寝ログ：WordPress本文中の[ad]とショートコードを書き込んだ部分に広告を表示するカスタマイズ方法

WordPressの記事作成画面に、ショートコードを記入する

いよいよ最後のステップです。
ショートコードの準備は整っていますので、次はWordPressの記事作成画面を開き、AdSense広告ユニットを配置したい場所に、先ほどのショートコードを記入します。

（例） 
こんにちは。〇〇です。
今回はWordPressに最適な、レンタルサーバーをご紹介します。

最近はWordPressに特化したレンタルサーバーがあるので、そうしたサーバーを選ぶと、便利に利用できます。

[ad]

<h2>おすすめのレンタルサーバー（１）「wpXレンタルサーバー」</h2>
まずは、ブロガーの間でも定番のこのサーバーです。特徴は……

 

以上、作業はこれで完了です。
お疲れさまでした。

Swingin’ Thinkin’「AdSense」関連記事

スマートフォンとブラウザ。h2タグの上にアドセンスを配置した見本WordPressで、h2タグの上にAdSense広告を設置する方法