shitate pro blocks

ユニークブロック

ブログ執筆を中心にshitateのトンマナに合わせたオリジナルデザインのブロックです。

吹き出し

制作者

このようにアイコンと吹き出しで会話しているようなデザインを入れることができます！

制作者

アイコンの反転や色の変更も自由です！
ただし吹き出し以外のデザインは用意していません、要望が多ければ検討します！

設定できること

• アバター画像と名前（名前は空でも可）
• アバターの位置（左 / 右）
• 吹き出しの背景色（サイドバーのカラーピッカー。CSS 変数 --sb-bubble-bg に入ります）
• 吹き出しの文字色（同じくカラーピッカー。CSS 変数 --sb-bubble-color に入り、吹き出しの中の文字色になります）

背景色や文字色をサイト全体でまとめて変えたいときは、テーマ側で変数を上書きします。

.sb-speech-bubble > .-body {
	--sb-bubble-bg: #fff7e6;
	--sb-bubble-color: #3a2a00;
}

目次ブロック

シンプルな目次を表示できます。「目次」の部分は任意でテキストを変更でき、見出しの並びを点にしたり、アコーディオンのように開閉させるようなこともできます（開閉式は初期状態で閉じておくことも可能）。投稿本文に置いても、サイトエディターで投稿テンプレートに置いても、その投稿の見出しから同じ目次が生成されます。

あえてシンプルなデザインにしているので、CSSで調整しやすいような設計にしています。

設定できること

• タイトル（空なら「Index」）
• 見出しレベル（H2 からどのレベルまで拾うか。初期値は H3 まで）
• 番号付き / 点のリスト
• 開閉式（アコーディオン）にするかどうか（cssとjsはdetailsブロックと共通）

見出しへのアンカーは自動で付与されるので、見出しブロック側で何かを設定する必要はありません。
「Index」の文字は初期値として入れていますが、以下のフックでサイト全体の初期値を変えられます（エディターのプレースホルダーにも反映されます）。

add_filter( 'sb_toc_default_title', fn() => '目次' );

スムーススクロールはフィルターで有効にします。html に scroll-behavior: smooth を当てるため、目次だけでなくページ内のアンカーリンクすべてが滑らかにスクロールします（動きを減らす設定のユーザーには適用されません）。固定ヘッダーがある場合はその高さぶんの余白も指定できます。

add_filter( 'sb_toc_smooth_scroll', '__return_true' );
add_filter( 'sb_toc_scroll_padding', fn() => '5rem' ); // 固定ヘッダーの高さ（省略可）

可変ポスト

ブロックプラグインの開発で、一番こだわった機能の一つです。

基本的にはカード形式で表示されますが、スマホ表示のときだけスライダーになるといったように、端末によって表示の仕方を自由に変えることができる記事一覧のブロックとなっています。
このページでは6枚表示をしていますが、スマホの時は3枚のスライダーになるようになっています。

カードの中身は「サムネイル・タイトル・カテゴリ＋日付・抜粋」で固定されています。中身をブロックで組み替える代わりに、設定とフックで調整する設計です。

設定できること

• クエリ：投稿タイプ、タクソノミーとターム、表示件数（1〜24）
• 表示：表示モード（自動 / グリッド / スライダー）、列数（1〜6）、スマホのみスライダー、ループ再生、ドット、矢印
• カード：タイトルのタグ（div / H2 / H3 / H4、初期値は div）、日付（投稿日 / 更新日（更新がなければ投稿日）/ 投稿日と更新日 / なし、初期値は更新日）、抜粋の表示

「自動」は、投稿数が列数より多いときだけスライダーになるモードです。カードのホバーはブログリンクと同じで、枠線がブランド色になり薄い影が付きます。

列数は画面幅に合わせて変わります

グリッドの列は固定ではなく、「コンテンツ幅 ÷ 列数」を 1 列の最小幅として自動で折り返します。狭い画面では 1 列ずつ減り、幅広・全幅に置くと増えます。列数の初期値と間隔はテーマ側の CSS 変数で変えられます。

