可変ポストは、条件に合う投稿をカード形式で一覧表示するブロックです。「PC ではグリッド、スマホではスライダー」のように、端末によって表示の仕方を変えられるのが特徴です。カードの中身は「サムネイル・タイトル・カテゴリ＋日付・抜粋」で固定されていて、ブロックで組み替える代わりに設定とフックで調整する設計になっています。
実際の表示
このマニュアルは shitate pro blocks が動いているサイト上にあるので、以下は画像ではなく本物のブロックです。実際にクリックしたり開閉したりして動きを確かめてください。
↑ 固定ページを 3 件、グリッド表示（スマホのみスライダー）。実際のサイトのページが表示されています。
基本的な使い方
- 「shitate unique blocks」から可変ポストを追加します。エディターには実際の投稿がプレビューされます（プレビュー内のリンクは押せません）。
- サイドバー「クエリ」で投稿タイプと、必要ならタクソノミー・タームを選びます。
- 「表示」で表示モードと列数、スマホでの扱いを決めます。
- 「カード」でタイトルのタグ、日付の種類、抜粋の有無を選びます。
エディターでの設定画面
設定項目
クエリ
- 投稿タイプ — 公開表示できる投稿タイプから選択（初期値: 投稿）。変えるとタクソノミーとタームはリセットされます。
- タクソノミー — 選んだ投稿タイプに紐づくものから選択。「なし」なら絞り込みません。
- ターム — タクソノミーを選んだときだけ表示。複数選べます。
- 表示する投稿数 — 1〜24（初期値 6）。
並び順は日付の降順（新しい順）固定です。並び替え・オフセット・現在の投稿の除外の設定はありません。
表示
- 表示モード — 自動（初期値）／グリッド／スライダー。「自動」は、取得した投稿数が列数より多いときだけスライダーになります。
- 列数 — 1〜6（初期値 3）。グリッドの列数であり、スライダーのときは 1 画面に見せる枚数です。
- スマホのみスライダー — PC はグリッドのまま、767px 以下だけスライダーにします。
- ループ再生／ドット／矢印 — スライダーになる設定のときだけ表示されます。
カード
- 投稿タイトルのタグ — div（初期値）／H2／H3／H4。ページの見出し構造に合わせて選びます。
- 日付 — 投稿日／更新日（更新がなければ投稿日、初期値）／投稿日と更新日／なし。「投稿日と更新日」は各日付の前に「投稿」「更新」のラベルが付き、更新がなければ投稿日だけを出します。更新の有無は表示書式で比べるので、同じ日の再編集は更新扱いになりません。
- 抜粋を表示 — オン（初期値）で 32 語の抜粋を表示します。
列数は画面幅に合わせて変わります
グリッドの列は固定ではありません。「コンテンツ幅 ÷ 列数」を 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） */
--sb-radius: 0.5rem; /* カードの角丸（初期値 0） */
}スライダーのときは、1023px 以下で最大 2 枚、767px 以下で 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（初期値 medium_large）/thumb_sizes/thumb_link/excerpt/excerpt_words（初期値 32）/new_tab/title_classsb_card_parts—thumbnail/title/meta/excerptの HTML 配列。追加・削除・並べ替えができます（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 );
// 部品の並びを変える（抜粋をタイトルの直後に）
add_filter( 'sb_card_parts_post_list', function ( $parts ) {
$excerpt = $parts['excerpt'] ?? '';
unset( $parts['excerpt'] );
$reordered = array();
foreach ( $parts as $key => $html ) {
$reordered[ $key ] = $html;
if ( 'title' === $key ) {
$reordered['excerpt'] = $excerpt;
}
}
return $reordered;
} );出力される HTML とクラス
<div class="sb-post-list is-grid" data-sb-columns="3">
<ul class="-track">
<li class="-item">
<article class="sb-card is-post-list">
<a class="-thumb"><img …></a>
<div class="-body">
<div class="-title"><a class="-link">タイトル</a></div>
<div class="-meta"><span class="-terms">…</span><time class="-date is-modified">…</time></div>
<p class="-excerpt">…</p>
</div>
</article>
</li>
</ul>
</div>カードのスタイルはクエリラップと共通（.sb-card）です。独自 CSS を書くときは .sb-card > .-body > .-title のように親と組で指定してください。カードのホバーでは画像が少し拡大します。
注意点
- エディターのプレビューは常にグリッド表示です。スライダーの動きはフロントで確認してください。
- 1.7.0 でタイトルのタグの初期値が div、日付の初期値が更新日に変わりました。明示的に選んでいない既存ブロックは新しい初期値で表示されます。
- サムネイルには列数に応じた
sizesが自動で付き、表示幅に近い画像が選ばれます。