アプリ紹介ブログパーツ「アプリーチ」のタグをWordPressでAMP化する処理のヒント

先日、アプリーチのアプリ紹介タグをWordpressでAMP化する処理を書いてみました。

基本的に、Wordpress投稿本文の出力をフックして、本文中テキスト内に出てくる、アプリーチのタグを置換して対応をしているだけなのですが、うまくいったのでやり方をメモがてら紹介です。

スポンサーリンク
レクタングル(大)広告

WordPressでアプリーチタグをAMP化する

基本的に、置換によるテキスト処理がメインです。

やっていることといえば、以下のような感じです。

  • style属性を取り除く
  • target属性を取り除く
  • imgタグをamp-imgに変換
  • アプリーチ用のスタイルを書く

AMPタグ変換処理

functions.phpに、以下のような投稿本文出力のフック関数を書きます。

[AMPページかそうでないかを判別する関数もしくは変数]の部分には、表示する投稿ページが「AMPページなのか?」を判別する関数もしくは、変数を書いて、「通常の投稿ページではAMP下処理をしない」ようなものを書く必要があります。

判別方法のヒントとしては、いかに書いてある方法などを参考にしていただければと思います。

先日、自作のWordpressテーマをAMP化しました。 その時に、一番苦労したのが、Wordpress本文にある「AMP仕様から外れた記...

AMP用スタイル

前項のPHP処理で、アプリーチタグからstyle属性がすべて取り除かれています。

なので、アプリーチ内のタグにインラインで設定されているスタイルは適用されなくなりますので、そのままブラウザで見ると、表示が崩れます。

ですので、アプリーチタグ内のHTML要素やIDやclassに対して、改めてスタイルを指定してやる必要があります。

スタイル指定は、style.cssなどに以下のように記述します。

上記は、アプリーチタグのインラインスタイルを、CSSスタイルに書き直したものです。

このままのスタイルでも十分なような気はしますが、それぞれのサイトに合わせて「スタイルをよりモバイルで見やすくする」といったような変更を加えると尚良いかもしれません。

まとめ

僕の場合は、こんな感じでアプリーチタグをAMP表示に対応させました。

AndroidとiPhoneのアプリを紹介するのに、アプリーチは結構使われているのを見かけます。

もしAMPバリデーターなどでアプリーチタグ部分にエラーなどが出たら、上で紹介したようなタグの書き換えで対応できるかもしれません。

サイト アプリーチ