Sponsored Links

【AFFINGER5】AMPページでGoogle AdSenseの自動広告を表示させる方法

【AFFINGER5】

AMPページでGoogle AdSenseの

自動広告を表示させる方法


最近WordPressのテーマを無料の”Luxeritas”から有料の”Affinger5”に変更をして、いろいろごちゃごちゃと四苦八苦しながら使い方を確認しています。

有料テーマだけあっていろいろな機能が充実してはいるのですが、AMP対応に関してかなり弱い気がします。
Luxeritasの時はAMPはさほど気にせずに記事を書いてもおおよそ自動でAMPページに対応していたような気がしていたのですが、アフィンガー5に変更後はすべての記事に対して多少の変更をしないとAMPページに対応してくれないので、地道に更新を繰り返しています。

そんな中地味に困ったのが今までAMPページでも問題なく表示されていたGoogleアドセンスの広告がアフィンガー5に変更してから表示されなくなった点です。

色々調べて何とか表示させることに成功したので、今回はそのやり方を備忘録的に記事にしてみます。

①Google AdSenseで広告コードを取得する

まずGoogle AdSenseのトップページから①メニュー②広告③サマリーの順でクリックしてください。

Googleアドセンス手順1

すると以下のような画面が出てくるので④広告ユニットごとをクリック→「新しい広告ユニットの作成」の中の⑤ディスプレイ広告を選んでください。

Googleアドセンス手順2

以下の画面が出てきますのでの場所で適当に広告の名前をつけて、⑦作成をクリック。これで新しい広告ユニットができます。

Googleアドセンス手順3

次に以下の画面が出てくるので広告コードの中の「data-ad-client="ca-pub-」に続く数字”#1と「data-ad-slot=に続く数字”#2をメモするか画面そのままでコピーできるようにしておきましょう。

Googleアドセンス手順4

一旦アドセンスのページはそのままにして次は先ほどの#1#2の数字をAffinger5の管理画面に設置する作業を行います。

②「AFFINGER5管理」でアドセンスコードを設置

WordPressのダッシュボード画面から「AFFIGER5管理」→「Google・広告/AMP」と進んでください。

アフィンガー5手順1

Google・広告/AMPの中の「AMP用のアドセンスコード」という項目の「data-ad-client(ca-pub-以降の数字)」の下の入力欄に先ほどコピーした#1の数字を入れてください。

同じように「data-ad-slot」の下の入力欄に#2の数字をいれましょう。

アフィンガー5手順2

最後に「保存」をクリックするのを忘れないようにしてください。
これでAFFINGER5管理の設定は完了です。

③Google AsSenseの自動広告の設置方法

次にアドセンスの自動広告を有効にするためにAFFINGER5の親テーマのテンプレートにコードを追加する必要があります。

手順にはコードをサイトの「<head></head>タグの間に貼り付けます」と出てくるのですが親テーマのどこに入れたらいいのかが良くわかりませんでした。

ここではその辺もできるだけ初心者でもわかるように説明していきます。

ステップ1:Googleアドセンスから自動広告用のコードを取得

初めの手順としてアドセンスページでAFFINGER5の親テーマのheadタグに貼り付ける自動広告用のコードを取得します。

ますアドセンスのトップページから①広告②サマリー③「サイトごと」とクリックしていってください。

すると右下あたりに④「AMPはオンです」というボタンが出てきますので、そちらをクリック。

自動広告設置コード アドセンス1

以下の画面が出てきますので、「ステップ1」の赤枠で囲ったコードをコピーしてください。

現在出ているページはステップ2でも必要となりますので、ページはそのまま保持しておいてください。

自動広告設置コード アドセンス2

次にAFFINGER5の親テーマのテンプレートをいじくるようになりますが、手順通りにやればそれほど難しくはないので頑張りましょう。

取得したコードを親テーマのheadタグに貼り付け

WordPressのダッシュボードから①外観②テーマエディターと進み、親テーマに移るために③プルダウンから④「WING-AFFINGER5」を選択して⑤「選択」をクリック。

アフィンガー5手順

出てきたテーマファイルの中から「single-amp.php」を選んでください。

アフィンガー5コード2

すると下の画像のようにずらっとよくわからないコードがたくさん出てきますので、そこの<head></head>タグの間に上でコピーしたコードを貼り付けます。
※下の画像の43行目の空いているところに貼り付け。

アフィンガー5コード3
コード貼り付け前
アフィンガー5コード4
コード貼り付け後

上の画像のように貼り付けができていれば大丈夫です。

次工程で同じ「single-amp.php」のbodyタグにコードを貼り付ける作業がありますので、とりあえずそのままの画面にしておいてください。

ステップ2:コードを親テーマのbodyタグに貼り付け

次は上の親テーマの「single-amp.php」のbodyタグにコードを貼り付けていく作業です。

もう少しなので、頑張ってください。

アドセンスページでステップ2のコードを取得

ステップ1のコードを取得したアドセンスのページに戻ってステップ2のプルダウンを開いてください。

すると同じようにステップ2のコードが出てきますので、このコードをコピーしてください。

アドセンス自動広告 ステップ2-1

コピーしたコードを同じく「single-amp.php」のbodyタグに貼り付けていきます。

取得したコードを親テーマのbodyタグに貼り付け

ステップ1でそのままにしていた「single-amp.php」のbodyタグの直下にステップ2のコードを貼り付けましょう。

下の画像で行くと50行目の下に貼り付けるようになります。

ボディーに貼り付け1
コード貼り付け前
ボディーに貼り付け2
コード貼り付け後

上の画像のように貼り付けができていればOK!

最後に必ずファイルを更新を押してください。
これですべての作業が完了です。

自動広告は有効になるのに1時間程度時間がかかります。

ボディーに貼り付け3

自動広告が有効になっているか確認してみましょう

作業完了後1時間くらいしたらAMPページで自動広告が表示されるか自分のサイトで確認してみましょう。

確認方法は記事ページのURLの最後にamp/を付け加えることでAMPページを確認することができます。
下の画像のように記事の適当な箇所に広告が表示されていればOKです。

自動広告掲載例

-WordPress, ブログ
-, , , ,

© 2020 ogulog(オグログ) Powered by AFFINGER5