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関連記事

• WordPressテーマUnderStrapのカスタマイズ例
• WordPressのメディアや記事全文の文字を置換して日付も更新するSQL
• プラグインを使わずにWordPressのショートコードで広告を管理する
• WordPressの絵文字やEasy Table of Contents関係のファイルの読み込みを止める
• WordPressの投稿画面のツールバー・ショートカットキーをカスタマイズする