WordPressブログをAMP対応するために行ったあれこれまとめ

AMP対応が一段落ついたのでまとめてみたいと思います。

AMPプラグインがあるので楽勝!とか思ってたんですが、
全然楽勝じゃなかったです。

EIKING
ほぼ自己満の世界では

AMPプラグインで基本的にAMP対応の記事は自動生成されるので、
とりあえずデザインとか置いといてOKっていうのであれば簡単です。

プラグインインストールするだけなんで。

しかし、AdsenseやAnalyticsなどの対応をしようと思ったら、
若干のテコ入れが必要なんですねえ。

 

WordPressプラグイン「AMP」インストール

まずはこちらをインストール。

そしてアクティベート。

 

Google AdsenseのAMP対応

AMPプラグインsingle.phpの編集

まずはAdsenseの対応から。

普通のAdsenseコードをはっつけていると、
AMPテストサイトではエラーになります。

なので、こちらの公式ページをもとにAMPプラグインを編集します。

amp/templates/single.phpの<head>内に、

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

を追加します。

これでAMPエラーはとりあえず出なくはなるはずです。

ですがAdsense広告自体は表示されません。

そこで、

<amp-ad
layout="fixed-height"
height=100
type="adsense"
data-ad-client="ca-pub-000000000000000"
data-ad-slot="000000000">
</amp-ad>

を現在貼り付けてる広告コードの真下に貼り付けます。

レクタングルがよければ、

layout="fixed-height"
height=100

のところは、

layout="responsive"
width=300
height=250

にしましょう。

しかし、スクロールなしで見える部分でこのサイズのレクタングルは、Adsense規約違反になるのでご注意。
data-ad-client="ca-pub-000000000000000"
data-ad-slot="000000000"

には、レスポンシブ広告ユニットを作成したものから取得してください。

  • サイト運営者 ID(data-ad-client)(例: ca-pub-1234567891234567)
  • 広告ユニット ID(data-ad-slot)(例: 1234567890)

詳しくは、

の公式ページにて。

Adsenseの対応はこれで完了。のはず。

 

WordPressビジュアルエディタに注意

記事内広告の場合、
この<amp-ad></amp-ad>タグがビジュアルモードでは削除されてしまいます。。。

なのでテキストモードで直接入力してビジュアルモードに変更せずに保存しないと、
サイトには反映されません。

なのでうちのAMPページはめんどくさいので広告非表示になってますw

なにかしら対策を打ちたいところ。。

 

Google AnalyticsのAMP対応

AMPプラグインsingle.phpの編集

またこいつをいじっていきます。

こちらも公式参照してください。

実はAMPページはこの対応しないと、アクセス計測されませんw

なので必ずやるように。

同じくamp/templates/single.phpの<head>内に、

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

を追加。

そして<body class=”<?php echo esc_attr( $this->get( ‘body_class’ ) ); ?>”>直後に、

<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y"  
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>

を追加します。

"account": "UA-XXXXX-Y"

もちろんここには、ご自身のトラッキングコードを入力してください。

これでAnalyticsのAMP対応は完了。のはず。

公式ではプロパティ分けた方がいいと書いてるので、
分けたほうがいいかもしれません。

EIKING
ちなみにワイは分けてないで

 

リアルタイムレポートで計測チェック

原始的ですが、
自分でIP除外してない回線から、AMPページにアクセスして、
Analyticsのリアルタイムレポートをみてみよう。

自分ぽいのが出現したら成功ですね。

リアルタイム閲覧者が多すぎてわかんないという贅沢な悩みをお持ちのかたは、
なんとかしてください。知らねえよ。

 

AMPプラグインのCSSを補填

テーマファイルのfunction.phpに追記して、足りないCSSを補填していきます。

今回気になったのは、

  • TOC+プラグイン
  • table

のデザインです。

これらが枠も表示されないし、widthも関係なしで広がりまくったりしてたので、
このあたりだけ修正しました。

add_action( 'amp_post_template_css', 'xyz_amp_additional_css_styles' );
function xyz_amp_additional_css_styles( $amp_template ) {
?>
#toc_container {
 background:#f9f9f9;
 border:1px solid #aaa;
 padding:10px 20px;
 margin-bottom:1em;
 width:auto;
 display:table;
 font-size:95%;
}

.amp-wp-article table {
width: 100%;
font-size: 0.92em;
border: 1px solid #efefef;
margin-bottom: 1.5em;
border-spacing: 0;
}

.amp-wp-article table caption {
margin: 0 0 7px;
font-size: 0.75em;
color: #9fa6b4;
text-transform: uppercase;
letter-spacing: 1px; }

.amp-wp-article tr {
border-bottom: 1px solid #efefef;
}

.amp-wp-article td {
padding: .8em;
border: 1px solid #cfcfcf;
background: #fff;
background: rgba(255, 255, 255, 0.6);}
.amp-wp-article td input{
margin:3px 0;
}

.amp-wp-article th {
background-color: #eee;
background-color: rgba(0,0,0,0.1);
border: 1px solid #cfcfcf;
padding: .8em;
}

<?php
}

良き出来栄え。

しかし、子テーマで使ってない限り、function.phpはアップデートされたら上書きされると思うので、注意が必要です。

 

AMP対応疲れた zzz…

以上が僕がAMP対応するためにやったことでした。

追加で、OPENCAGEのテーマ独自のCSS対応もやってます。

なんかいろいろイジると、
ふとしたときにSearch consoleでえらいことになってたりするんですよね。

Search console > 検索の見え方 > Accelerated Mobile Pages

なんやこれ、やべーってなって修正して、エラーが下がっていってる図です。

最終的に下記の様なAMPページに落ち着きました。

これはスマホで見てもらったほうがわかりやすいかもですね。

ということでようやく納得行くレベルのデザインにまで戻すことができました。
もとのデザイン見てないとわかんないと思うんですが、
だいぶ良くなりました。

とくにTableよく使う人はCSS追加は絶対やったほうがいいです。
くそほどダサいです。

EIKINGプロデュースのPRIMAでamazon販売を加速しよう

PRIMAは業界最多10カ国のamazonに対応したamazonデータ収集・価格改定システムです。ありとあらゆる商品データ、ライバル価格を収集でき、さらに綿密なSKU別のルールで自動価格改定も行えます。現在ユーザ数は500+。

コメントを残す

メールアドレスが公開されることはありません。

ABOUTこの記事をかいた人

1985年生まれ、愛媛県出身東京都在住。 26歳で起業して輸出入貿易事業を開始。 現在は貿易・商品開発・業務支援システム開発・コンサルティング等を行う会社を2社経営。 ”遊ぶために働く、働くために遊ぶ”の相乗効果がパフォーマンスの高い人生を実現できる方法と信じ、日々死ぬほど働き、死ぬほど遊んでいる。 趣味はフェス・ライブ観戦、旅行。 このブログでは自身が経験したビジネス関連と国内外での遊びの情報について発信中。