【WordPress】プラグイン活用で超簡単!AMP用アドセンスの配置やCSSを調整する方法

更新日:

前回、プラグイン「AMP」の導入でAMPに対応したテックブログ「iyusuke」ですが、プラグインを有効化しただけでは完全対応とは言えず、AMP用アドセンス広告の配置CSSの調整など、AMPに対応するための変更点がまだまだ残ってる状態でした。

AMPページへのアドセンス広告配置hタグ・フォントのCSSの調整も完了したので、今回はそのへんをシェア!

まずは、プラグイン「AMP」を有効化しておこう

まずはじめに、今回ご紹介する方法はプラグイン「AMP for WordPress」を導入していることが前提となっており、プラグイン「AMP」をまだインストールしてない!という人はインストールしておこう。

AMPページをAMP HTMLで最初から作成しようとすると超大変ですが、ワードプレスではプラグインを活用することで超簡単に対応できる。できるだけ分かりやすく噛み砕いてご紹介するので、ぜひ、このページを参考にしながらAMPに完全対応してみるべし!

ちなみに、この記事のAMPページももちろんある。

AMP用のアドセンスを記事下に配置する方法

すでにプラグイン「AMP」を有効化し、Googleアナリティクスの設定も完了したと思うので、ブロガーが真っ先に対応すべきAMP用アドセンスの配置についてご紹介する。

AMPページには、アドセンスコードをそのまま使用することができないため、Googleが案内しているレスポンシブAMP広告ユニットを作成します。

作成するといっても超簡単なので、まずは、Googleアドセンスに移動して広告コードをコピーしておきましょう!

AMP用のアドセンス広告を作成する

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- iyusuke-amp -->
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-1234567890"
data-ad-slot="123456789"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

コピーした広告コードの太字部分がレスポンシブAMP広告ユニットの作成で必要になるため、メモなんかにコピーしておくと〇。

ちなみに、data-ad-clientサイト運営者IDdata-ad-slot広告ユニットIDとなっている。

<amp-ad
width="100vw" height=320
type="adsense"
data-ad-client="〇〇"
data-ad-slot="〇〇"
data-auto-format="rspv"
data-full-width>
<div overflow></div>
</amp-ad>

上記がGoogleが案内しているレスポンシブAMP広告ユニットのコード。

data-ad-clientとdata-ad-slotの「太字の○○」に先ほどコピーした自分のサイト運営者ID広告ユニットIDを貼り付けよう。

これでAMP用のアドセンス広告ユニットは完成したので、後はプラグイン「AMP」single.phpに貼り付ければOKです。

プラグイン「AMP」のsingle.phpにAMP用アドセンスを貼り付ける

次は、先ほど作成したAMP用アドセンスコードをプラグイン「AMP」のsingle.phpに貼り付ける。

プラグインの編集は「ワードプレスの管理画面>プラグイン>プラグイン編集」から。

右上の「編集するプラグインを選択」から「AMP」を選択し、プラグインファイルの「templates>single.php」へ移動しよう。

single.phpのファイルへ移動したら下の方に記述されている</footer>と</article>の間にAMP用アドセンスコードを貼り付ける。

ファイルを更新」をクリックし、変更を保存したら、URLの末尾に「amp/」を追加して確認し、記事下に広告がちゃんと表示されていれば、AMP用アドセンスコードの配置は完了です!

※上記の方法では、プラグイン「AMP」のアップデートにより変更が上書きされてしまう。アップデートで消えてもすぐに復元できるよう、メモなどに作成したAMP用アドセンスコードのバックアップを取っておこう。

AMPページのCSSを調整する方法(非推薦)

最後に、AMP用ページのCSSを編集する方法をご紹介する。

※この方法では、プラグインのアップデートで変更が上書きされて消えてしまう。この記事の後半では、「functions.phpにAMP用CSSを追記する方法」をご紹介しているので、変更する際はそちらがおすすめです。

こちらも、プラグイン「AMP」のファイルを編集するので、「プラグイン>プラグイン編集」と移動し、右上に表示されている「編集するプラグインを選択」で「AMP」を選択しておこう。

AMPページのCSSはAMP HTMLのhead内<style amp-custom>タグを用いて記述する。