:root {
	--sb-post-list-cols: 4;            /* 列数の初期値（ブロックで列数を指定した場合はそちらが優先） */
	--sb-post-list-gap: 1rem;           /* カードの間隔（初期値は --st-space-l） */
	--sb-card-ratio: 4 / 3;            /* サムネイルの比率（初期値は 1.618 / 1） */
}

カードをフックで組み替える

カードは 3 段階のフィルターで変更できます。それぞれ全ブロック共通版と、ブロック別版（_post_list / _query_wrap）があります。

• sb_card_args：設定値の上書き（title_tag / date_type（published / modified / both / 空文字）/ date_format / date_labels / date_label_published / date_label_modified / taxonomy / terms_link / thumb_size / thumb_sizes / thumb_link / excerpt / excerpt_words）
• sb_card_parts：thumbnail / title / meta / excerpt の HTML 配列。追加・削除・並べ替えができます
• sb_card_html：最終的なカードの HTML

// 日付の書式を変え、可変ポストだけ抜粋を外す
add_filter( 'sb_card_args', function ( $args ) {
	$args['date_format'] = 'Y.m.d';
	return $args;
} );

add_filter( 'sb_card_args_post_list', function ( $args ) {
	$args['excerpt'] = false;
	return $args;
} );

// カードにカスタムフィールド「price」を追加する
add_filter( 'sb_card_parts', function ( $parts, $post_id ) {
	$price = get_post_meta( $post_id, 'price', true );
	if ( $price ) {
		$parts['price'] = '<p class="-price">' . esc_html( $price ) . '</p>';
	}
	return $parts;
}, 10, 2 );

スライダー

Splide という JS を使って、いくつかのスライダーを作ることができます。以下の3つから選んでいただきます

• 背景も入れられる要素ごとでスライドするブロックスライダー
• サムネイルスライダーもついたメディアスライダー
• コーポレートサイトでよくある、複数のロゴが横に流れ続けるようなものを想定したロゴスライダー

設定できること

• 共通：切り替え効果（スライド / フェード。フェードは常に 1 枚ずつで、ループ再生は最後から最初へ戻る動作）、1 画面あたりの枚数、ループ再生、自動再生（間隔 2〜10 秒、ホバーで止める、画面外では止める）、切り替えの速さ、矢印（表示と位置: 端にかかる / 内側 / 下にドットと並べる）、ドット（点 / 数字 / 進捗バー）、現在のスライドを中央に、ドラッグ / スワイプの許可。「スマホ（767px 以下）」パネルで「スマホでは別の設定を使う」をオンにすると、枚数・自動再生・矢印・ドット（メディアではサムネイル帯の表示、ロゴでは幅と速さ）をスマホ用に分けて設定できます。オフのときは共通設定が全画面に効き、枚数だけ画面幅に応じて自動で減ります（1023px 以下で最大 2、767px 以下で 1）
• ブロックスライダー：スライドごとに背景画像・オーバーレイの色と濃さ・最小高さ。スライドの中には任意のブロックを入れられます
• メディアスライダー：画像はブロック本体で管理します。画像が無いときはプレースホルダーからアップロードまたはメディアライブラリで選択（ドラッグ＆ドロップ可）、画像があるときは各画像にホバーで「前へ・後ろへ・削除」、グリッドの下から追加、ツールバーの「画像を編集」でメディアライブラリ上で全体を並べ替えできます。下にサムネイル帯を表示できます。スライドの高さ（元のまま / 16:9 / 4:3 / 3:2 / 1:1）、キャプションの表示（メディアライブラリのキャプション）、画像ごとのリンク（グリッドのリンクボタンから。新しいタブも可）も設定できます。画像とサムネイルの角は常に四角です
• ロゴスライダー：1 枚の幅、流れる速さ。枚数が少ないときは自動で埋めて余白を作りません

画像は保存時の原寸ではなく、表示に合ったサイズ（srcset 付き）で配信されます。サイズを変えたい場合はフィルターで指定できます。

