こんにちは、ウェス＠ブログ初心者です。
前回の記事でウェスのアレコレをAMP化することに成功しました。
http://w-es.jp/wordpress-amp/
この状態ではAMP化したページにはアドセンスが表示されませんので、アドセンスが表示されるように設定をしてみたいと思います。
※通常のURLであれば広告は表示されますが、「/amp/」となる場合に表示されません。
自分ではわからないことはまずGoogleで検索。
「Wordpress AMP アドセンス」で検索をしてみました。
通常の広告が自動広告にしているので、AMPも自動広告にしたいと思っていたので、今回は「うれしデザイン」さんと「WordPressブログ塾」さんの記事を参考にさせていただこうと思います。
※コード入れる場所が記事を作られた当時と現在は異なるようなので、参考サイトを確認する場合はご注意ください。
AMP化したWordpressにもアドセンスを設定する
AMP化したWordpressへの自動広告設定は、アドセンスの自動広告設定＆Wordpressの設定が必要となりますので、それぞれご紹介していきます。
アドセンスのAMP自動広告を設定する
アドセンス管理画面の「広告＞自動広告」を開いて、更に「AMP広告」を開きます。
手順1にある「テキスト広告とディスプレイ広告のフォーマットをオンにします」をクリックして「オン」にしてください。
これでアドセンスの設定は完了となります。
アドセンスにある手順2と3については、それぞれWordpressに設定する内容となります。
WordPressにAMP自動広告の設定をする
手順2の<head>内タグを設置する
まずは、手順2に表示されているコードコピーしてください。
そして、Wordpressの管理画面に戻ります。
- 左メニュー「プラグイン＞プラグインエディター」を開きます
- 編集するプラグインから「AMP」を探して選択をクリックします
- プラグインファイルから「templates」を開き「html-start.php」を選択してください。
17行目で改行をして、出来た18行目にコピーしたコードを貼り付けてください。
手順3のHTMLソースを設置する
手順2の画面はそのまま残して、
手順3のコードをコピーしてください。
手順2の作業をしたWordpressの管理画面に戻ります。
最終29行目で改行をして、30行目にコピーした手順3のコードを貼り付けてください。
貼り付けたら、更新を押してください。
これで作業は完了となります。
広告は30分程度で反映されるようになります。
まとめ
参考にさせていただいたサイトの通り作業を行おうとしたのですが、表示される内容に相違があったのでウェスの方で各コードを確認してアドセンスのコードを入れる場所を探りました。
ひとまず、PC・スマホどちらからでもAMPページに広告の反映が確認出来たので問題ない場所にアドセンスのコードを入れられたと思っています。
それでも参考サイトがなければ、どのテンプレートにコードを入れるか予想もできなかったので非常に助かりました。
