WordPressの表示がおかしくなっていた
たまたま、よっしーのプログラミング備忘録
の過去の記事を見返そうと思い、表示してみたところ、タイトルは表示されているものの、本文が表示されていませんでした。
色々と記事を表示させてみたところ、他のサブサイトは普通に表示されていました。
また、preタグを含まない記事は正常に表示されていたので、その辺りが問題を起こしているのかなと。
プラグインを外してみました
ググってみれば、プラグインが不具合を起こしている場合があるとの情報が…。
とりあえず、全てのプラグインを外してみたところ、全ての記事が正常に表示されることが判りました。
次に、1つずつ、プラグインを戻して行き、表示を確認したところ、
を戻したところで、不具合が再発。
再度、Crayon Syntax Highlighter
の不具合についてググってみると、数件、同様の不具合がヒットしました。
それらの記事では、対応策も解説されていました。
対応策
まず、Crayon Syntax Highlighterの設定画面を開きます。
次に、Code欄の
- □Allow Mixed Language Highlighting with delimiters and tags.
- □Show Mixed Language Icon (+)
のチェックを外します。
最後に、Save Changesボタンをクリックします。
以上で、表示の不具合が解消されました。
プラグインを変えてみました
とりあえず、上記のように設定を変える事で、表示されない不具合は解消されたのですが、Gutenbergのコードエディターの表示がおかしくなっている事に気が付きました。
まず、行間が異常に空いています。
更に、選択した場所と実際に文字が入力される場所が、著しくズレます。
設定の変更で解消できるかと努力したのですが、無駄に終わりました。
と云う訳で、プラグイン自体を変える事としました。
選択肢は…
ググってみると、Crayon Syntax Highlighterの代替として名前が挙がっていたのは、
- Highlighting Code Block
- SyntaxHighlighter Evolved
- Enlighter – Customizable Syntax Highlighter
- Urvanov Syntax Highlighter
等です。
Highlighting Code Block
は、シンプルで使い易そうです。
また、機能の追加も行われているようで、今後が楽しみなプラグインです。
SyntaxHighlighter Evolved
は、ある程度
ただ、ショートコードを使用するので、互換性に欠けるかもしれません。
Enlighter – Customizable Syntax Highlighter
は、かなり高機能で、
特に、Crayon Syntax Highlighterの互換モードを搭載しているため、これまでCrayon Syntax Highlighterで書いた記事を修正しなくても良いと云うのが、大変ありがたいです。
Urvanov Syntax Highlighter
は、Crayon Syntax Highlighterの作者が開発メンバーに入っているようで、まさにCrayon Syntax Highlighterの後継のプラグインの位置づけです。
当然、Crayon Syntax Highlighterで書いた記事を修正する必要はありません。
ただ、Gutenbergのコードエディターの表示がおかしくなる不具合も引き継いでいるようで、使えませんでした。
Enlighter – Customizable Syntax Highlighter
結局、Enlighter – Customizable Syntax Highlighterをインストールする事にしました。
インストール方法や内容については、こちらが詳しいので参考にして下さい。
なお、Crayon Syntax Highlighterの互換設定については、プラグインのEnlighter – Customizable Syntax HighlighterのSettingsを選択した際に表示される設定画面により行います。
Compatibilityを選択し、Compatibility Modeタブで、Compatibility ModeをEnableにした後、変更を保存ボタンをクリックします。
次に、CrayonタブでCrayonをEnableにした後、変更を保存ボタンをクリックします。
上部にタイトルが表示されない等、細かな違いはありますが、互換モードも正常に動作しているようで、十分満足できるプラグインです。