add_filter( 'sb_slider_image_size', fn() => 'large' );      // メディア / ロゴのスライド画像（初期値: メディア 2048、ロゴ medium）
add_filter( 'sb_slider_thumb_size', fn() => 'medium' );     // サムネイル帯（初期値: thumbnail）
add_filter( 'sb_slider_bg_size', fn() => '1536x1536' );      // ブロックスライダーの背景（初期値: 2048x2048）
add_filter( 'sb_slider_eager_count', fn() => 2 );           // 遅延読み込みしない先頭の枚数（初期値: 1 画面の枚数）

スライドの背景オーバーレイはスライドごとの設定のほか、CSS 変数 --sb-overlay（濃さ 0〜1）と --sb-overlay-color でも調整できます。

ブログリンク

URL を入れるだけで、リンク先のタイトル・説明文・画像（OGP）を取得してリンクカードにします。取得した内容はキャッシュされ、サイドバーの「更新」ボタンで取り直せます。自サイト内のページは投稿データをそのまま使います。

合わせて読みたい トップページ案A（新デザイン） リリースキャンペーン　12月31日までのご購入で、更新後もずっと50%オフ（コード SHITATE09）　料金を見る →… shitate

設定できること

• URL、タイトル上の小さなラベル（初期値は「合わせて読みたい」。空欄なら初期値、「ラベルを表示」をオフで非表示）
• 画像の表示 / 説明文の表示
• 新しいタブで開く
• 「更新」ボタン（キャッシュを捨てて取り直す）

取得した内容は 30 日間キャッシュされ、1 週間より古くなると表示はそのままにバックグラウンドで取り直します。ページの表示が外部サイトの応答を待つことはありません。「古い」とみなす期間とラベルの初期値はフィルターで変えられます。

add_filter( 'sb_blog_link_fresh_ttl', fn() => DAY_IN_SECONDS ); // 初期値は WEEK_IN_SECONDS
add_filter( 'sb_blog_link_default_label', fn() => '関連記事' ); // ラベルの初期値

レイアウト

ブレークポイントを持たないレスポンシブグリッドです。「1列の最小幅」を決めるだけで、画面幅に応じてボックスが自動で折り返します。各ボックスには自由にブロックを入れられ、ボックス全体をリンクにしたり、背景画像を敷くこともできます。このページの冒頭もこのブロックで組んでいます。

設定できること

• レイアウト：1 列の最小幅（例: 16rem、240px）。幅広・全幅にも対応
• box のリンク：URL を設定すると box 全体がリンクになります。保存されるのは <a class="sb-box" href="…">（box 自体がリンク要素、クラスはそのまま）なので、JS なしで動き、ブラウザの検証ツールでも中の要素をそのまま選べます。リンクの中にリンクやボタンは置けないため、中にある場合はサイドバーに警告が出ます。新しいタブで開く・rel・スクリーンリーダー向けのリンク名も設定できます

セマンティックブロック

ユニークブロックのように用途とデザインが決め打ちされたものではなく、details / dl / dialog といった HTML タグをそのまま扱えるシンプルなブロック群です。

制作の現場でのコミュニケーションを円滑にできるだろうという想定で名称をタグそのものにしています。

デザインは最低限に抑え、角丸なども初期状態では付けていません。角丸は CSS 変数でまとめて指定できます（吹き出し・目次・カード・details・dialog に共通）。

:root {
	--sb-radius: 0.75rem;   /* カード・吹き出し・ボタンなどの角丸 */
	--sb-radius-s: 0.25rem; /* 小さな要素（ラベル・閉じるボタンなど） */
}

details

いわゆるアコーディオンのブロックになっています。

初期状態で開く・閉じるをパソコンとスマホそれぞれで設定できるほか、「ひとつ開くと他の項目を閉じる」設定にすれば、連なっている項目のうち1つだけが開いた状態になります。

設定できること

