LiteSpeed Cache の UCSS が生成できなくなるため、WPCode Lite プラグインの使用を止めました。

経緯

WPCode Lite は、CSS や PHP、JavaScript を機能毎に分けて管理し、それぞれを単独で有効化・無効化できる便利なプラグインです。適用する条件も決められるので、ブログトップのみ、あるいは個別投稿ページのみに反映させる等、細やかな調整ができます。

Twenty Twenty Five テーマの style.css や functions.php の量が多くなってきたこともあり、個別に分けて WPCode Lite プラグインに登録する事で、今後の管理が楽になると期待していました。

LiteSpeed Cache の UCSS が生成されない

style.css と functions.php の内容を全て WPCode Lite に移し、有効にすると正常に動作していました。これで継続して使用するつもりでした。

しかし、LiteSpeed Cache の UCSS が生成されなくなりました。正確には、生成時にエラーが起こり反映されない状態でした。Chrome デベロッパーツールでは、LiteSpeed Cache の UCSS が反映されているかどうか表示されます。

UCSS が生成されて反映されると、この緑色のチェックが表示されます。

UCSS が未生成の場合は “UCSS in queue” と表示されます。

今回は赤色のバツマークが表示されていました。私も初めて見る記号でした。

UCSS が反映されなくなったのは、WPCode Lite プラグインを使用し始めてからでした。

適用条件を全てヘッダに表示するように変更しても、この現象は解消できませんでした。

動的に追加される CSS に LiteSpeed Cache プラグインが対応できなかったのでしょう。相性が悪かったという事です。

対処

WPCode Lite の CSS 等の管理と LiteSpeed Cache のページの最適化を天秤にかけて、私は後者を選びました。

WPCode Lite に移していた CSS、PHP、JavaScript を全て style.css と functions.php に戻しました。

また、生成された UCSS が最適化されていない可能性も考えて、一旦全て消去しました。キャッシュも全て消去しました。

この記事は、LiteSpeed Cache の UCSS が正常に生成された事を確認してから書いています。

結び

今回の現象は、プラグインの相性が悪かったという事だと思います。CSS や PHP を適切な場所に配置する WPCode Lite と、配置された CSS や JavaScript を最適化する LiteSpeed Cache の、機能がかみ合わなかった結果だと推測します。

WPCode Lite を使用できないのは残念です。コメントをしっかり記載して、機能毎に分けて書く事で対処します。また、別ファイルに分けられるかどうかについても調べてみます。