はじめに
WordPress の Cocoon テーマの Ver.2.7.3 で追加されたタブブロックの機能が、LiteSpeed Cache プラグインを最適化して使用していると正常に動作しない状況に悩まされていました。
動作しない状況とは、
- タブを選択しても色が反転しない
- タブブロック部分に何も表示されない
という風に、タブが機能していない状態です。実際の表示は次の画像のようになります。"1個目"、"2個目" 等のタブを押しても反応なし、タブの下のブロックに何も表示されません。
本来、正常であれば、タブブロックの一つ目が選択されて文字が反転し、タブ下のブロック部分に内容が表示されます。
2024年4月から発生し、長らく調査してきましたが、やっと原因が掴めて対策できました。JavaScript の最適化条件と CSS の両方を修正する必要がありました。
対策内容について紹介します。
JavaScript が動作していない事への対策
Cocoon のタブブロックの JavaScript は、テーマのディレクトリの以下の場所にあります。
/cocoon-master/blocks/src/block/tab/tab-frontend.jsこの JavaScript が正常に機能していると、選択しているタブの class 指定に is-active が追加されます。タブブロックの部分の HTML を Chrome デベロッパーツールで見ると、tab-label-group と tab-content-group のそれぞれ "1個目" の行に is-active が追加されている事が分かります。別のタブを選択すると、class 指定の is-active が移動します。
対策を取る前は、タブをクリック/タップしても is-active が移動しない状態でした。
この原因は、LiteSpeed Cache プラグインの最適化により、tab-frontend.js が正常に読み込まれない状態となっていた事でした。
対策は、LiteSpeed Cache ページの最適化の [8] チューニングの項にある、次の項目に tab-frontend.js を追加する事です。
- JS 除外
- JS Deferred / Delayed 除く
この項目を追加して保存した後には、LiteSpeed Cache プラグインのツールボックス内の "全てをパージする" を押して、JavaScript のキャッシュを消去して下さい。
これまでの表示乱れの対策では、どちらか片方に追加すれば良かったのですが、今回は両方に追加しないと正常に動作しませんでした。
この対策により、タブをクリックすると is-active が移動している事が Chrome デベロッパーツールで確認できます。
CSS の is-active が反映されない事への修正
JavaScript が機能して is-active が反映されるようになっても、画面上の表示に変化がありませんでした。一旦 UCSS を消去すると一時的に正常に動作するのですが、UCSS が再生成されると再び動作しない状況になりました。CSS 側の対処も必要でした。
タブブロックの tab-label-group と tab-content-group の CSS は、cocoon-master の style.css で定義されています。その中の is-active が関係する部分を、cocoon-child-master の style.css で再定義すれば、正常に動作するようになりました。
/* 20250131 タブブロックの表示修正 ここから */
.tab-label-group .tab-label.is-active {
background-color: var(--cocoon-tab-label-active-color); /* #404453; */
color: var(--cocoon-white-color); /* #fff; */
}
.tab-content-group .tab-content.is-active {
display: block;
}
/* 20250131 タブブロックの表示修正 ここまで */なお、cocoon-child-master の style.css は LiteSpeed Cache プラグインの最適化から除外しています。
JavaScript の時と同様に、LiteSpeed Cache プラグインのツールボックス内の "全てをパージする" を押して、CSS のキャッシュを消去して下さい。
正常に動作するようになったページの例
Cocoon Ver.2.7.3 の紹介ページにタブブロックを設置していました。今は正常に動作しています。
LiteSpeed Cache プラグインの最適化の方法
LiteSpeed Cache プラグインの最適化について色々と記事にしていますので、興味のある方はご覧ください。設定をただ載せるだけではなく、最適化の調整方法について記載しています。
「LiteSpeed サーバー + LiteSpeed Cache プラグインは高速」というけど思ったより速くない、と感じている方は、設定を詰めると劇的に変わりますのでお試し下さい。
まとめ
WordPress の Cocoon Ver.2.7.3 から追加されたタブブロックを LiteSpeed Cache プラグインを最適化した状態で使用すると、正常に動作しませんでした。
- JavaScript の tab-frontend.js の読み込み条件の変更
- CSS の is-active の行を子テーマの style.css で再定義
以上の2点を対策する事によって、タブブロックが正常に動作するようになりました。
同様の事でお困りの方の参考になれば幸いです。
今回のアイキャッチ画像
夜空の流星を生成しました。こういう自然の中で夜空をゆっくりと眺めるのも良いですね。
初の Mac は Mac mini M4 にしようと思っていますが、後は購入資金の手当てのみ。Keyboard は US 配列、Mouse は Bluetooth 対応、モニタは HDMI 空き有り。準備は万端なのですが…もう少しの我慢。
コメント
[…] LiteSpeed Cache プラグイン使用時の Cocoon テーマのタブブロックを正常に動作させる | hiroの長い長い冒険日記WordPress の Cocoon テーマ Ver.2.7.3 から追加されたタブブロックが、LiteSpeed Cache プラ […]