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

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

たまに毒吐くちゃん

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

WordPressブログをAMPに対応させ広告、関連記事、SNSシェアボタンを表示する方法(アナリティクスにも対応)

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

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

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

以下でその方法と、エラーが出た場合の対処法、また、ちょっとしたカスタマイズ方法、

  • 広告(アドセンスの表示・非表示の切り替えが可)
  • SNSシェアボタン
  • 関連記事
  • 人気記事

の表示など……を、備忘録がてらご紹介いたします。

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

sponsored link

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ページをご覧になることができます。しかしパソコンからだと後述するAMP用の広告は表示されない(スマホ用の広告のため)のでご注意ください。

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点です。

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

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

ブログの広告といえばアドセンスをお使いの方が多いかと思います。アドセンスをAMP対応にすることは可能なのですが、このブログにはアドセンスが表示されたらマズいページがチラホラある……。

という訳で、カスタムフィールドを使って、アドセンスの表示・非表示を切り替えることにしました。アドセンスを表示しない記事には代替広告が表示されるようにしています。
代替広告には、AMPに対応した広告があり、アドセンスよりも規約がゆるい「nend」や「medi8」がおすすめです。

SNSシェアボタンに関しては「amp-social-share」を参考にしてAMP用のボタンを作成しました。

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

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

AMP for WordPress

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

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

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

下準備

広告

カスタムフィールドを作成

カスタムフィールドの使い方 – WordPress Codex 日本語版

is_no_adsense」というカスタムフィールドを作成し、アドセンスを表示させたくない記事の場合は値に「on」と記入します(表示させたい記事は何もしなくてOK)。

テーマファイルによってはアドセンスの表示・非表示をボタンのチェックにより切り替えることができます。
その場合、アドセンスの表示・非表示を切り替えるカスタムフィールドが既に作成されている可能性があります。
そのカスタムフィールドの名称が「is_no_adsense」でない場合は、下のコードに出てくる「is_no_adsense」をそのカスタムフィールドの名称に変更してください。

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

AMP 広告ユニットを作成する – AdSense ヘルプ

上記のページにAMP用のアドセンス広告を作成する手順が書いてあります。私は、

  • 記事下用
  • ヘッダー用
  • フッター用

の3つを作成しました(いずれもレスポンシブ)。

代替広告を作成

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

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

の3つを作成しました。

SNSシェアボタン

FacebookのアプリID

FacebookのアプリIDこちらで作成しておいてください。

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

LINE、はてなブックマークのシェアボタンのアイコンをダウンロードし、WordPressのメディアライブラリにアップロードしておいてください。アイコンは下記からダウンロードできます。

Google アナリティクス

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

人気記事

記事下に人気記事を表示させたい場合は、プラグイン「WordPress Popular Posts」をインストールして有効化しておいてください。

ファイルの内容

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

single.php

  • 記事下に広告関連記事人気記事アナリティクスのコード
  • 記事上、記事下にSNSのシェアボタン

を表示させて(アナリティクスのコードはただ単に貼り付けて)います。

広告について

代替広告

80行目

<!-- Ad -->

から、

84行目

<!--Ad end -->

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

アドセンス

95行目

data-ad-client=""

と、

96行目

data-ad-slot=""

に、アドセンスのコードの値をコピペしてください。

カスタムフィールド

カスタムフィールドの名称が「is_no_adsense」でない場合は、

78行目

is_no_adsense

を変更してください。

AMPページ記事下の広告の表示

AMP記事下

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

SNSシェアボタン

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

53行目と115行目の

amp-img src=""

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

FacebookのアプリID

59行目と121行目の

data-param-app_id=""

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

LINEのアイコン

62行目と124行目の

amp-img src=""

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

AMPページ記事下のSNSシェアボタンの表示

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

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

関連記事について

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

参考ページ WordPress Codex

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

人気記事について

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

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

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

Google アナリティクスについて

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

header-bar.php

代替広告

23行目

<!-- Ad -->

から

27行目

<!--Ad end -->

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

アドセンス

37行目

data-ad-client=""

と、

38行目

data-ad-slot=""

に、アドセンスのコードの値をコピペしてください。

カスタムフィールド

カスタムフィールドの名称が「is_no_adsense」でない場合は、

19行目、21行目

is_no_adsense

を変更してください。

その他備考
  • AMPページではカスタムフィールドが使えないと思っていたのですが、こちらの質問ページの回答を参考に18、19行目のコードを書いてみた所、カスタムフィールドが利用できるようになりました。
  • 元のソースではトップページへのリンクが貼ってあったのですが、それは消して、「モバイル用の簡易ページなので表示が乱れる場合があります」という注意書きと、その記事の正式なページへのリンクを追加しました。

footer.php

代替広告

26行目

<!-- Ad -->

から

30行目

<!--Ad end -->

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

アドセンス

41行目

data-ad-client=""

と、

42行目

data-ad-slot=""

に、アドセンスのコードの値をコピペしてください。

カスタムフィールド

カスタムフィールドの名称が「is_no_adsense」でない場合は、

24行目

is_no_adsense

