WordPressのAMP表示カスタマイズ(AMP for WordPress)




AMPとは

AMPとは、AMP(Accelerated Mobile Pages)の略であり、Googleが推進しているモバイルページを高速に表示させるための手法によって作成されているコンテンツ。

近頃、Googleはページランクの評価基準として、ホームページの表示速度を指標の一つとして導入しており、その親分のGoogleがAMPという規格を推進しているという訳だ。

ページのロードが早いに越したことはないので、AMPを導入することにした。

WordPressにAMP導入

WordPressのコンテンツをAMP化するやり方はいくつかあるが、大きく分けて以下の2つの方法がある。

(1)AMPプラグインを導入する(Google公式プラグイン)

(2)WordPressテーマ付属のAMP表示設定を利用する(Simplicity2等)

どちらの方法でも良いのだが、メリット・デメリットがある。

AMP導入方法 テーマの引き継ぎ GoogleAnalytics対応 Google Adsense対応 Amazonアソシエイト対応
(1)AMPプラグイン導入
(テーマは引き継がれず、1からカスタマイズが必要)

(自分で設定すれば対応可能)

(自分で設定すれば対応可能)

(自分で設定すれば対応可能)
(2)WordPressテーマ付属のAMP表示設定を利用
(自分で設定すれば対応可能)

(自分で設定すれば対応可能)

(表示不可)

(1)AMPプラグインは、完成度が高く、不具合も出にくいが、テーマを引き継がないため、1からカスタマイズが必要となり、面倒である。

ただ、仕方がないので、多少の面倒さには目を瞑り、(1)AMPプラグインを導入することにした。

AMPプラグインのカスタマイズ(準備編)

AMPプラグインの持つテンプレートファイル群をコピーする

所有者がwww-dataの場合は、この所有者に変更。

コピーされたファイル群はこんな感じのはず。

admin
featured-image.php
footer.php
header-bar.php
header.php
html-end.php
html-start.php
meta-author.php
meta-comments-link.php
meta-taxonomy.php
meta-time.php
page.php
single.php
style.php

カスタムテンプレート有効化(必須)

上記でコピーしたカスタムテンプレートを有効化する。

使用しているテーマ(私の場合は、Simplicity2)のディレクトリ配下にある「function.php」の一番最後に以下を追記する

Google Analytics設定

AMPのプラグイン設定項目の「Analytics」に以下のように追記。

ID:

JSON Configuration:

投稿者名を削除(meta-author.php)

「meta-author.php」の以下を削除する。

サイトアイコンの表示を削除

「header-bar.php」の以下の記述を削除

投稿日時→更新日時に表示変更(meta-time.php)

「meta-time.php」 の ‘post_publish_timestamp’ を ‘post_modified_timestamp’ に変更。

※2箇所変更した

パンくずリストの設置

「single.php」の<header></header>の中に、パンくずリストを設置する。

以下のコードを追加する。

<h1><h2><h3>…タグの表示スタイル変更(style.php)

「style.php」の見出しタグとして、以下を追加。

表のCSSを追加する

AMP for WordPressは、表の罫線が非表示なってしまう。

この対策として、スタイルシートに表関連の表記を追加する。

Powered by WordPress を削除(footer.php)

「footer.php」のPowered by WordPressに関連する、以下の記述を削除

Google Adsense関連

●関連コンテンツ表示設定

■「html-start.php」の<head>内

以下のコードを「single.php」の配置したい場所に追記する。

●AMP 自動広告 – テキスト広告とディスプレイ広告

以下、2つのコードを挿入する。

■「html-start.php」の<head>内

■「html-start.php」の<body>内

「logo」フィールドの値は必須です。 の修正

Googleの提供する「AMPテスト」を実施すると、「構造化データの項目が不足しているか無効です」というエラーが出る。

「構造化データをテスト」を実施すると、「logo」フィールドの値は必須です。というエラーが発生している。

まず、logoの画像を準備する。ここで気をつけたいのは、

AMPの仕様によると、publisherのlogoは、

Logos should be no wider than 600px, and no taller than 60px.

なので、600px以下の幅で、60px以下の高さじゃないとだめ。ということ。

「wp-content/plugins/amp/includes/template/class-amp-post-template.php」に以下の追記を行うことで、エラーは修正される。

●これは削除かコメントアウト

●以下を追記

SNSシェアボタンを追加する

コードを挿入する。

■「html-start.php」の<head>内

シェアボタンを設置したい場所に、以下のコードを追記

feedlyボタンを設置する

シェアボタンを設置したい場所に、以下のコードを追記(single.php等)
※Simplicity2テーマを前提

style.cssの最後に以下を追記




シェアする

  • このエントリーをはてなブックマークに追加

フォローする