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

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にしていると言うのが結構大きいです。

WordPress関連記事


WordPressでアフィリエイトをするなら3桁PVでも月収10万円を達成できる
キャッシュバックサイトアフィリエイトがオススメ

サイトについて

スマートフォンとキャッシュバックサイト特化の海外FX&ビットコインFX解説サイト。

検索

カテゴリー

WordPress (6)
アプリ 
キャッシュバックサイト(リベートサイト) (27)
トレード・テクニカル考察 (28)
仮想通貨ゲームアプリ (3)
仮想通貨取引所 
仮想通貨関連アプリ (3)
投資日記 (4)
比較・おすすめランキング (29)
海外FX業者 
節約 (7)
送金サービス (5)