先日、当サイトをようやくAMP対応させました。
このサイトで使用中のWordpressテーマ自体に、設定1つでAMP化出来る機能はありました。けれど、何で今までしなかったかというと、当サイトは、WordpressプラグインのCrayon Syntax Highlighterを利用して、多数プログラムコードをハイライト表示させていたからです。
Crayon Syntax Highlighterでハイライト表示させると、<textarea>を利用して出力します。AMPではtextareaは利用できないため、これがAMPエラーの原因となります。
なので、プラグインを利用したままAMP化させても「AMPエラーだらけ状態」になってしまいます(AMPエラーの無いページにとっては問題ないと思うけど大量エラーが出ると心情的に気持ち悪い)。ですので「Crayon Syntax Highlighterのコード調べてAMPページで適用しないようにしてからAMP対応しよう」なんてことを思っていたら、面倒くさくてそのまま放置していました。
で先日ようやく、年に数回訪れるという「面倒くさいことをやれそうな気がする日」が訪れたので、調べてみたら、なんだか「うまいことCrayon Syntax Highlighterを動作させないコード」が書けたので、備忘録がてら紹介です。
目次
WordPressでハイライト表示を制御するコード
Crayon Syntax Highlighterのコードハイライト表示を制御するには、functions.phpに以下のように記入します。
AMPページではハイライト表示させない例
「//:your-domain/xxxxxxx/?amp=1」といったパラメーター付きのURLでAMPページを生成している場合の「AMPページではCrayon Syntax Highlighterを適用しない」コードは以下。
//AMPページではCrayon Syntax Highlighterを表示しない function remove_crayon_syntax_highlighter_ex() { if (isset($_GET['amp']) && $_GET['amp'] === '1') { //Crayon Syntax Highlighterを利用しない remove_filter('the_posts', 'CrayonWP::the_posts', 100); } } add_action( 'wp_loaded','remove_crayon_syntax_highlighter_ex' );
とりあえず、AMPエラーチェックでも問題なく動作しています。
特定のページでハイライト表示させない例
個別の投稿ページでCrayon Syntax Highlighterを適用させたくない場合、以下のように書きます。
//特定の投稿ページでCrayon Syntax Highlighterを表示しない function remove_crayon_syntax_highlighter_ex() { if (is_single('投稿ID')) { //Crayon Syntax Highlighterを利用しない remove_filter('the_posts', 'CrayonWP::the_posts', 100); } } add_action( 'wp_loaded','remove_crayon_syntax_highlighter_ex' );
まとめ
今回の方法は、とりあえずCrayon Syntax Highlighterのコードを調べ、不要そうなフィルターフックを取り除いたら、たまたまうまくいった方法です。詳しい仕組みまでは調べていません。
ですので、今後Crayon Syntax Highlighterの仕様変更などで、動作しなくなる可能性もあるのでご了承ください。
ということで、「AMP対応機能(プラグイン)を使用してAMP化したけどCrayon Syntax Highlighterを利用しているページでエラーが出る」なんて場合は、今回紹介したコードで改善出来るかもしれません。
サイト Crayon Syntax Highlighter — WordPress Plugins