うらなか書房のあやしいグッズあり〼

うらなか書房と申します。AmazonYahooClubTTTrinitySUZURIなどで、ちょっとあやしいTシャツやグッズの販売をしています。このブログでは、おすすめのホラー映画や漫画、本、その他少し物騒なものや奇妙なものの紹介をしています(たまにお役立ち情報や雑記も書きます)。

たまに毒吐くちゃん

カテゴリー「WordPress」の人気記事TOP3

WordPressブログをAMPに対応させ広告を表示する方法(アナリティクスにも対応)

time 更新日:  time 公開日:2016/11/21

ブログを書いている方は、近頃「AMP」という言葉をよく目にしませんでしょうか。
私も少し前にこの「AMP」という言葉を知ったのですが、その時は「なんだかよく分からん……」と思い放っておくことにしました。

しかし最近になって、Googleモバイル検索の上部にAMPページがカルーセル表示されるようになったということを知り、これはそろそろ対策した方がいいのだろうか……と調べてやってみた所、WordPressの場合、思いのほか簡単にAMPに対応することができました。

以下でその方法と、エラーが出た場合の対処法、また、ちょっとしたカスタマイズ方法を備忘録がてらご紹介いたします。

スポンサーリンク

AMPとは

AMP

Accelerated Mobile Pagesの略。表示速度を重視するため、ページを作成する際のコードに制約が設けられています。その制約とは主に、

  • JavaScriptが使えない
  • 複雑なCSSが使えない

上の2点のようです。

なんだかこう書くとものすごく手間がかかりそうですが、WordPressの場合はプラグインでAMPに対応することができます。

プラグイン「AMP」で簡単に対応できる

AMP

このプラグインを使えば、WordPressで構築したブログを簡単にAMP対応にすることができます。

  1. ダッシュボードの「プラグイン」⇒「新規追加」をクリック
  2. AMP」を検索
  3. 「作者: Automattic」の「AMP」を「今すぐインストール
  4. 有効化する

なんとこれだけでもうAMP対応のページが作成されています。
作者のAutomatticはWordPress.comを運営している会社なので、不具合もあまりないのではないかと思います(初期の頃はエラーが結構あったという噂もありますが……現在は改善されているようです)。

注意点

固定ページやカテゴリーのページは作成されず、投稿ページのAMPページだけが作成されます。

AMPページの見た目

AMPヘッダー

見た目はこんな感じです。非常にこざっぱりとしています。

AMPページのURL

投稿ページの末尾に「amp/」を付け足したものがAMPページのURLになります。

http://uranaka-shobou.com/wordpress-themes/」というURLのページの場合、「http://uranaka-shobou.com/wordpress-themes/amp/」がAMPページになります。

上記にはリンクが貼ってありまして、クリックすると実際のAMPページをご覧になることができます。しかしパソコンからだと後述するnendの広告は表示されない(スマホ用の広告のため)のでご注意ください。

AMPにエラーがないかどうか調べる

AMPが正しく設定できているかチェックする3つの方法

上記に3つ方法が載っています。私のおすすめは「Google Search Console」を使ってエラーを調べる方法です。

サーチコンソールで、調べたいブログのダッシュボードに移動し、「検索での見え方」⇒「Accelerated Mobile Pages」をクリックすると、

  • インデックスに登録されたAMPページ数
  • エラー(警告を除く)のあるAMPページ数

が表示されます。

グーグルサーチコンソールAccelerated Mobile Pages

エラーは0……と思ったら、1個あった……!

つい最近まで0だったのですが、この記事を書く2日前にインデックスされたページが1つエラーになったようです。
ついでにエラーの直し方も書いておきます。

Google Search ConsoleでAMPのエラーが出た時の直し方

グーグルサーチコンソールAMPのエラーの問題

「1エラー」と表示された下の方に「問題」が書いてあります。
今回は「HTMLタグの禁止された用法、無効な用法」が問題とのことです。
右端の「>>」をクリックすると、エラーが出ているページのURLと、またもや「>>」が出てくるので、もう一度それをクリックします。すると下記のような画面が現れます。

グーグルサーチコンソールAMPのエラーの詳細
詳細:属性「nowrap」は「td」タグで使用できません。

現在では推奨されていない「nowrap」というタグが古いページに残っていたようです。
という訳でこのページの「nowrap」を削除して(普通の投稿ページを編集すればOK)、

グーグルサーチコンソールAMPの「ページをテスト」

先ほどの詳細画面に「ページをテスト」というボタンがあるので押します。
問題がきちんと改善されていれば、「有効なAMPページです」という文章が表示されます。
その文章の下に「GOOGLEに送信」というリンクがあるので、それを押しておくといいでしょう。

