Highlighting Code Blockがおかしい!Easy Table of Contentsをアップデートするとコンフリクトする。。|デザイナー、コーチ、ディレクターズメモ|井川

igawa design.

Memo

Easy Table of Contentsをアップデートすると、Highlighting Code Blockがおかしくなる。

突然、Highlighting Code Blockの表示に不具合が。

目次用のプラグイン「Highlighting Code Block」の表示が、突然おかしくなった。

ネット上に解決方法が見つからなかったので、もし参考になれば。

英語で話そう。talking.

今回の現象としては、、、

  • HTMLとPHPのコードは表示不可。PHPの方は壊滅的で、サイトのレイアウトまで崩壊。
  • CSSとJavaScriptは表示可能だが、改行がされずコードが1行になった。
  • コードの色分け(ハイライト)は問題なし。

普段の制作時はChromeだが、Safariで表示確認をした際のキャッシュ表示がたまたま残っており、運良くソースをチェックすることができた。

このSafariでのコードチェック中に「Easy Table of Contents」のソースコードが不自然になっていることが判明した。

その影響か、一部のコードが消えていたり、WordPressで自動挿入されるpタグを削除す「remove_filter(‘the_content’, ‘wpautop’)」が入っており、しかもなぜかコメント形式だった。


「Highlighting Code Block」の表示崩れ。

不具合時(Easy Table of Contents有効)のスクリーンショット。

Easy Table of Contentsをアップデートすると、Highlighting Code Blockがおかしくなる。

該当箇所を拡大したスクリーンショット。

HTMLのpタグが無くなっていたり、CSSが改行されず1行になっている。

Easy Table of Contentsをアップデートすると、Highlighting Code Blockがおかしくなる。

正常時(Easy Table of Contents無効)のスクリーンショット。

Easy Table of Contentsをアップデートすると、Highlighting Code Blockがおかしくなる。

該当箇所を拡大したスクリーンショット。

これが本来のコード表示。

Easy Table of Contentsをアップデートすると、Highlighting Code Blockがおかしくなる。


原因は「Easy Table of Contents」のアップデート後のコンフリクト。

プラグインは自動更新にしているのですぐには気づかなかったが、ソースチェック後に「Easy Table of Contents」を無効化すると、改善された。

Easy Table of ContentsEasy Table of Contents

プラグインの更新時間をみると、ちょうど自動更新がされていたタイミングだった。

公式サイトを確認すると、サポートページに全く同じ状態の方もいた。なので原因は確定と言ってもほぼほぼ間違いない。

参考:Remove line breaks of some syntax highlighting plugins | WordPress.org

(※英語だが、翻訳機能で読み解ける。しかも日本人の方なので、翻訳文もわかりやすい。)


解決方法。

「Easy Table of Contents」を無効化し、「Table of Contents Plus」で代用するのが手っ取り早かった。

「Table of Contents Plus」は1年以上更新されていないので、他の目次用プラグインを試したが、投稿ごとに毎回ショートコードが必要だったり、カスタマイスがしにくかった。

Table of Contents PlusTable of Contents Plus

「Table of Contents Plus」は「Easy Table of Contents」と似た作りのようで、WP管理画面もほぼ同じで、見た目の調整もCSSでちゃちゃっとできる。

今回の現象は「Easy Table of Contents」のサポートにもあがっているため今後修正してくれる可能性はあるが、急ぎの場合は「Table of Contents Plus」で代用すると良いかも。

使用方法もネット上にたくさんある。ただ、プラグイン名が似ているのでご注意を。

Table of Contents Plusで代用。

参考:「Table of Contents Plus」のページ。

(※WordPress管理画面のプラグインのページからでも、新規追加でインストール可能。)

以上、参考になれば幸いです。


Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。(元々はメモ書きでしたので順次見直し、更新しています。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真や動画はフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。

デザイナー、ディレクター、講師、コーチ / 井川宜久

お問い合わせ CONTACT..


    免責事項について

    • 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。
    • 一個人のポートフォリオサイトですので、万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。

    個人情報について

    • 個人情報はお客さま対応のみでの利用とさせていただいております。
    • 社会的に正当な理由、法に基づいた理由がない限り、第三者へ開示することはありません。