amp-imgなどAMP系のHTML要素(タグ)の中ではWordPressのショートコードは動作しない

PREMIUM TRADING compatible with many FX brokers
PREMIUM TRADING is the best cashback site in the English speaking world

AMPのHTML要素の中ではショートコードを実行できない

do_shortcode('<amp-img [my-shortcode]>')

例えば以上のようなコードではショートコードは展開されません。

ネットでよく検索に引っかかるwp_kses_attr_parse()を使って許可するHTML要素と属性を追加する方法もダメ。

なんでやねんと思いながら何時間もWordPressのソースコードを追った結果、

  • do_shortcode()の中で呼ばれているwp_kses_hair_parse()と言う関数のソースコードが問題
  • wp_kses_hair_parse()の中で決め打ちで定義されている正規表現($regex)でamp-で始まるAMP系のHTMLは弾かれる



と言うのが原因でした。

この変数は関数の中でベタ書きされているので、上書きすることも外部から変更することもできない。

これはもうWordPress側の対応を待つしかないですね。

  • 普通にAMP系のHTML属性はimgなどampの付かないまま定義しておく
  • the_content()にfilterを引っかけて、まとめてimg→amp-imgなどに置換
  • 置換前の元々のソースコードにはamp系の属性を書かない

のがベター。

当ブログは以前はスマホ・AMP用のテーマファイルとパソコン用のテーマファイルを二重で管理していたのですが、

さすがに管理が面倒くさくなってAMPに統一。

テンプレートに書いていたimg要素も全部最初からamp-imgに書き換えたところ、

ショートコードが展開されないので原因を追っていた…と言う次第です。

WordPressはバージョンアップでAMPだとエラーになるHTML属性を追加したり、AMPを無視した対応をよくぶっこんできますが、AMPの存在を知らないんだろうか…。

原因が分かってスッキリはしたものの、結構コアな部分にどうすることもできないコードが入り込んでいるのは何とかしてほしい。

まあHTMLチェッカーとかでも「amp-imgとかamp-analyticsなんて要素ねえよ」ってエラー出してきたりするので、

AMPを使う上では不利益とページ速度向上をよく考える必要がありますね。

個人的にはHTMLのタグやJSのライブラリなんか多すぎて使い切れないから、

いっそAMPみたいに制限があった方が書くのが楽…と思ってAMPにしていると言うのが結構大きいです。

WordPress関連記事



PREMIUM TRADING compatible with many FX brokers
PREMIUM TRADING is the best cashback site in the English speaking world

About site

スマートフォンで海外FX&ビットコイン取引をする方法の解説。TariTali推し。

search

Categories

タグ