を変更してください。

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

style.php

383行目の「以下足した」以降に、シェアボタンまわりの余白人気記事の見出しのスタイルを追加しています。

その他、

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

などの変更も行っています。

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

meta-author.php

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

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

meta-time.php

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

あとがき

Web関連の情報は結構流行り廃りが激しいイメージがあるので、もしかしたら数年後には「AMP、そんなのあったね~!」などということになっている可能性がなきにしもあらず……。
しかし今の所GoogleがAMPを推進するとのことですし、WordPressの場合は対応するだけならプラグインで手軽にできるので(いじり出すとちょっと面倒ですが……)、やっておいても損はないかと思います。

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

ちなみに、今の所AMPページへのアクセスはそれほど多くありません。が、ちょこっとずつ増えてきてはいるような……。しかしそれはAMPページへのアクセス自体が増えたというより、単に記事数が増加したからかも……?

しばらく様子を見て、何か変わったことがあったら、この記事を更新するか、もしくは新記事を書くかしてご報告しようと思います。

スポンサーリンク

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

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

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

TSHIRTS TRINITY

マスコットキャラ

たまに毒吐くちゃん

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

  

同じカテゴリーの記事

WordPressテーマ「マテリアル」のカスタマイズ方法【更新日を表示、スマホのメニューを最初から開いておく等】

WordPressテーマ「マテリアル」のカスタマイズ方法【更新日を表示、スマホのメニューを最初から開いておく等】

無料ワードプレステーマ「マテリアル」のカスタマイズ方法を載せています(更新日を表示、スマホのグローバルメニューを最初から開いておく、カテゴリーとタグを記事下に表示、サイト説明文にリンクを貼る、カテゴリーごとの記事の表示をフッターに移動する)。
Read More
【WordPress】「悪意あるログイン試行」への対策【.htaccess】

【WordPress】「悪意あるログイン試行」への対策【.htaccess】

WordPressの「悪意あるログイン試行」への数が急増したので、.htaccessを使い、ログインページなど特定のファイルへの海外からのアクセスを制限することにしました。その方法や問題点を書いています。
Read More
WordPressブログをAMPに対応させ広告、関連記事、SNSシェアボタンを表示する方法(アナリティクスにも対応)

WordPressブログをAMPに対応させ広告、関連記事、SNSシェアボタンを表示する方法(アナリティクスにも対応)

WordPressブログをプラグインでAMPに対応させ(有効化するだけなので簡単)、そのページに広告(アドセンスの表示・非表示の切り替えが可)、SNSシェアボタン、関連記事などを表示する方法と、AMP用のアナリティクスのコードの貼り方、AMPでエラーが出た時の対処法について書いています。
Read More
【WordPress】Jetpack「関連投稿」の表示場所、記事数を変更する方法

【WordPress】Jetpack「関連投稿」の表示場所、記事数を変更する方法

ワードプレスのプラグイン「Jetpack」の機能「関連投稿」を任意の場所に表示+表示する記事数を変更するカスタマイズを載せています。
Read More
WordPressの無料テーマ おすすめ6個【日本語、レスポンシブ、SEOに強い】

WordPressの無料テーマ おすすめ6個【日本語、レスポンシブ、SEOに強い】

ワードプレスの無料テーマ(テンプレート)で、おすすめの「個性的なテーマ」「初心者向けのテーマ」「カスタマイズに向いているテーマ」を2つずつ紹介しています。いずれも日本語、レスポンシブデザイン対応、SEOに強いといわれているテーマです。
Read More
2017年使用中のJetpackの機能【WordPressプラグイン】

2017年使用中のJetpackの機能【WordPressプラグイン】

WordPressの公式プラグイン詰め合わせ「Jetpack」の内で使用中の機能(Markdown、関連投稿、サイト統計情報、コンタクトフォーム、購読、プロテクト、パブリサイズ、サイトマップ、拡張配信、シングルサインオン)を紹介しています。
Read More
【WordPress】SNS Count Cacheが有効化できない+Twitterのシェア数がカウントされない時にしたこと

【WordPress】SNS Count Cacheが有効化できない+Twitterのシェア数がカウントされない時にしたこと

WordPressのプラグイン「SNS Count Cache」が有効化できなかったのですが、PHPのバージョンを変更した所、無事有効化することができました。Twtterのシェア数の表示もできるようになりました。
Read More
【WordPress】Jetpack Markdownを使う時の注意点2つ

【WordPress】Jetpack Markdownを使う時の注意点2つ

Jetpack Markdown(ジェットパック マークダウン)を使おうとした所、困ったことが2つ起きました(見出しが出ない+段落が効かない)。その解決方法を書いています。
Read More
【2017年】おすすめのWordPressプラグイン【無料、定番多め24個】

【2017年】おすすめのWordPressプラグイン【無料、定番多め24個】

実際に使ってみて、記事が書きやすくなったり、管理がしやすくなったWordPress(ワードプレス)のプラグインを紹介しています。定番のものが多めです(スパム対策やバックアップ、リンク切れチェック、公式プラグイン「Jetpack」など)。
Read More