プラグイン「AMP」では、html-start.phpに<style amp-custom>タグが使われているので、ここにCSSを書いていけばOKです。

まずは、「templates>html-start.php」へ移動。

Ctrl+F」で「style amp-custom」をハイライトすればすぐに見つかるはず。自分のブログ・サイトに合わせてCSSを書いていきましょう!

<style amp-custom>
<?php $this->load_parts( array( 'style' ) ); ?>
<?php do_action( 'amp_post_template_css', $this ); ?>
h2{
font-size:20px;
border-left:8px solid #444444;
padding-left:10px;
margin-top:25px;
}
</style>

また、AMPページではCSSにいくつかの制約があるため、AMPの公式ページを参考にしてみるべし。

上記は例ですが、<style amp-custom>と</style>の間に自分のブログ・サイトに合わせてCSSを追記していけばOKです。

また、<head></head>タグの間に以下のコードを貼り付けるのも忘れずに。

<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>

ひと通り作業が済んで、AMPページにCSSが適用され、アドセンス広告が表示されていることを確認したら、GoogleのAMPテストで有効なAMPページかどうかチェックし、問題がなければAMP対応は完了です!

サーチコンソールの「AMP」ではエラーもチェックできる。修正点があれば優先して修正していこう。

【追記】AMP用CSSはfunctions.phpに書くのがおすすめ

先ほど紹介したプラグイン「AMP」のコードにCSSを追加する方法では、プラグインのアップデートで変更が上書きされ、せっかく書いたCSSが消えてしまう。

これがすごく面倒だったため、function.phpにAMP用CSSを追記する方法をご紹介する。※こちらの方が簡単でおすすめですが、functions.phpに触れるため要注意。

子テーマのfunctions.phpに直接変更を加えるため、あらかじめバックアップを取っておき、何かあった時に備えてFTPソフトの準備もしておこう。

まずは、ワードプレスのダッシュボードを開き、「テーマの編集>functions.php(テーマのための関数)」へ移動する。

移動したら、下記のコードをfunctions.phpを追記しよう。場所はどこでもいいですが、僕はfunctions.phpの最後の行に追加してます。

// AMP用CSS
add_action( 'amp_post_template_css', 'xyz_amp_my_additional_css_styles' );
function xyz_amp_my_additional_css_styles( $amp_template ) {
?>
/*ここにCSSを追記していく*/
<?php
}

コードをfunctions.phpに追記したら、「/*ここにcssを追記していく*/」のところに、hタグやフォント調整、デザイン用CSSなどを書いていこう。

例として、CSSを追記した後は下記のようになる。

// AMP用CSS
add_action( 'amp_post_template_css', 'xyz_amp_my_additional_css_styles' );
function xyz_amp_my_additional_css_styles( $amp_template ) {
?>
/*h2*/
h2{
font-size:20px;
border-left:8px solid #444444;
padding-left:10px;
margin-top:25px;
}
<?php
}

上記のような感じで自分の好きなようにAMP用のCSSを書いていけばOKです。※僕は、一通りCSSを書き終えたらCSS Minifierで圧縮してる。

また、AMP用ページでは利用できないタグ専用のタグがいくつかあるため、AMP公式ページのコンポーネント/タグを確認しておくといいかもしれない。

テンプレートのfunctions.phpにAMP用CSSを書いておけば、プラグインのアップデートで消えてしまうこともないため、AMP用ページをCSSで整えたい!という時はこちらの方法がおすすめです。※サーチコンソールのAMPツールで検証するのも忘れずに。

プラグインを活用してサクッとAMPに対応しよう

プラグイン「AMP」を有効化しただけではAMP完全対応とは言えず、アドセンス広告が表示されないデザインがおかしいシンプルすぎるなど、そのまま放っておくとブロガー・サイト運営者には大打撃。

AMP化しても、アドセンス広告の表示やデザインの変更はすぐに対応できるので、さっそくAMP化にチャレンジしてみよう!

おそらく、将来的にはAMP対応ページが検索結果で優遇される日も来るはず。来たる日に備え、万全の準備を整えておくべし!

-その他

Copyright© iyusuke , 2018 All Rights Reserved Powered by STINGER.