エディタに入力したcodeタグが効かない原因が判明、プラグインとテーマの組合せ

htmlで作成したページにソースコードをそのまま表示したいとき便利に使えるのがpreとcodeタグの組合せ。

ところがWordPressで公開しているページで、このcodeタグが適用されず「文字が表示されない、エンコードした記述がブラウザで処理されてしまう」といった不具合が発生したので記録として、このページに残しておくことにしました。

目次非表示

<code>タグが適用されない不具合
原因はプラグインとWordPressテーマの相性
codeタグが効かない例外的な不具合は

<code>タグが適用されない不具合

<code>タグを使った記述が上手く処理されていないことに気づいたのは、アクセス数が減少気味だった記事をブラウザでチェックしていた時のこと。

preとcodeでくくっていたHTML文がブラウザで表示されてていないのと、同じく解説付きで挿入していたスタイルシートが、閲覧しているページそのものに適用され、WordPressが読み込んだthemeのCSSが一部上書きになってしまいページのデザインが崩れてしまうという症状に見舞われていました。

挙句の果てに、ブラウザのアドレスバーに警告メッセージみたいなのも表示されています。

最初、デザインの崩れだけが目立ったので何が起きたのか分かりませんでしたが、冷静にチェックしてみるとcodeで括ったHTML文が表示されていないのと、同じく記述していたスタイルシートは改行が無視された状態。

HTMLと組み合わせで記述していたCSSはHTML文ごとブラウザで処理されたらしく、本来ソースコードのままページに表示される文字が装飾が施され、2カラムのWordPressテーマがそのページだけシングルカラムになって公開されている始末です。

原因はプラグインとWordPressテーマの相性

コンテンツ重視で記事を量産させるのには便利に使えるWordPressですが、不具合が発生したときの原因を探すのに手間がかかってしまうのがデメリットの一つ。

今回は、使っているテーマなどに自分が特別なカスタムを施していなければ、原因を探すために最初に疑うべきところがプラグインかと考えました。

使っているプラグインを停止したり削除したりしてみましたが、なかなか分からず症状が出るページの中身全体をエディタでコピーして他の同じテーマを使ったサイトに張り付けてみたところ、そこで同様の不具合は発生せずタグで囲んだソースコードは正常に表示されることが確認できました。

同じテーマを使ったサイトでの検証だったので、片方が正常ということはテーマの問題ではなさそうです。（この時使用していたテーマはSANGO）

となると、正常に表示された方のサイトで使用していなくて、症状が出るサイトだけで使用しているプラグインが原因である線が濃厚になってきます。

ここで思い当たったのが、「Easy Table of Contents」という目次を表示させるプラグイン。

このEasy Table of Contentsは、テーマにSNGO以外を使っている別のサイトで不具合が出ていないので、プラグインの検証の際に停止や削除の対象にしていませんでした。

さっそくEasy Table of Contentsを停止してしてみると、問題があったページの表示は元通りになりcodeタグも正常に適用されるようになりました。

codeタグが効かない例外的な不具合は

今回、発生したcodeタグが効かなくなる不具合はネットで調べても情報が少なく、「<code>を使ってソースコードを表示したいときは特殊文字をエスケープ処理しましょう」というものが出てきます。

しかし、今回の不具合はエスケープ処理を済ませてもページにエディタに書いたHTMLが処理されてしまうというもの。

SANGOでは、現在プラグインを使用しなくても目次を表示できる機能が備わっていることもあって、こうした組合せによる不調に至るケースは稀かと思われます。

いまだにクラシックエディタを使用していて、目次の表示にEasy Table of Contentsという同じ条件で使い方をしている場合に限り似たような症状が出ることも考えられるので参考になればと思います。

このように、今回のcodeタグが効かない不具合は、Easy Table of Contentsプラグインと使用していたtheme「SANGO」の組合せが原因でした。

プラグインを導入してすぐに気が付かなかったことから、ここまでの期間にプラグインかテーマのどちらかがアップデートされたのをきっかけに発生したものなのかもしれません。

使用するテーマやプラグインのアップデートがあるたびにサイト内の全てページを確認することは難しいですが、急にアクセスが落ち込んだサイトやページがあったときはこうしたケースも思い返してみる必要がありそうです。