【ブロックテーマ入門⑤】サイトを支えるナビゲーションとクエリループ

今回は、サイトのあちこちで「勝手に動いてくれている仕組み」についてです。

ヘッダーのメニューや、トップページの新着記事一覧。これらはテーマをいれた時に、テーマが「ナビゲーション」「クエリループ」というブロックを使ってあらかじめセッティングしてくれているものです。

一から作る必要はありません。「あぁ、ここはあのブロックが頑張ってくれてるんだな」と正体を知っておくだけで、カスタマイズの安心感が格段に変わります!

ナビゲーションブロック:サイトの「案内板」

AD – 読み進める前のひとやすみ

サイトの一番上にあるメニューも、ブロックテーマでは一つのブロックとして扱います。
「リンクを並べるだけなのに、なぜか難しい…」と感じるのは、これが「メニューという大きな箱」の中に「各ページへのリンク」が入っている二重構造だからです。

💡 リストビューが命!

ナビゲーションはとにかく「今どこを触っているか」を見失いやすいブロックです。ここでも「リストビュー」を開きながら、メニュー全体の設定なのか、個別のリンクの設定なのかを確認するのが一番の近道です。

クエリループブロック:自動で届く「新聞受け」

AD – 読み進める前のひとやすみ

「新しい記事を書いたら、トップページに自動で表示させたい」
そんな魔法を叶えるのがクエリループブロックです。

📦 「データの呼び出し」を視覚化している

「どんな記事を(クエリ)」「どう並べるか(ループ)」を決めるだけで、あとはWordPressが勝手に最新記事を拾い集めてきてくれます。

「仕組み」と「デザイン」を分けて考えよう

AD – 読み進める前のひとやすみ

ナビゲーションやクエリループがややこしいのは、一つのブロックの中で「何を表示するか(仕組み)」「どう見せるか(デザイン)」の2つを同時に設定する必要があるからです。

設定の種類 ナビゲーションの場合 クエリループの場合
⚙️ 仕組み
(ロジック)
「どのメニュー」を表示するか?(メニューの選択) 「どのカテゴリー」を「何件」並べるか?(クエリの設定)
🎨 デザイン
(スタイル)
横並びか、縦並びか? 文字の色やフォントは? 画像とタイトルの位置関係は? 背景に色をつけるか?

ナビゲーションブロックでよくある『メニューが消えた!』パニックの防ぎ方

AD – 読み進める前のひとやすみ

「さっきまであったメニューが真っ白になった!」「リンクを足そうとしたら変なことになった!」
そんな時は、ほぼこの3つのどれかです。順番に確認すれば、すぐ元に戻せます。

鉄則 1

「メニュー全体(親)」を選択しているか?

ナビゲーションは、「全体(親)」と「リンク(子)」で構成されています。 子を選んでいると、全体の設定は変更できません。

💡 解決: リストビューで「ナビゲーション」を直接クリックする

鉄則 2

別のメニューを選んでいないか?

ナビゲーションは複数作れます。 意図せず別の(空の)メニューを選ぶと、何も表示されなくなります。

💡 解決: 設定パネルの「メニューを選択」から、元のメニュー(例:メインメニュー)を選び直す

鉄則 3

ナビゲーションの変更が保存されているか?

保存時に「ナビゲーション」にチェックが入っていないと、 変更が保存されず元に戻ります

💡 解決: 保存時に「ナビゲーション」にチェックが入っているか確認する

詳しい使い方はこちらで👇

WordPressナビゲーションブロック攻略|UIの変化に惑わされない「考え方」の基本 目次ナビゲーションブロックは「中身が入れ替わる箱」と考えるメニュー選択:2つの組み立てルート「リスト」と「リンク」の違いスマホ表示(オーバーレイ)の正体コラム:「メニュー選択」はどこ? WordPressのバージョンによ […]

クエリループで、特定のカテゴリーを表示させる方法

AD – 読み進める前のひとやすみ

クエリループを置いた直後は、すべての記事が新しい順に並んでいます。ここから「特定のカテゴリーだけ」を抜き出す設定をしていきましょう。

🛠️ カンタン3ステップ設定

  1. クエリループ全体を選択: リストビューを使って、一番外側の「クエリループ」を掴みます。
  2. 「設定(歯車)」パネルを開く: 右側の設定パネルで「クエリをループ」という項目を探します。
  3. 「タクソノミー(カテゴリー)」で絞り込む: 「絞り込み」の中にある「タクソノミー」を選択し、表示したいカテゴリー名を入力して選びます。

詳しい使い方はこちらで👇

WordPressクエリーループ攻略|UIの変化に惑わされない「考え方」の基本 目次 「2つの役割」を切り分ける 「お任せ」か「こだわり」か こだわりモード(継承オフ / カスタム)の設定 クエリーループの中身 「最新記事の一覧をサイドバーに出したい」「特定のカテゴリーだけを集めた特集ページを作りた […]

まずは「どこで、何が動いているか」を知っておこう!

AD – 読み進める前のひとやすみ

ナビゲーションやクエリループは、正直に言って「ブロックテーマの中で一番ややこしい部分」です。
最初から完璧に使いこなす必要はありません。まずは「どこで、何が動いているか」を知っておくだけで、サイト作りはぐっと楽になります。

🌟 これらのブロックが活躍している場所

ヘッダーメニュー ナビゲーションブロックが「案内板」として機能しています。
インデックス
(トップページ)
クエリループブロックが「最新記事」を自動で並べています。
アーカイブ
(カテゴリー一覧)
クエリループが「特定のカテゴリー」だけを抽出して表示しています。

これらは、テーマをインストールした時点で「使いやすく初期設定」してくれています。

✨ 「知っている」だけで世界が変わる

「あ、ここはクエリループで動いてるんだな」と気づけるようになれば、将来デザインを変えたくなった時に「どこをいじればいいか」が分かります。この「仕組みの理解」こそが、理想のサイトへの第一歩です!

最後まで読んでいただき、ありがとうございました。
おつかれさまでした 🍵

スポンサーリンク