• 親：スタイル（標準 / 枠線あり）、「ひとつ開くと他の項目を閉じる」
• 各項目：タイトル、PC で初期状態を開く、スマホで初期状態を開く（境界は 768px）
• 構造化データ：「構造化データ（schema.org FAQPage）を出力」をオンにすると、各項目のタイトルを質問、中身の文章を回答として JSON-LD を出力します（dl ブロックと同じ形式）。項目が FAQ のときだけオンにしてください

開閉アイコンはプラス / マイナスの SVG をマスクで表示しており、閉じているときは --sb-icon-close、開いているときは --sb-icon-open を使います。回転しながらクロスフェードするので、どんなアイコンに差し替えても動きは安定します。

.sb-details {
	--sb-icon-close: var(--sb-icon-chevron-down); /* 内蔵アイコン: plus / minus / chevron-* / arrow-* / triangle-up / triangle-down */
	--sb-icon-open: var(--sb-icon-chevron-up);
}

/* 自前の SVG を使う場合 */
.sb-details {
	--sb-icon-close: url("data:image/svg+xml,...");
}

PCでは初期状態で開きます

開発者

開いた内容の部分には自由にブロックを挿入することができます

SPでは初期状態で開きます

ここを開くと上のブロックは閉じるようになっています。
この機能は解除もできます

どちらでも閉じています。

親ブロックでは「ひとつ開くと他の項目を閉じる」設定を用意しています。
これを使うことで複数のdetailsが表示されなくできるため、画面のスペースを節約することができます。

dl

このブロックは、内容の説明や FAQ（Q&A、よくある質問）のようなデザインで活用されることを前提にしたブロックです。
「用語（dt）」と「その説明（dd）」のセットを定義するリストを作成するためのタグです。

主な特徴と使い方は以下の通りです。

構成要素

• <dl>: リスト全体を囲む。
• <dt>: 用語や見出し（Definition Term）。
• <dd>: その説明や詳細（Definition Description）。

リスト内には複数の<dt>や<dd>を配置することも可能で、柔軟な情報のグループ化ができます。

構造化データ（schema.org の FAQPage）としての書き出しもできます。用語が質問、説明が回答として出力されます（Google は現在 FAQ リッチリザルトの表示を限定しています）。

設定できること

• 用語（dt）と説明（dd）の追加・並べ替え。説明の中には任意のブロックを入れられます
• 構造化データ（FAQPage）を出力するかどうか

このブロックの用途は何ですか？

辞書のような用語集、FAQ（質問と回答）、製品の仕様リストなど、項目と内容が対になっている情報の構造化に適しています。

意味的に「対であること」をブラウザや検索エンジンに正しく伝えられるため、アクセシビリティやSEOの観点で有効です。

dialog

見た目は普通のボタンですが、クリックをするとモーダルポップアップで違う要素を表示することができます。

最近はスマホでの閲覧も増えているため、小さい画面で詳細をすぐに見ることができるというのがメリットとしてあります。

クリックすると要素が表示されます

×

開発者

ここはある程度初期設定を細かく設定しています。
右上のボタンを押すか、背景の黒い部分を押すことで解除されます

設定できること

• ボタンの文言、スタイル（塗り / 枠線）、サイズ（小 / 中 / 大）、配置、矢印アイコンの有無
• モーダルの背景色（CSS 変数 --sb-dialog-bg）
• モーダルの中には任意のブロックを入れられます。閉じるボタン・背景クリック・Esc キーで閉じます

矢印アイコンの SVG はフィルターで差し替えられます。

add_filter( 'sb_modal_arrow_svg', function () {
	return '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2"/></svg>';
} );

if

PHP の if / else if / else を設定できるブロックです。分岐（枝）を上から順に評価し、最初に条件を満たした枝だけを表示します。エディターでは各枝のラベルの横に、設定した条件の要約が表示されます。

条件に使えるもの

