Help us understand the problem. What is going on with this article?

WordPressをプラグインなしでAMP対応させる試み【その2:改良編】

More than 1 year has passed since last update.

前回はWordPressにプラグインを使わずAMPを導入するための試行錯誤をまとめましたが、そのままではなにかと表現力が低下したままのですので、改良をほどこしていきたいと思います。

画像のクラスを保持する

前回は失われていたWordPress側で画像に付加されるクラスを保持する試みです。

テストしてわかったことはAMPで展開される画像amp-imgは、同レベルの要素があるとそれを巻き込んで画像が縦に伸び、テキストは裏側に回るという動作をするということです。これはfigureに対するfigcaptionでも例外ではありません。

そこですべてのamp-imgをラッパーに入れ、figcaptionはそのラッパーレベルに持ち上げ、全体のラッパーにWordPressが付与するクラス(.aligncenterなど)をそのまま移動します。

amp-single.php
    ...省略...

    $content = preg_replace(
      '/<figure.*?class="(.*?)".*?><img(.*?>)<figcaption .*?>(.*?)<\/figcaption><\/figure>/i',
      '<div class="amp-figure \1"><div class="amp-img-wrapper with-caption"><amp-img layout="responsive"\2</div><div class="amp-caption wp-caption-text">\3</div></div>', $content);
    $content = preg_replace(
      '/<img class="(.*?)"(.*?)\/>/i',
      '<div class="amp-figure \1"><div class="amp-img-wrapper"><amp-img layout="responsive"\2></div></div>', $content);
    echo $content;

本文書き出しの前処理を少し変更し、figureimgを加工しています。
これにより、処理前は

<figure class="wp-caption aligncenter" />
  <img src="ほにゃほにゃら"... />
  <figcaption class="wp-caption-text">はにゃらはにゃら</figcaption>
</figure>

<img class="aligncenter  wp-image-715" src="あにゃらあにゃら".../>

だったソースが、処理後

<div classs="amp-figure wp-caption aligncenter">
  <div class="amp-img-wrapper with-caption">
    <amp-img layout="responsive" src="ほにゃほにゃら"... >
  </div>
  <div class="amp-caption wp-caption-text">はにゃらはにゃら</div>
</div>

<div classs="amp-figure aligncenter  wp-image-715">
  <div class="amp-img-wrapper">
    <amp-img layout="responsive" src="あにゃらあにゃら"... >
  </div>
</div>

となり、WordPressのレイアウト用クラスが有効かつamp-imgもくずれない構成になりました。あとはスタイルを当てるだけです。

Search Consoleから強制クロールさせた方がよい?

公開から4日経過。実は昨日テストとして、AMP対応ページをSearch Consoleから強制クロールさせたページ群と、何もせずに放置する群に別けてみました。すると、どうやらクロールさせたものの方が早くインデックスに登録されている雰囲気。対象ページ数17のうち「インデックスに登録された AMP ページ数」は現在7となっています。もう少し様子をみてみます。

公開から7日

おととい対象AMPページが全てインデックス登録されたことを確認。細かな更新を行って、やはりSearch Consoleからクロールされると反映は早い傾向はあるけども、そうじゃないページもほどなく更新されるので、ページ数も多いので今後は放置することに決定。

検索順位は?

今のところ変わらない。すでに食べログ直下まで行ってたし、結局大手もどんどんAMP対応しているのでね。もちろんアクセスも横ばいです。費用対効果ってどうなんでしょうか?
フロントエンド屋の商品の幅が広がるという意味ではよいかも。

公開から約1ヶ月

一部のページで蓋をされていたサイトの上位にくることがある。ただし不安定。

Fujix
フリーのフロントエンドエンジニアです。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away