Simplicity2の通常ページやAMPページで本文中の任意の位置に広告を出す方法

記事の途中に広告を置くことについては、賛否両論があると思います。

私もかつては記事の途中に広告を置くことはしていませんでした。しかし、それは記事中広告に否定的だったからというよりも、ひとつのページ内に置くことができる Adsense 広告の数に制限があったためでした。

広告数の制限は2016年の半ばに撤廃されましたので、最近では記事中広告を置く試みをしているところです。

この記事では、WordPress の人気無料テーマ Simplicity2 を使っている場合に、記事中の任意の位置に広告を出すための方法を書いていきます。(他のテーマでも、ある程度応用は効くと思います。)

スポンサーリンク

ざっくり解説

記事中の任意の位置に広告を出すためには、WordPress のショートコード機能を使用します。

ショートコードというのは、記事中の好きな位置に、次のようなコードを書いておくということです。

コードを書いておくと、その部分が広告に置き換わるという仕組みです。このような仕組みを、自作します。

自作といっても、そんなに複雑なことをするわけではありません。以下の内容を参照すれば、基本、コピペで出来てしまいます。

ショートコードの作成方法は、通常ページと AMP ページで分けて考えたほうが良いと思います。以下では、まず通常ページに広告を挿入するショートコードを作成します。次に、それを AMP ページでも機能するように改良する、という順番で説明します。

通常ページの本文中に広告を挿入するショートコード

通常ページ用のショートコードは、以下の手順で作成します。

Adsense のコードを取得

Google Adsense のサイトで、通常ページに表示する用の広告を新規作成します。

そして、次のようなコードスニペットを入手します。

上記は、InsideArticle という名前で広告を作成した場合の例です。「0000…」のところには、その広告専用の番号が入ります。

なお、広告を新規作成せずに、既存の広告のコードスニペットを入手するのでもOKです。

「テーマのための関数」でショートコード自作

次に、WordPress 管理画面で「外観」>「テーマの編集」を表示し、「テーマのための関数」をクリックして表示します。

「テーマのための関数」は、失敗するとWordPress全体がエラーとなり、真っ白な画面になってしまって復旧するのが大変です。注意して操作してください。

なお、私の場合は、Simplicity2 の子テーマを利用していますので、上記の画像は子テーマの「テーマのための関数」を表示しています。

親テーマでもできるはずですが、子テーマを使うことをおすすめします。

テーマをカスタマイズするなら親テーマの直接編集はお勧めできません。というのも、ダウンロードページで配布しているテーマファイルを直接編集すると、アップデート時に編集下部分がが上書きされ、せっかくのカスタマイズが全て消えてしまいます。それを防ぐ

「//以下にSimplicity子テーマ用の関数を書く」という記述より下に、次の内容をコピペします。

さらに、上記の「★」を、先ほど入手したスニペットで置き換えます。すると次のようになります。

「ファイルを更新」をクリックして、保存します。

テストしてみる

記事編集画面で次のように記述します。

プレビューしてみて、次のように広告が表示されればOKです。

ただし、Adsense の広告は、新規作成から数時間は表示されません。その場合は、ある程度の時間を置いてください。

AMPページでも使えるように改良

上で作成したショートコードを使うと、通常ページの任意の位置に広告を挿入できます。でも、AMPページでは何も表示されません。

そこで、AMP ページにも広告が出るように改良します。

Adsense のコードを取得

Adsense のサイトにて、AMP用の広告を新規作成して、コードスニペットを入手します(既存の広告のコードスニペットでもOK)。広告のサイズは、モバイル用ですので300×250にしておきます。

AMP 用の Adsense コードは、下記を参照して自分で作成する必要があります。

AdSense 向け AMP 対応広告コード作成ガイドAccelerated Mobile Pages(AMP)は、高速表示されるコンテンツ ページを作成することでユーザーのモバイルウェブ

「スクロールせずに見える範囲」と「スクロールしなければ見えない範囲」のどちらにするかという選択肢がありますが、今回は記事本文中の任意の位置に表示しますので、「スクロールしなければ見えない範囲」の内容を参照します。

手順としては次のような感じです。

まず入手したコードスニペットの中で、次の番号の入った部分を取り出します。

次に、上記の番号の部分を、下記のひな形の「★」の部分に挿入します。

すると、次のようになります。

(改行・スペースは適宜調整しています。)

「テーマのための関数」でショートコード自作

先に「テーマのための関数」で保存した部分のうち、下で「☆」を書いている部分に、作成したAMP用スニペットをコピペします。

コピペすると、次のようになります。

テストしてみる

通常ページでやったときと同様、記事編集画面でショートコードを記述して、AMPページをプレビューします。ところが、何度やっても広告は表示されません(広告の部分が空白になります)。

ですが、Google が記事を AMP ページとしてキャッシュし、モバイル端末からの検索により AMP ページにアクセスすると、広告は表示されるはずです。

ですので、ショートコードが入った記事を公開して、Google が認識してくれるまで待ってみてください。

まとめ

ショートコードは、一度作っておくと、何度でも、どのページでも利用できます。是非使用してみてください。

スポンサーリンク
  • このエントリーをはてなブックマークに追加
スポンサーリンク