• いつ・端末：開始日と終了日（終了日に日付だけを入れた場合はその日の終わりまで）、端末（スマホのみ / PC のみ）。端末はブラウザの User-Agent でサーバー側が判定します（画面幅ではありません）。ページキャッシュを使っているサイトでは最初の訪問者の判定が保存されるので、端末・ログイン状態・日付の条件はキャッシュの対象外にするかキャッシュを使わないでください
• 反転：条件を満たさないときに表示（NOT）

複数の条件を設定した枝は、すべてを満たしたときに表示されます。「else」の枝はどの条件にも当てはまらなかったときの受け皿です。

表示されるのは選ばれた枝だけですが、SEO プラグインが本文から自動生成する説明文（meta description）には、すべての枝の文章が含まれることがあります。気になる場合は説明文を手動で設定してください。

今あなたはPCで見てくれてますね？
これはスマホでは見れない文字列です

scope

開発者

ちなみに、PCで追従している目次はこのブロックを追加して、デザインの調整と表示箇所に応じて目次の色が変わるjsを追加しています。

設定できること

• タグ：div / section / article / nav / main / aside / hgroup / header / footer（main はページに 1 つまで）
• 色と余白：サイドバーの「色」で文字色と背景色、「寸法」でパディングを設定できます（WordPress 標準の設定なのでテーマのパレットやプリセットが使えます）
• 幅広・全幅
• フロント・エディタ タブ：このブロックにだけ効く CSS。ネストが使え、セレクタなしの宣言はブロック自身に当たります。エディターとフロントの両方に効きます
• フロントのみ タブ：同じスコープの CSS ですが、フロントだけに効き、エディターには適用されません。ホバー効果やアニメーション、要素の非表示など、編集の邪魔になる指定をこちらに書きます。フロント・エディタ タブの内容と一緒に、同じクラスの規則として出力されます
• エディタのみ タブ：エディターのプレビューだけに効く CSS で、フロントには一切出力されません。枠線やプレースホルダー、編集中だけの余白など、編集しやすくするための指定に使います
• JS タブ：フロントでブロックの直後に 1 回だけ実行される JS。ブロック要素が el として渡されます。エディター内では実行されません
• コードエディター：CSS / JS の入力欄は VS Code 風のコードエディター（CodeMirror）です。シンタックスハイライトのほか、Tab / Shift+Tab でインデント、Enter で自動インデント、括弧の自動閉じ、Ctrl+/（⌘+/）でコメント切替、Ctrl+F（⌘+F）で検索、Alt+↑↓ で行の移動、Ctrl+D（⌘+D）で同じ語の複数選択ができます。エディター本体はタブを最初に開いたときだけ読み込まれ、フロントには載りません

/* CSS タブに書く例: ブロック自身の背景と、中の段落の色 */
background: #fffaeb;
padding: 24px;

p {
	color: #c80000;
}

// JS タブに書く例: ブロック内のボタンにクリック処理を付ける
el.querySelector('button')?.addEventListener('click', () => {
	el.classList.toggle('is-open');
});

JS タブは任意のコードを実行できるため、WordPress のカスタム HTML ブロックと同じく unfiltered_html 権限（管理者・編集者）が必要です。権限のないユーザーが保存すると JS は取り除かれます。

マスターブロック

マスターブロックは、制作の知識がない方向けではなく、制作に精通している人がクライアントに納品するための土台作りとして、幅広く活用してもらえるためのブロックです。

基本的には、それ単体では意味をなさず、他のブロックやPHPのカスタマイズと組み合わせることでノーコードツールではできない高度なカスタマイズが可能になります。

ただし、誤った使い方をしてしまうと逆にサイトの表示に影響を与えてしまう場合があるので、扱いにはご注意ください。

開発者

もちろん、マスターブロックを使わなくても高度なデザインのサイトを作ることは可能です。
このカテゴリのブロックはビジネスサイトで高い効果が期待できるものになっています。

アクションフック

クラシックテーマであったアクションフックを独自で作ることができます。WP Code のようなプラグインや自作プラグインで作った内容を表示したり、ブロックテーマだけではできないカスタマイズを可能にしてくれます。

