WordPress: Autoptimize + Enlighterを正常動作させる方法

標準設定では誤動作するプラグイン環境

WordPressプラグインの「Autoptimize」と「Enlighter – Customizable Syntax Highlighter」を併用するブログ環境の場合、標準設定のままではEnlighterが期待する動作となりません。

2019年からWordPressが従来のエディタからGutenbergへと移行したことに伴い、これまで使用していたプラグインの中にはアップデートが行われず泣く泣く新しいプラグイン並行することになるケースに出くわすことでしょう。

私の場合は「Crayon Syntax Highlighter」がアップデートされないため「Enlighter – Customizable Syntax Highlighter」へ移行する運びとなりました。

  • Autoptimize：CSSやJavaScriptを自動的に圧縮し軽量化。
  • Enlighter：記事中でソースコードを綺麗に表示。(Gutenberg対応)
  • Crayon：記事中でソースコードを綺麗に表示。(Gutenberg未対応)

Enlighterの動作不良

例えばPHPをEnlighterの専用ブロックに記述して、実際に記事をプレビューすると以下のようになります。これはEnlighterで期待された動作ではありません。

Autoptimizeの設定変更が必要

これを修正するためにはAutoptimizeの設定を変更する必要があります。

Enlighter自体は正常に動作しているのですが、Autoptimizeの圧縮と競合しているために期待される動作となっていないことが原因であるため、Autoptimizeの圧縮対象からEnlighterを除外することで解決します。

設定変更の手順

EnlighterJS.min.js, mootools-core-yc.js

  1. WordPress管理画面を開く
  2. 「設定」>「Autoptimize」を開く
  3. 画面右上の「高度な設定を表示」をクリック
  4. 「JavaScriptオプション」>「Autoptimizeからスクリプトを除外」
  5. 「EnlighterJS.min.js, mootools-core-yc.js」を追記
  6. 「変更を保存してキャッシュを削除」を選択

seal.jsとjquery.jsが初期状態から入力済みとなっています。これらはWordPress標準のコアなファイルとなるので理由がない限りは残しておきましょう。

これで以下のように正常な表示となっているはずです。

技術的な助言

Posted by もん