WordPressのAMP対応:メモ2

Cat WEBサイト構築Tag by cubismer
WordPressのAMP対応
WordPressのAMP対応

以前の記事「WordPressのamp対応:メモ1」の派生版です。

結局この方法も良い方法とは言いがたい状態ですが。

別の分岐方法

  • functions.php内にAMP用の仕組みを作る
  • functions.phpを使って、amp時にはsingle-amp.phpのように別テンプレートを読み込ませる
  • single-amp.phpでは、header-amp.phpのようにAMP専用パーツを読み込ませる

上記の場合、ページがリクエストされた際には以下のように読み込まれます。

  1. index.phpなどのページ用のテンプレートがまず呼び出される
  2. 呼び出されたファイルに書かれたget_header()やget_footer()でそれぞれにファイルが呼びだされる

つまり、AMP専用のページテンプレート呼び出せれば、header.php内に細かくAMP用の分岐を作らなくとも、AMP用の記述だけがあるheader.phpの読み込みができます。

functions.php 内のamp用テンプレート読み込み設定

functions.php内に記述するamp用テンプレート読み込み設定は以下の通りです。


//AMP用のテンプレートを設定
add_filter( 'template_include', 'change_template_amp' );
function change_template_amp( $template ) {
  if ( check_amp()) {
    $template_amp = str_replace( '.php', '-amp.php', $template );
    if ( file_exists( $template_amp ) )
      $template = $template_amp;
  }
  return $template;
}

上記の記述により、AMP時にはsingle.phpではなくsingle-amp.phpが読み込まれるようになります。

参考にした記事は以下のとおり。

追加作成ファイル

投稿ページと固定ページのみであれば、以下のファイルをAMP用に作成します。

  • header-amp.php
  • single-amp.php
  • page-amp.php

header.phpは丸ごとAMP専用の内容を記述素します。

header-amp.php

AMP用のheadの中身は以下の通りです。


<?php $myImagesFolder = get_stylesheet_directory_uri().'/images'; ?>
<html amp>
<head>
<!-- <meta charset=utf-8> -->
<meta charset="<?php $charset = get_bloginfo( 'charset' ); echo mb_strtolower( $charset ); ?>">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-custom>
  body{
    background-image: url(<?php echo $myimagesfolder; ?>/example-bg.jpg);
    background-repeat: repeat-x;
    background-position: left top;
  }
</style>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<link rel="canonical" href="<?php $pageid = get_the_ID(); echo get_permalink($pageid); ?>'">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>
<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
<script type="application/ld+json">
{
    "@context": "http://schema.org",
    "@type": "BlogPosting",
    "headline": "<?php the_title(); ?> ",
    "image": {
        "@type": "ImageObject",
        "url": "<?php echo $myimagesfolder; ?>/example-eye-catching.jpg",
        "height": 300,
        "width": 700
    },
    "datePublished": "<?php echo get_the_date('c'); ?>",
    "dateModified": "<?php echo get_the_modified_date('c'); ?>",
    "author": {
        "@type": "Person",
        "name": "著者名"
    },
    "publisher": {
        "@type": "Organization",
        "name": "サイト名",
        "logo": {
        "@type": "ImageObject",
            "url": "<?php echo $myimagesfolder; ?>example-logo.jpg",
            "width": 600,
            "height": 40
        }
    },
    "description": "説明文"
}
</script>
</head>
<body>
<!-- 以降はbody内に入れる記述 -->

single-amp.php と page-amp.php

single-amp.phpとpage-amp.phpは、まずsingle.phpとpage.phpを複製しリネームしてから、以下のように変更するだけです。


<?php get_header('amp'); ?>

これでheader-amp.phpが読み込まれます。

footer.php内でも何かしらAMP用に必要ならば、footer-amp.phpのようにファイルを作成してから以下のようにすれば読み込まれます。


<?php get_footer('amp'); ?>

メリットとデメリット

この方法であれば元々のheader.phpを触らずに済むという利点はあります。

「-amp」とつけたファイルだけを取除けば元に戻すことも簡単です。

反面、「-amp」を付けたファイルはテーマ内の最上位階層におかねばならず、例えばAMP用に「amp」というフォルダーを作ってまとめることができません。

そのため、テーマフォルダーには必要な数だけの「-amp」ファイルが溢れてしまいます。

もしもすべてのページテンプレートに対してAMP用のファイルを作成すると、単純にページテンプレートのファイル数が2倍にふくれあがります。

これを邪魔に感じない場合は、こちらの実装方法もよいかもしれません。

結び

この方法に関しては、突き詰めていけば以下のような仕組みに行き着くと思います。

  • AMP関連のファイルを集めたフォルダ内ですべてを管理する

そして、上記の実現のためには下記の方法が必要です。

  • プラグイン化

以前の記事でも書きましたが、プラグインの有効化を特定条件で分岐しコントロールするためには、プラグイン化が必須のもようであり、その流れからもこの結論に達しました。

となると、既にWordPrssの公式プラグインでAMP対応のものがあるわけで、そちらを使うのが簡易かつ手堅い方法かもしれません。

AMPをやめる時はプラグインを消せば良いだけですし。

0人がこの記事を評価

役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。

連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。

コメント欄