フィールドブロックと組み合わせることで、一定のテンプレートを使い回す必要がある製品紹介やお客様の声などでは、大きく貢献してくれると思います。

設定できること

• フック名：小文字の英数字と – _ のみ。発火するフックは sb_action_{名前}
• モード：「フィールド」は同名のフィールドブロックの内容をこの位置に出力（PHP で加工も可）。「PHP」はフィールドを使わず、PHP の出力だけを表示
• エディター用のメモ（フロントには出ません）

PHP からの使い方

フィールドの内容 $field、ブロック属性、ブロック本体、対象の投稿 ID の 4 つが渡されます。echo した内容がそのまま出力になります（フィールドモードで何も echo しなければフィールドの内容がそのまま出ます）。

// フック名「catch」のブロックの位置に出力する
add_action( 'sb_action_catch', function ( $field, $attributes, $block, $post_id ) {
	echo '<div class="catch">' . $field . '</div>';
}, 10, 4 );

// PHP モードでカスタムフィールドを出す（クエリループ内では各項目の投稿 ID が渡る）
add_action( 'sb_action_price', function ( $field, $attributes, $block, $post_id ) {
	echo esc_html( get_post_meta( $post_id, 'price', true ) );
}, 10, 4 );

// すべてのアクションフックブロックで発火する共通フック
add_action( 'sb_action', function ( $name, $field, $attributes, $block, $post_id ) {
	// $name にフック名が入る
}, 10, 5 );

アクションフックブロックは扱い方を間違えると、ページの表示に大きく影響してしまうため、扱いにはご注意ください。

フィールド

フィールドブロックで囲われた要素は、そのままでは実際のページに表示されることはありません。アクションフックブロックと組み合わせることで、複数のページの内容をコントロールするための土台を作ることができます。

設定できること

• フィールド名：小文字の英数字と – _ のみ。同名のアクションフックブロックが出力先になります。名前は誤操作防止のためロックされ、「名前を変更」で解除します
• クエリループで利用可能にする：オンにすると、アーカイブなどのクエリループ（クエリラップ含む）に置いた同名のアクションフックが、各項目の投稿からこの内容を取り出して出力します。オフのフィールドは一覧には出ません
• PHP フック：そのフィールド用の add_action のひな形を表示し、「コピー」ボタンで貼り付けられます

使い方の例: 各記事に「キャッチコピー」フィールドを置いてクエリループ対応をオンにし、記事一覧のテンプレートにフック名「catch」のアクションフックを置くと、一覧のカードごとにその記事のキャッチコピーが出ます。

クエリラップ

WordPress 標準のクエリループの中で使うブロックです。各項目を「サムネイル・タイトル・カテゴリ＋日付・抜粋」のカードにし、カード全体をクリック領域にします。本物のリンクはタイトルの1つだけなので、スクリーンリーダーに同じ記事へのリンクが何度も読まれることがなく、テキスト選択や中のボタン操作も邪魔しません（アクセシブルなカードパターン）。

設定できること

• 投稿タイトルのタグ（div / H2 / H3 / H4、初期値は div）
• 日付（投稿日 / 更新日（更新がなければ投稿日）/ 投稿日と更新日 / なし、初期値は更新日。「投稿日と更新日」では各日付の前に「投稿」「更新」のラベルが付き、更新がなければ投稿日だけを出します。更新の有無は表示書式で比べるので、同じ日の再編集は更新扱いになりません）
• 新しいタブで開く

可変ポストと同じカードなので、sb_card_* フィルターで両方のカードをまとめて、あるいは sb_card_parts_query_wrap のようにブロックごとに作り替えられます（可変ポストの項を参照）。中に置いたアクションフック（クエリループ対応のフィールド）も各項目の投稿を基準に出力されます。

テキストツールバー

段落や見出しのツールバーに shitate pro blocks 専用のボタンが増えます。WordPress 標準の装飾と区別しやすいように、ひとつのアイコンにまとめてあります。