グーグルサーチコンソール Accelerated Mobile Pages 0エラー

エラーを修正して「GOOGLEに送信」した所、翌日にはエラーが0になっていました。

……という訳でHTMLタグのエラーが1つありましたが、プラグイン自体に不具合はなさそうです。

スポンサーリンク




AMPページの問題点

AMPページの主な問題点は以下の2点です。

  • 通常の広告が表示されない
  • グーグルアナリティクスで計測されない

上でも書きましたが、AMPページは表示速度を重視しているため、JavaScriptや複雑なCSSが無効になります。
そのため、JavaScriptで動いている通常の広告は非表示になります。

ブログの広告といえばアドセンスをお使いの方が多いかと思います。AMPページ用のアドセンスもあるにはあるのですが、細かい設定(ページごとにアドセンスを非表示にするなど)をするのがちょっと難しいようです。
そしてこのブログには、アドセンスが表示されたらマズいページがチラホラある……。

という訳で、AMPページにはアドセンスの代わりにnendの広告を載せることにしました。

nend


スマートフォン広告『nend』

nendはアドセンスほど規約が厳しくないという噂で、しかもAMP対応の広告を作成することができます。

注意
このブログでは、アドセンスが貼れないページが多々あるのでnendを貼っていますが、全ページにアドセンスを貼ることができるのであればアドセンスを貼ったほうがいいと思います。その場合は、以下のnendのコードを貼る部分にアドセンスのAMP用のコードを貼りつけてください。

また、そのままでは「グーグルアナリティクス」にも計測されないので、AMP用のコードを追加します。

プラグイン「AMP」のカスタマイズ方法

AMP for WordPress

上記ページの「Completely Override CSS」を参考にさせて頂きました。

  1. 使用しているWordPressテーマ(子テーマなら子テーマ)のフォルダの中に「amp」というフォルダを作成する
  2. 「amp」フォルダに下記の内容のファイルを作成する
  3. 「amp」フォルダをFTPソフトでアップロードする(1と同じ場所に)

この方法だとプラグインのファイルを直接いじらなくて済みますし、何かトラブルがあったとしても、(子)テーマ内の「amp」フォルダ内のファイルを削除すれば、元のAMPページが表示されるので安心です。

下準備

nendで広告を作成

nendで広告を作成しておいてください。私は、

  • 記事下用(300×250)
  • ヘッダー用(300×250)
  • フッター用(300×250)

の3つを作成しました。

広告を作成すると、「広告コードの取得」というページに遷移しますので、そのページの「amp-adタグ」を以下で使用します。

「Google アナリティクス」のトラッキングIDを調べる

「Google アナリティクス」のトラッキングIDを調べておいてください(「UA-000000-01」のような番号。詳しくはこちら)。

ファイルの内容

使用しているWordPressテーマ(子テーマなら子テーマ)フォルダの「amp」フォルダ内に「single.php」や「header-bar.php」という名前のファイルを作成し、その中にそれぞれの内容をコピペしてください。

single.php

記事下にnendの広告アナリティクスのコードを入れています。

nendについて

上で取得した広告のコードを、

42行目

<!-- nend -->

から、

46行目

<!--nend end -->

の間にコピペしてください。

AMP記事下
AMPページ記事下のnendの表示

このように表示されます。

アナリティクスについて

68行目の「UA-XXXXX-Y」という部分をご自身のトラッキングIDに書き換えてください。
アナリティクスに関しては、「AMPページにアナリティクスを追加する(Google Developers)」を参考にしました。

追記

後日上記にSNSシェアボタン関連記事を追加しました。詳しくは「SNSシェアボタンと関連記事を追加しました」をご覧ください。

header-bar.php

ヘッダーにnendの広告を貼る場合、

18行目

<!-- nend -->

から

22行目

<!--nend end -->

の間に広告コードをコピペしてください。

また、元のソースではトップページへのリンクが貼ってあったのですが、「モバイル用の簡易ページなので表示が乱れる場合があります」という注意書きと、その記事の正式なページへのリンクを追加しています。

footer.php

フッターにnendの広告を貼る場合、

23行目

<!-- nend -->

から

27行目

<!--nend end -->

の間に広告コードをコピペしてください。

またヘッダー同様、その記事の正式なページへのリンクを追加しています。

以下はお好みでご使用ください

style.php

383行目以降の「以下足した」という部分で、

  • ヘッダー部分のリンク色を赤に
  • 見出しの上のスペースが狭かったので広げる

という変更を行っています。

meta-author.php

記事タイトル下の記事作成者の名前に、トップページへのリンクを貼る変更をしました。

AMPヘッダー
「うらなか書房」の部分です。

meta-time.php

