WordPressのAMPプラグインを使う 2019年1月 前編

参考: 以前のAMPプラグインの記事

WordPressのAMPプラグインがVer.1.0を超えた。Ver1.0まではAMP専用テンプレートを改造しなければあまり使えたものではなかったのだが、新しく追加されたモードでは使用中の非AMPのテーマを含めた全体をAMP化変換するという力技を使うようになったので、AMPの知識が特にない人でも手軽にAMP化させることが可能になったといえる。(ただし強引な変換には罠もある。全部おまかせ放置はダメ)
AMPプラグインとは別のAMP for WP – Accelerated Mobile Pagesというプラグインが高機能だったのでこれが流行るかと思ったが、AMPプラグインの新しいモードが良い感じなので今後もAMPプラグイン推しで良いかしら？

AMPプラグインでとりあえずの表示

その名もズバリ「AMP」(AMP for WordPress)という名前のプラグインをインストールして有効化する。管理画面のメニューにAMPという項目が表示されるのでその中の2項目の内のGeneralを開く。

AMPプラグイン 1
AMPプラグインのVer1.0ではテンプレートモードというものが追加された。1.0以前はこのテンプレートモードの中のClassicモード相当しか存在しなかったが、1.0から新しく実装されたNative, Pairedモードでは通常のページで使用しているテーマを含めて丸ごとAMP化する。NativeモードはAMPページが標準(普通に表示するのがAMPページ)になるので使用は注意。
「AMPは速い」というのがウリだが、それは完成済のキャッシュされたAMPページを表示するのが速いということであって、WordPressのAMPプラグインでは通常ページをAMP化変換するという手間が増えるのでページを作ってクライアントに送信するのは通常ページよりも時間がかかるという点は勘違いなく。なのでAMPプラグインではオブジェクトキャッシュを使うことを推奨しているらしい。つまりオブジェクトキャッシュ無しでAMPプラグインをNativeモード(AMP-First)にして高速化を狙うというのは矛盾している。(「AMPなら速いよね。だったらサイトのデフォルトをAMP-Firstにすれば良くね？」というのをオブジェクトキャッシュ無しでやるのは間違いだと書こうとしている。)とうぜんだけどキャッシュを利用できるようにしてもキャッシュ切れ・キャッシュが生成されていないページを閲覧者が表示しようとしたらやはり遅いのでお忘れなく。
ClassicモードではAMP化するページの種類を選択できる。投稿・固定ページ・メディア。AMPプラグインの古いバージョンでは固定ページをAMP化させることができなかったが、現在は固定ページもAMP化できるようになっている。 ただし、固定ページのAMP化ページのURLは末尾が?ampに限定されるみたい。

AMPプラグイン 2
ClassicモードでAMP化したページを表示した。20年くらい前の素人のウェブサイトの様なシンプルなテーマ。これがAMP化するとシンプルなページしか表示できないという大きな勘違いを引き起こす元になったような・・・
AMPプラグインの旧版では存在したナビゲーションメニュー＋ハンバーガーメニューは新しいバージョンでは何故か削除されている。

AMPプラグイン 3
その他に、管理者画面の「外観」の項目にも「AMP」というのが追加される。

AMPプラグイン 4
AMPの項目を開いた。選択できるのは「デザイン」だけ。その下に3項目あるが、「ヘッダテキスト色」「ヘッダの背景&リンク色」「配色」という色関係だけ。そもそもclassicモードのAMP用標準テンプレートそのまま使い続けるということはないと思うんだけど・・・

AMPプラグイン 5
Pairedモードではおそらくエラーのページがたくさんできる筈。(使用する通常テーマによるかもだけど)
エラーのページはエラー内容を含めてリスト表示されるので、そのエラー項目を選択して「一括操作」でAcceptを選択し、[適用]を押す。単純なものであればこれでAMPのエラーが解消されてGoogleなどにインデックスされる状態になる。ただし、それが適切な対処かは不明。たとえば、Javascriptのコードが表示されなくなることで表示側に問題が発生することも。つまりAMPのエラーが解消される代わりに見た目が意図通りではなくなることがある。

Nativeモードではこのエラー解消を自動で行うのが標準設定になってるみたい。(Nativeモードは殆ど試していないので詳細不明)