段落や見出し、コアのタブのラベルはもちろん、吹き出しの名前・details のタイトル・dl の用語・dialog のボタン文言・目次のタイトルといった、このプラグインのブロック独自のテキスト欄でも同じボタンが使えます。

• span._op：選択した文字を <span class="_op"> で囲みます。見た目はテーマ側の CSS で自由に定義できます。
• span.sb-marker：このような細い帯のマーカーを引きます。
• wbrタグ：文章の「ここでなら改行してよい」位置を指定します。［wbr］ を含む要素は word-break: keep-all になるので、東京都渋谷区神宮前一丁目二番三号 のように、意図しない位置で日本語が折り返されるのを防げます。

スパンの種類はフィルターで追加・変更でき、［wbr］ とその CSS はそれぞれ無効化できます。

// スパンを追加する（class / ボタン名 / ダッシュアイコン名 / フロントとエディターに出す CSS）
add_filter( 'sb_span_formats', function ( $formats ) {
	$formats['note'] = array(
		'class' => '_note',
		'title' => 'span._note',
		'icon'  => 'editor-textcolor',
		'css'   => 'color:#c80000;font-weight:bold;',
	);
	unset( $formats['marker'] ); // 既存のスパンを外す
	return $formats;
} );

add_filter( 'sb_wbr_enabled', '__return_false' );     //  のボタンとショートコードを無効化
add_filter( 'sb_wbr_css_enabled', '__return_false' ); // keep-all の CSS だけ無効化
add_filter( 'sb_wbr_css_selector', fn() => 'h1, h2, h3, p' ); // CSS を当てる要素を絞る

テキストアクション

よく使う文字列（電話番号、営業時間、キャンペーンの一文、価格など）に名前を付けて登録し、エディターのテキストから呼び出す仕組みです。本文に保存されるのは参照だけで、設定の文字列を変えればサイト内の使用箇所がまとめて変わります。登録の手順、エディターでの挿入と編集、PHP から値を供給するフィルターなどの詳細は テキストアクションの使い方（マニュアル） にまとめています。

→ この文字列はテキストアクション「マニュアル用デモ」から差し込まれています（設定で変えると、この場所もまとめて変わります）

多言語対応

エディターの表示とフロントの文言は、日本語のほか英語・フランス語・スペイン語・イタリア語・オランダ語・ポルトガル語に対応しています。サイトの言語設定に合わせて自動で切り替わり、対応外の言語では英語で表示されます。

ダッシュボード

管理画面のダッシュボードに、次のウィジェットを追加します（表示は「表示オプション」で個別にオフにできます）。

• サイト情報（管理者のみ）：WordPress のバージョンとロケール、テーマ（子テーマなら親テーマも）、PHP、shitate pro blocks のバージョン、有効化中のプラグイン一覧（バージョン込み）を表示します。「コピー」ボタンで全体をテキストとしてコピーできるので、サポートへの問い合わせにそのまま貼り付けてください。内容はフィルター sb_site_info で変更できます
• shitate update notes：プラグインとテーマの最新のアップデート情報（最新 3 件とアーカイブへのリンク）
• shitate news：公式サイトからのお知らせ

開発者向けリファレンス

制作者がテーマや functions.php から調整できる CSS 変数とフィルターの一覧です。詳しい使い方は各ブロックの項を参照してください。

CSS クラスの命名

クラス名は先頭を見れば出所が分かるようになっています。BEM のような命名規則を知らなくても、次の 3 つだけ覚えれば独自 CSS が書けます。

• sb- で始まる：shitate pro blocks のブロック本体、または複数のブロックで使う共有部品（sb-card sb-toggle sb-button）。単独で意味を持ちます。名前はブロック名そのままです（可変ポスト = sb-post-list、クエリラップ = sb-query-wrap）。
• - で始まる：ブロックの中の部品（-title -body -link など）。単独では意味を持たず、親の sb-〇〇 と組で使います。任意のブロックを入れる容器は必ず -body です。
• is- / has-：状態や変種（is-open is-modified has-bg）。それ以外の wp-block-* や splide__* は WordPress とライブラリが付けるクラスで、プラグインの CSS はそれらに依存しません。

