Wordpressカスタマイズ

【修正あり】WordPressで『AMP』を導入し『AMPアドセンス』に対応させる方法!

投稿日:2016年11月13日 更新日:

シェアする

スポンサーリンク

こんちゃす、たけ氏でっす!

最近『AMP』なるものが話題ですね~

『AMPってなんぞや?』っていう方に向けて簡単に説明すると、
『爆速でページを開けるようになるが、代償としてデザインとJavascriptを犠牲にする』
みたいな感じのものです

導入するとGoogle検索結果のニュース欄にいち早く載る可能性があったり直帰率が下がったりとメリットがたくさんあります

 

ぼくのブログでもしばらく前からAMP自体は対応していたものの、問題点がひとつ

『アドセンスが表示されなくなる』

ぼくのような弱小ブロガーにこれは痛い…!

 

そう思っていたところ『AMPアドセンスがあるらしいぞ!』と噂にきいたので対応させてみました!!

やり方を簡単にまとめましたので以下からドウゾ~~

※カスタマイズは自己責任でお願い致します、
不利益なことがおきても筆者は責任を負えません

※下のほうにある『記事下アドセンスを表示させる方法』にてエラーが出る記述があったので修正しました。
(Twitterにて知らせてくださったお二方に感謝致します)

 

AMPを導入する

まずAMPの導入方法ですが
Wordpressなら非常に簡単です!

管理画面のメニューから、プラグイン→新規追加を押します

検索窓にて『AMP』と検索すると

amp

このプラグインが出て来ますので
今すぐインストールをし、有効化します

 

以上です

 

 

 

 

以上です

ね、簡単でしょ?笑

 

次はAMPアドセンスに対応させる方法です

 

アドセンスコードにAMP用コードを追記する

AMPページは爆速で表示できるようになる代わりに非常にシンプルなデザインとなります

上記プラグインを使用している場合、初期デザインは

ヘッダー
記事
フッター

のような感じに。笑

なのでサイドバーなどに表示させているアドセンスは諦めて、記事内アドセンスのみ対応させます

 

通常、アドセンスを貼り付けるときはこのようなコードを使用しますよね

スポンサーリンクゥ!
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- アドセンスゥ! -->
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-○○"
data-ad-slot="△▽"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

記事中アドセンスにもこういうコードを使っていると思います

赤字の部分は広告によって変わってくるので、普段使っているものを参考にしてください
このコードの下に↓のコードを追加します

<amp-ad width="300" height="250"
type="adsense"
data-ad-client="ca-pub-○○"
data-ad-slot="△▽">
</amp-ad>

赤字の部分は上のコードと同じに!
あとはフルコピペでOKです

このコードが『AMP用アドセンス』のコードです

 

『両方書いたら、広告2つ出るんじゃない?』と思った方!
(ぼくがそうでした)

 

安心してください、

『AMPページでは通常のアドセンスが表示されない』

『AMPアドセンスはAMPページ以外では表示されない』

ので、
2つ連ねて書くだけで両方対応できるのです!

 

これでAMP導入+AMPアドセンス対応は完了です!

 

 

 

…これだけじゃ記事終われないですよね~~

 

記事下AMPアドセンスのやり方も教えちゃいます

『あ~AMPアドセンス対応させなきゃ~』とぼくが試行錯誤して対応させた『記事下AMPアドセンス』のやり方も公開します!

 

記事の最後にさっきのAMPアドセンスコードを張ってください

 

 

…嘘ですよ笑
そんな乱暴なこと言わないので安心してください

ただ、普段あまりいじらないところを触りますので気をつけてくださいね~

 

AMPプラグインを編集する

管理ページのサイドバーから、プラグイン→インストール済みプラグインにアクセス

amp-1

AMPプラグインの『編集』を押します

 

すると『amp/amp.php の編集 (停止中)』と言うページに移動しますので

右の一覧から『amp/templates/single.php』を探してクリックします

 

『amp/templates/single.php の編集 (停止中)』と言うページに移動されればOKです

このphpコードがAMPページのコードですので
ここの『</article>』タグの上にAMPアドセンスコードを追記します。

</footer>

<!-- AMPアドセンス -->
スポンサーリンク<br/>
<amp-ad width="300" height="600"
type="adsense"
data-ad-client="ca-pub-○○"
data-ad-slot="△▽">
</amp-ad>

</article>

灰色部分は元々のコードです。
赤色部分は広告によって違いますので、ご自身のアドセンスコードから抜き取ってください。

 

これで記事の下にAMPアドセンスを表示できるようにできました!

この方法はAMPプラグインが更新されると追記した部分が元にもどってしまう(消えてしまう)ので、アップデートには気をつけて、された後はまた追記するなどして対応してください!

※修正前は『スポンサーリンク』を<span>タグで囲っていましたが、styleはspanで使えませんという旨のエラーが出てしまうので該当箇所を削除しました。サイズ変更はclassタグでできるそうです

 

 

おわりに

これぞWordpressの特権!
AMPアドセンスに早速対応させることができました~

最近気づいたのですが、はてなアプリの新着やホッテントリから記事を見たときAMP対応サイトはAMPページが表示されてしまうのです

ぼくのブログも最近ホッテントリに入ったりしていたので(ありがとうございます!)、今回の対応でAMPによるアドセンス非表示での利益の取りこぼしをせず済むようにできました

 

はてなは未だAMPアドセンスに対応していません!

ぼくも試行錯誤してAMPページでアドセンスを表示できないか試していたんですけど、iframe内でもダメだったので諦めました…はてな民のみんな、ごめんね

だからはてなのみんな、これを機にWordpressに引っ越してくるといいとおもうよ!!

 

そんな感じで以上!たけ氏でした!

 

【追記1】AMPアドセンスのレスポンシブについて

AMPアドセンスは幅・高さを指定するのでレスポンシブは不可能です
が、擬似的に対応してらっしゃる方がいたので、AMPアドセンスをレスポンシブにしたい方は↓のサイト様を参考にしてください。

[blc url="http://blog.side-well.com/entry/ampad"]

 

【追記2】AMPアドセンスの表示には専用スクリプトの読み込みが必須になる可能性がある

AMPページへの広告設置に今後は専用スクリプトを書いておく必要が出てくるそうです

現在は警告が出るだけで実害がないみたいなので、このページではあえて紹介しません
今後AMPプラグインのアップデートで修正される可能性が高いので、いまスグ修正する必要はないかな?とぼくは思ってます!

それでも気になる方は修正方法を書いてあるページを見つけたので↓のサイト様を参考にしてください。

[blc url="https://www.suzukikenichi.com/blog/script-for-amp-ad-is-required/"]

この記事をシェアする!

おすすめ記事

1

こんちゃす、たけ氏でっす! 『メジャーな漫画はもう読んだ、次はちょっとマイナー漫画だ!』という方におすすめの、超面白い漫画を紹介します! マイナーの基準が難しいですけど メジャーでない なんか読んでる ...

2

こんちゃす、たけ氏でっす!   何度も繰り返して読んだり、本棚から引っ張り出して読み返しちゃう漫画ってありますよね! 今回はぼくが何度も読んだ漫画を紹介してみますっ ルールは 2回以上読み返 ...

3

こんちゃす、たけ氏でっす! 知り合いに必ず1人はいる『たけし』 かく言うぼくもたけしです そんなぼくがある日『アニメに出てくるたけしってどれだけ居るんだろう』と思い立ったのが地獄の始まり。まさかこんな ...

-Wordpressカスタマイズ

Copyright© 人生あと30cm! , 2024 AllRights Reserved Powered by AFFINGER4.