元のソースでは、記事作成者の横に「○○日前」と、記事が何日前に公開されたかが表示されていました。
これを公開日、そしてその後更新した場合は、更新日を表示するように変更しました。


恐れ入りますが、カスタマイズは自己責任でお願い致します。

あとがき

AMPでも頑張ればメニューバーやSNSシェアボタンなどを表示させることができるようなのですが、下手にいじってエラーが出たら困るので最低限のカスタマイズに留めました。
Web関連の情報は結構流行り廃りが激しいイメージがあるので、もしかしたら数年後には「AMP、そんなのあったね~!」などということになっている可能性もありそうですし……。
しかしGoogleがAMPを推進するとのことですし、WorePressの場合はプラグインで手軽に対応できるので、やっておいても損はないかと思います。

ブログを作成している側としては、AMPでなく正式なブログ(という言い方が正しいのか分かりませんが)を見てほしいのが本音ですが……。スマホのJavaScriptなどの表示を早くすることはできないのでしょうかね……。

ちなみに、今の所AMPページへのアクセスはそれほど多くありません。しばらく様子を見て、何か変わったことがあったら、この記事を更新するか、もしくは新記事を書くかしてご報告しようと思います。

追記:SNSシェアボタンと関連記事、カテゴリーの人気記事を追加しました

ちょこっとですがAMPページへのアクセスが増えてきました……が、直帰率がものすごく高い……!
正式なページへのリンクを貼っておいたのですが、その効果はあまりなさそうです……。

という訳で、SNSシェアボタン関連記事カテゴリーの人気記事を追加してみることにしました。

single.php

AMPページのSNSシェアボタンと人気記事

記事タイトルの下にSNSシェアボタン、記事下にSNSシェアボタン関連記事カテゴリーの人気記事を表示させるsingle.phpです。

SNSシェアボタンに関してはamp-social-shareを参考にしました。

関連記事は同じカテゴリーの記事をランダムに5件表示しています。
参考ページ:WordPress Codex

カテゴリーの人気記事の表示には、プラグイン「WordPress Popular Posts」を使用しています。

はてなブックマークのアイコン

54行目と99行目の

amp-img src=""

の中にはてなブックマークのアイコンのURLを入力してください。

アイコンはこちらからダウンロードできます。

FacebookのアプリID

60行目と105行目の

data-param-app_id=""

の「””」の中にFacebookのアプリIDを入力してください。

FacebookのアプリIDはこちらで作成します。

LINEのアイコン

63行目と108行目の

amp-img src=""

の中にLINEのアイコンのURLを入力してください。

アイコンはこちらからダウンロードできます(上記コードでは80×80pxのアイコンを使用しています)。

nendについて

81~85行目の間にnendのコードを追加してください。

アナリティクスについて

197行目の「UA-XXXXX-Y」をご自身のトラッキングIDに変更してください。

関連記事について

134行目の「5」という数字を変更すると表示数を変えることができます。

人気記事について

表示されている記事のカテゴリーの人気記事TOP5を記事下に表示します。

WordPress Popular Posts」をインストールして有効化してください。

165行目の数字を変更することによりで表示数を変更できます。その場合は、168行目の数字もあわせて変更してください。

style.php

シェアボタンまわりの余白や人気記事の見出しのスタイルを追加したCSSです。

スポンサーリンク


follow us in feedly  友だち追加数
 

 

ブログの更新をメールでお知らせします!

たまに毒吐くちゃん

この記事をシェアする

たまに毒吐くちゃん

関連する記事

出展記録

AmazonでTシャツや電子書籍(短編小説集)を販売しています

Amazon詳細ページへ Amazon詳細ページへ

Tshirt TrinityでTシャツやバッグを販売しています

TSHIRTS TRINITY

ClubTでTシャツやバッグを販売しています

プロフィール

うらなか書房

うらなか書房

あやしい絵を描いて、それをTシャツグッズにしています。


ホラー映画カルト映画、その他少し物騒なもの奇妙なものを見たり読んだりすることが好きです。

ちょっと変人かもしれませんが、危ない感じではなくただのヘッポコなので、お気軽にSNSでのフォローコメントをお願いします!

詳細なプロフィール

ブログをメールで購読

メールアドレスを記入して「購読」ボタンをクリックすると、このブログの更新情報をメールで受信できます。

マスコットキャラ

たまに毒吐くちゃん

当ブログのマスコットキャラ「たまに毒吐くちゃん」。所々に出没します。
TSHIRTS TRINITYClubTSUZURIでTシャツ・グッズ販売中です!

うらなか書房のおすすめ映画

うらなか書房のおすすめ映画
うらなか書房がおすすめのホラー映画カルト映画B級映画などをAmazonで紹介しています。


スポンサーリンク

Twitter