shitate pro blocks の CSS は、@scope と入れ子（CSS ネスティング）を使って書かれています。ページキャッシュや、CSS をそのまま結合・圧縮するだけの機能とは問題なく併用できますが、CSS を解析して作り直す機能は、こうした比較的新しい書き方を正しく扱えないことがあります。ここでは、どの機能に注意が必要か、プラグインが用意しているフック、WP Rocket での設定例をまとめます。
症状
代表的なのは、WP Rocket の「使用されていない CSS を削除」（Remove Unused CSS）を有効にすると、クエリラップのカード一覧が高さ 1px に潰れて見えなくなる、というものです。入れ子のセレクターが落とされ、その中の指定がスコープのルート（.sb-query-wrap）にそのまま当たってしまうために起きます。「キャッシュの有無で表示が変わる」「スマホでだけ一覧が消える」といった形で気づくことが多いです。
機能ごとの注意
| 機能 | 併用 | 補足 |
|---|---|---|
| ページキャッシュ（WP Rocket、LiteSpeed Cache、W3 Total Cache など） | 問題なし | テキストアクションなど、設定で表示が変わる機能を使ったときはキャッシュの削除が必要です |
| CSS の結合・縮小（minify / combine） | 問題なし | @scope を知らない古いバージョンの縮小ツールは壊すことがあるので、最新版で使ってください |
| 使用されていない CSS を削除（WP Rocket の RUCSS、LiteSpeed Cache の UCSS など） | 除外が必要 | プラグインの CSS を対象から外します（下の設定例） |
| クリティカル CSS の生成、CSS の遅延読み込み | 除外を推奨 | 生成された CSS に @scope が正しく含まれないことがあります |
| JS の遅延読み込み・結合 | 基本的に問題なし | スライダーなどは Splide の読み込みを待ってから動く作りです。不具合があれば shitate-pro-blocks を除外してください |
仕組み：CSS に目印を付ける
プラグインは、自分が出力するすべてのスタイルシートの <link> と、scope ブロックの <style id="sb-scope-css"> に data-sb-css という属性を付けています。多くの最適化プラグインには「この属性が付いたタグは触らない」という除外設定があるので、そこに data-sb-css を登録すれば、プラグインの CSS だけを最適化の対象から外せます。
<!-- プラグインの CSS（<link>）には data-sb-css が付く -->
<link rel="stylesheet" id="sb-shared-css" href="…/shitate-pro-blocks/build/shared.css" data-sb-css>
<!-- scope ブロックの CSS も同じ -->
<style id="sb-scope-css" data-sb-css>…</style>ただし WordPress は、小さなブロック用 CSS を <link> ではなく <style> としてインライン化することがあります。インライン化された CSS には属性を付けられないため、除外したい場合はインライン化をやめて <link> のまま出す必要があります。それを切り替えるのが 2 つ目のフックです。
フック
プラグイン自体は、特定の高速化プラグインに合わせた処理を持っていません。代わりに次の 2 つのフック（shitate pro blocks 1.7.2 で追加）を用意しているので、お使いの最適化機能の除外設定と組み合わせて使います。
| 名前 | 用途 |
|---|---|
sb_style_tag_attributes（フィルター） | プラグインが出力する <link> と scope ブロックの <style> に付ける属性の配列。既定は data-sb-css だけです。最適化プラグインが「触らない目印」にする属性をここで足せます。 |
sb_inline_block_styles（フィルター） | false を返すと、WordPress によるブロック CSS のインライン化をやめ、<link> のまま出力します（既定は true）。属性で除外する場合に必要です。 |
設定例：WP Rocket の「使用されていない CSS を削除」
子テーマの functions.php か、コードスニペット系のプラグインに次のコードを追加します。
// 1. ブロック CSS をインライン化せず <link> のまま出す（属性を付けるため）
add_filter( 'sb_inline_block_styles', '__return_false' );
// 2. WP Rocket の「使用されていない CSS を削除」から、data-sb-css 付きの CSS を除外する
add_filter( 'rocket_rucss_skip_styles_with_attr', function ( $attrs ) {
$attrs[] = 'data-sb-css';
return $attrs;
} );
add_filter( 'rocket_rucss_external_exclusions', function ( $patterns ) {
$patterns[] = 'data-sb-css';
return $patterns;
} );
add_filter( 'rocket_rucss_inline_atts_exclusions', function ( $patterns ) {
$patterns[] = 'data-sb-css';
return $patterns;
} );追加したら、WP Rocket の「使用済み CSS を削除」（Clear Used CSS）と「キャッシュを削除」を実行し、シークレットウィンドウなどキャッシュのない状態で表示を確認してください。
ほかの高速化プラグイン
LiteSpeed Cache の UCSS、Autoptimize、Perfmatters などでも考え方は同じです。プラグインの除外設定が URL やファイル名で指定する方式なら shitate-pro-blocks を登録し、属性で指定する方式なら data-sb-css を登録します。別の属性を見る最適化プラグインには、フックで属性を足せます。
// 別の属性を見る最適化プラグイン向けに、目印の属性を追加する
add_filter( 'sb_style_tag_attributes', function ( $attributes ) {
$attributes['data-noptimize'] = ''; // 例: 値なしの属性。'1' のように値も指定できる
return $attributes;
} );確認方法
- ページのソースで、
shitate-pro-blocksの CSS の<link>にdata-sb-cssが付いていて、最適化後もそのまま残っているかを見ます。 - ブラウザーの検証ツールで
.sb-query-wrapなどのブロックを選び、高さが 1px になっていないか、入れ子のスタイルが当たっているかを見ます。 - 最適化機能をいったんオフにして表示が直るなら、その機能が原因です。
注意点
- 設定を変えたあとは、最適化プラグイン側で生成済みの CSS とページキャッシュを必ず削除してください。古い生成結果が残っていると直りません。
- プラグインのアップデートで CSS が変わった場合も、生成済みの CSS を作り直す必要があります。
- サポートが終了した OS の古いブラウザーでは
@scope自体が使えません。対象ブラウザーについては 製品ページの動作環境を参照してください。