部品は親のスコープ内で、子セレクタ > を使って指定してください。同じ部品名（-title など）は別のブロックにも存在するため、子孫セレクタで書くと入れ子になったブロックにも当たります。

/* 部品は親と組で、> でたどる */
.sb-card > .-body > .-title {
	font-size: 1.125rem;
}

/* 状態は is- / has- */
.sb-details-item.is-open > .-title {
	color: var(--st-color-brand);
}

/* @scope を使うと > なしで安全に書ける（対応ブラウザのみ） */
@scope (.sb-card) {
	.-title { font-size: 1.125rem; }
}

文字装飾のクラスは sb-marker と、例外として短い _op の 2 つです。

ライセンス（100% GPL）

shitate pro blocks は 100% GPL です。PHP・JavaScript・CSS・アイコン・翻訳を含むすべてのファイルを GPL v2 以降で提供し、同梱するライブラリも GPL 互換ライセンス（Splide と auto-scroll 拡張: MIT、Tabler Icons: MIT、Lucide: ISC）です。ご購入いただくのは自動更新とサポートを受ける権利で、ライセンスキーがなくてもブロックは動作し、GPL の条件のもとで何サイトでもお使いいただけます。

高速化プラグインとの併用

ページキャッシュや、CSS をそのまま結合・圧縮するだけの機能は問題ありません。一方、CSS を作り直す機能（WP Rocket の「使用されていない CSS を削除」、LiteSpeed Cache の UCSS、Critical CSS 系）は @scope や入れ子の CSS を解釈できないことがあり、たとえばクエリラップのカードが 1px に潰れて見えなくなります。プラグインは特定の高速化プラグインに合わせた処理を持ちません。代わりに次の 2 つのフックを用意しているので、お使いの最適化機能の除外設定と組み合わせてプラグインの CSS を対象から外してください。

• sb_style_tag_attributes：プラグインが出力する <link> と scope ブロックの <style> に付ける属性（配列、既定は data-sb-css）。最適化プラグインが「触らない目印」にする属性をここで足せます
• sb_inline_block_styles：false を返すと、WordPress がブロック CSS を <style> にインライン化するのをやめ、<link> のまま出します（インライン化された CSS には属性を付けられないため）

// 1. ブロック CSS をインライン化せず <link> のまま出す（属性を付けるため）
add_filter( 'sb_inline_block_styles', '__return_false' );

// 2. 必要なら属性を追加（既定で data-sb-css が付きます）
add_filter( 'sb_style_tag_attributes', function ( $attributes ) {
	$attributes['data-no-optimize'] = '1'; // 例: 別の最適化プラグインが見る属性
	return $attributes;
} );

// 3. WP Rocket の「使用されていない 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;
} );

設定後は最適化プラグイン側で生成済みの CSS とページキャッシュを削除してください（WP Rocket なら「使用済み CSS を削除」と「キャッシュを削除」）。

動作環境

WordPress 7.0 以降、PHP 7.4 以降で動作します（PHP 8.5 まで動作確認済み）。ブラウザは各ベンダーがサポート中の最新版（Safari 17.4 以降、Chrome / Edge 118 以降、Firefox 128 以降、およびそれらのモバイル版）を対象にしています。CSS の @scope など比較的新しい仕様を使っているため、サポートが終了した OS の古いブラウザ（iOS 16 以前の Safari、Windows 7 / 8.1 の Chrome 109 など）では、レイアウトは保たれますがブロックの装飾の一部が反映されません。CSS を結合・縮小するプラグインをお使いの場合は最新版でご利用ください。 CSS を作り直すタイプの最適化（Remove Unused CSS・Critical CSS など）は @scope を壊すことがあります。その場合はプラグインの CSS を最適化の対象から外してください（下の「高速化プラグインとの併用」）。

CSS 変数

フィルター・アクション