【AFFINGER５】
AMPページでGoogle AdSenseの
自動広告を表示させる方法
最近WordPressのテーマを無料の”Luxeritas”から有料の”Affinger5”に変更をして、いろいろごちゃごちゃと四苦八苦しながら使い方を確認しています。
有料テーマだけあっていろいろな機能が充実してはいるのですが、AMP対応に関してかなり弱い気がします。
Luxeritasの時はAMPはさほど気にせずに記事を書いてもおおよそ自動でAMPページに対応していたような気がしていたのですが、アフィンガー５に変更後はすべての記事に対して多少の変更をしないとAMPページに対応してくれないので、地道に更新を繰り返しています。
そんな中地味に困ったのが今までAMPページでも問題なく表示されていたGoogleアドセンスの広告がアフィンガー５に変更してから表示されなくなった点です。
色々調べて何とか表示させることに成功したので、今回はそのやり方を備忘録的に記事にしてみます。
CONTENTS
①Google AdSenseで広告コードを取得する
まずGoogle AdSenseのトップページから
①メニュー→②広告→③サマリー
の順でクリックしてください。
すると以下のような画面が出てくるので
④広告ユニットごとをクリック→「新しい広告ユニットの作成」の中の⑤ディスプレイ広告
を選んでください。
以下の画面が出てきますので
⑥の場所で適当に広告の名前をつけて、⑦作成をクリック
これで新しい広告ユニットができます。
次に以下の画面が出てくるので広告コードの中の
「data-ad-client＝"ca-pub-」に続く数字”＃１”と「data-ad-slot=」に続く数字”＃２”をメモするか画面そのままでコピーできるようにしておきましょう。
一旦アドセンスのページはそのままにして次は先ほどの＃１と＃２の数字をAffinger5の管理画面に設置する作業を行います。
②「AFFINGER5管理」でアドセンスコードを設置
WordPressのダッシュボード画面から「AFFIGER5管理」→「Google・広告／AMP」と進んでください。
Google・広告／AMPの中の「AMP用のアドセンスコード」という項目の「data-ad-client（ca-pub-以降の数字）」の下の入力欄に先ほどコピーした＃１の数字を入れてください。
同じように「data-ad-slot」の下の入力欄に＃２の数字をいれましょう。
最後に「保存」をクリックするのを忘れないようにしてください。
これでAFFINGER5管理の設定は完了です。
③Google AsSenseの自動広告の設置方法
次にアドセンスの自動広告を有効にするためにAFFINGER5の親テーマのテンプレートにコードを追加する必要があります。
手順にはコードをサイトの「<head></head>タグの間に貼り付けます」と出てくるのですが親テーマのどこに入れたらいいのかが良くわかりませんでした。
ここではその辺もできるだけ初心者でもわかるように説明していきます。
ステップ1：Googleアドセンスから自動広告用のコードを取得
初めの手順としてアドセンスページでAFFINGER5の親テーマのheadタグに貼り付ける自動広告用のコードを取得します。
ますアドセンスのトップページから①広告→②サマリー→③「サイトごと」とクリックしていってください。
すると右下あたりに④「AMPはオンです」というボタンが出てきますので、そちらをクリック。
以下の画面が出てきますので、「ステップ１」の赤枠で囲ったコードをコピーしてください。
現在出ているページはステップ２でも必要となりますので、ページはそのまま保持しておいてください。
次にAFFINGER5の親テーマのテンプレートをいじくるようになりますが、手順通りにやればそれほど難しくはないので頑張りましょう。
取得したコードを親テーマのheadタグに貼り付け
WordPressのダッシュボードから
①外観→②テーマエディター
と進み、親テーマに移るために
③プルダウンから④「WING-AFFINGER5」を選択して⑤「選択」をクリック。
出てきたテーマファイルの中から「single-amp.php」を選んでください。
すると下の画像のようにずらっとよくわからないコードがたくさん出てきますので、そこの<head></head>タグの間に上でコピーしたコードを貼り付けます。
※下の画像の４３行目の空いているところに貼り付け。
上の画像のように貼り付けができていれば大丈夫です。
次工程で同じ「single-amp.php」のbodyタグにコードを貼り付ける作業がありますので、とりあえずそのままの画面にしておいてください。
ステップ２：コードを親テーマのbodyタグに貼り付け
次は上の親テーマの「single-amp.php」のbodyタグにコードを貼り付けていく作業です。
もう少しなので、頑張ってください。
アドセンスページでステップ２のコードを取得
ステップ１のコードを取得したアドセンスのページに戻ってステップ２のプルダウンを開いてください。
すると同じようにステップ２のコードが出てきますので、このコードをコピーしてください。
コピーしたコードを同じく「single-amp.php」のbodyタグに貼り付けていきます。
取得したコードを親テーマのbodyタグに貼り付け
ステップ１でそのままにしていた「single-amp.php」のbodyタグの直下にステップ２のコードを貼り付けましょう。
下の画像で行くと５０行目の下に貼り付けるようになります。
上の画像のように貼り付けができていればOK!
最後に必ず「ファイルを更新」を押してください。
これですべての作業が完了です。
自動広告は有効になるのに１時間程度時間がかかります。
自動広告が有効になっているか確認してみましょう
作業完了後１時間くらいしたらAMPページで自動広告が表示されるか自分のサイトで確認してみましょう。
確認方法は記事ページのURLの最後に「amp/」を付け加えることでAMPページを確認することができます。
下の画像のように記事の適当な箇所に広告が表示されていればOKです。
