「Cocoon」&「Crayon Syntax Highlighter」で表示崩れが起きる原因と対策

WordPress WordPress
この記事は約3分で読めます。

先日、WordPressのテーマを「Cocoon」に変更しました。
「Simplicity」の頃からずっと気になっていましたが、こんなに高機能なのに無料で使えて、とてもありがたいです。
テーマ変更後、諸々設定し終わると、ソースコードハイライトのプラグイン「Crayon Syntax Highlighter」の表示がおかしくなっていました。
どうもCocoonの設定で、このプラグインと相性が悪いところがあるようでした。

なお、今回のバージョンは以下の通りです。

  • WordPress 5.0.3
  • Cocoon 1.5.3
  • Crayon Syntax Highlighter 2.8.4
スポンサーリンク

WordPressプラグイン「Crayon Syntax Highlighter」の表示崩れ

Crayon Syntax Highlighterは、ソースコードの言語で[php]~[/php]のようなショートコードを使用できるので、この構文で記事本文を書いていました。
それが、このように崩れて表示されていました。

Cocoon/Crayon Syntax Highlighter

ソースコード内の文字間の空白がなぜか消えて詰められて表示されています。
また、上部のツールバーも表示が崩れていて、動作しませんでした。

WordPressテーマ「Cocoon」のサイト高速化設定で縮小化していると崩れる

いろいろと試して調べていると、ようやく原因が分かりました。

Cocoon/Crayon Syntax Highlighter

Cocoonのサイト高速化設定で、HTML・CSS・JavaScriptの縮小化ができますが、これを何も考えずに全部有効にしていました。
これで崩れてしまっていたようです。
Crayon Syntax Highlighterを使用するなら、縮小化しない方が良さそう…。

Cocoonの縮小化設定の変更

原因が分かったので、取り急ぎ設定変更して表示崩れを防ぎます。

Cocoon/Crayon Syntax Highlighter

「Cocoon設定」⇒「高速化」を開き、以下のように設定しました。

  • HTML縮小化 … チェックオフ
  • CSS縮小化 … チェックオン
    • 除外 … 「/wp-content/plugins/crayon-syntax-highlighter/」を追加
  • JavaScript縮小化 … チェックオン
    • 除外 … 「/wp-content/plugins/crayon-syntax-highlighter/」を追加

HTML縮小化をやめることで、空白が消えて詰められる現象は解消しました。
CSS・JavaScript縮小化は、縮小したくないファイルのパスを指定すれば除外されるので、プラグインのパスの一部を設定しました。
これで、上部ツールバーの表示崩れと動作は解消しました。

Cocoon/Crayon Syntax Highlighter

それにしても、除外設定可能とか痒い所に手が届くCocoonはすごい…。

最後に

Crayon Syntax Highlighterは、便利で高機能なのですが、2019年1月時点でもう3年も更新が止まってしまっているプラグインです。
WordPressもバージョン5のGutenbergになって、ブロックエディタになったり、大きく変わってきたので、このプラグインが更新されないままであればそのうち動かなくなるんだろうなぁと思います。
Cocoonには、ソースコードハイライト機能も備わっているし、こちらに変えるか、それとも別のプラグインに乗り換えるか…。
少し考えてみたいと思います。

以上です。

スポンサーリンク
スポンサーリンク
WordPress
えふめんをフォローする
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
俺の開発研究所

コメント

タイトルとURLをコピーしました