Pairedモードでエラーを修正したAMPページを表示してソースの構造化データの部分を見た。実際には改行されていないが見やすいように ,や{} で行を分けて表示した。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<script type="application/ld+json">
{
    "@context":"http:\/\/schema.org",
    "publisher":{
        "@type":"Organization",
        "name":"WordPress Test"
    },
    "@type":"WebPage",
    "mainEntityOfPage":"https:\/\/wordpress.example.com\/sample-page\/",
    "headline":"\u30b5\u30f3\u30d7\u30eb\u30da\u30fc\u30b8",
    "datePublished":"2019-01-22T05:07:54+00:00",
    "dateModified":"2019-01-22T05:07:54+00:00",
    "author":{
        "@type":"Person",
        "name":"wordpress-user"
    }
}
</script>

JSON-LDで出力されるのでわかりやすい。タイプは触ってなければWebPageが指定されるみたい。Articleでさえない！？
Googleさんの構造化データの「記事」のドキュメントから外れている気がするんだけど、GoogleさんのAMPのテストでは問題無しと判定されるよう。 「がとらぼ」の中の人がスキーマを正しく理解できていない？

Classicモードのテンプレート

AMPプラグインのClassicモード(Ver1.0未満ではモードが存在せず、機能的にはClassicモード同様のみ存在)は標準で非常にシンプルなテーマが1つだけ用意されている。AMPプラグインのv1.0未満を使った多くの人が、これを以てAMP化すると非常にシンプルなページしか表示できないと勘違いしているよう。しかし、WordPressに非常にシンプルなテーマだけがインストールされていたとして、それを以てWordPressを使うとシンプルなウェブサイトしか作れないと思うのと同じで、大間違い。
AMPプラグインに標準で入っているテーマは非常にシンプル故にテンプレートファイルをひと目見れば何がどうなっているのか判るのでWordPressの非AMP用テーマを作ったとか触ったことがあるなら何をどうすれば良いかは大体わかる筈。AMPでもCSSは殆ど非AMPページ同様に使えるのでAMPページがデザイン面で非AMPページよりも大きく見劣りするということは無くできるかと思う。Javascript頼りだとそこが困ることになるけど。

AMPプラグイン 6
AMPプラグインのClassicモード用のテンプレートの雛形はWORDPRESS/wp-content/plugins/amp/templatesに存在する。ここのファイルはプラグインを更新すると一度削除されるので直接編集してはいけない。使用中のテーマがWORDPRESS/wp-content/themes/my_themeにあるとするなら、そこにampというディレクトリ(フォルダ)を作成してその下にテンプレートの雛形をコピーする。全部でも良いし変更する予定のファイルだけでも可。adminはコピーしなくて良い筈。(amp-status.phpというファイルがあって、それはAMP status option in the submit meta box.ということらしいが、普通は触らなくて良いかと。)

テーマの構造
AMPプラグインのClassic用標準テンプレートの基本構造はsingle.php(投稿)とpage.php(固定)が持つよう。ここからテーマの部品を読み込んでいる。

page.php (Ver.1.02のそのまま)
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<?php
/**
 * Page view template.
 *
 * @package AMP
 */

/**
 * Context.
 *
 * @var AMP_Post_Template $this
 */

$this->load_parts( array( 'html-start' ) );
?>

<?php $this->load_parts( array( 'header' ) ); ?>

<article class="amp-wp-article">
        <header class="amp-wp-article-header">
                <h1 class="amp-wp-title"><?php echo esc_html( $this->get( 'post_title' ) ); ?></h1>
        </header>

        <?php $this->load_parts( array( 'featured-image' ) ); ?>

        <div class="amp-wp-article-content">
                <?php echo $this->get( 'post_amp_content' ); // WPCS: XSS ok. Handled in AMP_Content::transform(). ?>
        </div>
</article>

<?php $this->load_parts( array( 'footer' ) ); ?>

<?php
$this->load_parts( array( 'html-end' ) );

つまり、ここからhtml-start → header → featured-image → footer → html-endを読み込んで繋がれて1つのページになる。なお、header-barはheaderの中で読み込まれている。他幾つかも同様に別のテンプレートの部品中から読み込まれる。スタイルシートもAMPではページ中に繋ぎ込まれるが次。

スタイルシート
AMPではスタイルシートは基本的にはページ内に含ませる形を取るが、AMPプラグインではスタイルシートはstyle.phpに書く。編集する人にとっては通常テーマのstyle.cssと同様の扱いで良い。AMPページを出力する際に自動的にそのページの中に繋ぎ込まれる。AMPでは !importantを書いてはいけないのだけ忘れなければ他は殆ど通常どおり。

後編に続く

関連記事: