クエリラップブロックの使い方

クエリラップは、WordPress 標準のクエリループの「投稿テンプレート」の中で使うブロックです。各項目を「サムネイル・タイトル・カテゴリ＋日付・抜粋」のカードにし、カード全体をクリック領域にします。本物のリンクはタイトルの 1 つだけなので、スクリーンリーダーに同じ記事へのリンクが何度も読まれることがなく、テキスト選択や中のボタン操作も邪魔しません（アクセシブルなカードパターン）。可変ポストが「ブロック単体で一覧を作る」のに対し、クエリラップは「クエリループの絞り込み・ページネーション・並び替えをそのまま使いたい」ときに選びます。

実際の表示

このマニュアルは shitate pro blocks が動いているサイト上にあるので、以下は画像ではなく本物のブロックです。実際にクリックしたり開閉したりして動きを確かめてください。

↑ コアのクエリループ（投稿 3 件・グリッド 3 列）の投稿テンプレートに、クエリラップを 1 つ置いた状態です。カードのどこをクリックしても記事が開きます。

基本的な使い方

1. コアのクエリループブロックを追加し、クエリ（投稿タイプ・件数・並び順など）を設定します。
2. 「投稿テンプレート」の中に最初から入っているタイトルや日付のブロックを削除し、代わりに「shitate advanced blocks」のクエリラップを 1 つ置きます。
3. エディターにはクエリループの実際の投稿でカードがプレビューされます。サイドバーでタイトルのタグ・日付・新しいタブを設定します。
4. 列数はクエリループ側の「グリッド表示」と列数設定で決めます。

クエリループの外に置くと「このブロックはクエリループの中に配置してください」と表示され、動作しません。

エディターでの設定画面

設定項目

• 投稿タイトルのタグ — div（初期値）／H2／H3／H4
• 日付 — 投稿日／更新日（更新がなければ投稿日、初期値）／投稿日と更新日／なし。「投稿日と更新日」では各日付の前に「投稿」「更新」のラベルが付き、更新がなければ投稿日だけを出します。更新の有無は表示書式で比べるので、同じ日の再編集は更新扱いになりません
• 新しいタブで開く
• 色（背景・文字）、枠線（角丸・色・太さ）、余白（パディング・上マージン）— コアの設定が使えます

抜粋は常に表示されます（可変ポストのような「抜粋を表示」トグルはありません）。消したい場合はフィルターを使います。

クリック領域の仕組み

• 本物のリンクはタイトルの <a class="-link -primary"> 1 つだけです。
• JS が無効なときは、そのリンクの ::after をカード全体に広げて当たり判定にします。
• JS が有効なときは、カードのクリックを 200ms の判定でタイトルリンクに転送します。長押し（テキスト選択）は転送せず、カード内のリンク・ボタン・フォーム部品は通常どおり動き、Ctrl／⌘／Shift クリックや中クリックは新しいタブで開きます。
• キーボードでフォーカスすると、カード全体にブランド色のアウトラインが付きます。

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

可変ポストと同じカード（.sb-card）なので、sb_card_args / sb_card_parts / sb_card_html で両方をまとめて、あるいは _query_wrap 付きのブロック別版でクエリラップだけを作り替えられます（設定キーの一覧は可変ポストの記事を参照）。

// クエリラップだけ抜粋を外し、サムネイルもリンクにする
add_filter( 'sb_card_args_query_wrap', function ( $args ) {
	$args['excerpt']    = false;
	$args['thumb_link'] = true;
	return $args;
} );

クエリラップの中にアクションフックを置くことはできませんが、投稿テンプレートの中にクエリラップと並べて置いたアクションフックは、各項目の投稿 ID で発火します。「クエリループで利用可能にする」をオンにしたフィールドの内容を、項目ごとに出すことができます。

出力される HTML と CSS

<div class="sb-query-wrap is-js">
  <article class="sb-card is-query-wrap">
    <div class="-thumb"><img …></div>
    <div class="-body">
      <div class="-title"><a class="-link -primary" href="…">タイトル</a></div>
      <div class="-meta"><span class="-terms">…</span><time class="-date is-modified">…</time></div>
      <p class="-excerpt">…</p>
    </div>
  </article>
</div>

サムネイルの比率は --sb-card-ratio（初期値 1.618 / 1）、角丸は --sb-radius、ホバーで画像が少し拡大します。

注意点

• CSS を作り直す高速化機能（WP Rocket の「使用されていない CSS を削除」など）を使うと、カードが 1px に潰れて見えなくなる実例があります。プラグインの CSS を最適化の対象から外してください（「高速化プラグインとの併用」を参照）。
• 1.7.0 でクラス名が sb-querywrap から sb-query-wrap に変わりました。1.7.0〜1.7.1 にはタイトルが見えなくなる不具合があり、1.7.2 で修正されています。
• タイトルのタグの初期値は 1.7.0 で div になりました。見出し構造に組み込みたい場合は H2〜H4 を明示的に選んでください。