WordPressのブロックテーマを触ってみる・クエリループ
目次
久しぶりに WordPress を
必要に迫られ、久々に WordPress を触ることに…
WordPress5.9 からブロックテーマが加わり、ブロックを用いてサイトなりブログを構築していくのが、オススメらしい…
WordPress は v6.2.1、Create Block Theme のプラグインは、 v1.10.0 を使用。
テンプレートパーツを作成
-
外観 > エディタからテンプレートパーツの作成を選択
-
ブロックのリストから、クエリループ を選択
-
画像・日付・タイトルを選んで、グリッド表示に変更
-
表示設定のページごとの項目数を 9、カラムを 3、投稿タイプを投稿にする
-
日付の項目を削除して、画像とタイトルをグループ化して保存
-
外観 > エディタ > テンプレートからインデックスを選択し、作成したクエリループ のテンプレートパーツを配置
ダミー記事をいくつか投稿しておくと、その内の 9 件が 3x3 のカラムで表示され、10 件目以降には、ページネーションが適用されます。
グループ化した箇所に CSS を適用
テンプレートパーツにしたクエリループのグループ化（画像とタイトル）した箇所に、functions.php と style.css を使って、カードっぽくしてみました。
タイトルの長さが異なると、隣り合うカード（カラム）の高さが揃わない…
Developer Tool で検証してみると、カード 1 枚 1 枚は li 要素になっていて、その親要素の ul には以下の様な CSS が設定されています。
display: flex;
flex-direction: row;
子要素である li に display:flex;を設定してあげれば、高さが揃いそうなので、やってみると…
display: flex;
高さが揃いました。
カテゴリとタグを追加する
テンプレートパーツを編集して、カテゴリとタグを追加してみます。
今度は、カテゴリとタグの表示位置が揃わなくなりました…
カテゴリとタグの表示位置を調整する
先にグループ化してスタイルを設定した箇所（背景色などを設定したカード部分）に、以下を追記します。
display: flex;
flex-direction: column;
次にカテゴリとタグをグループ化して、functions.php と style.css を使って、以下のスタイルを適用させます。
margin-top: auto;
アーカイブページを作成
アーカイブ用のテンプレートを作成して、そこにもテンプレートパーツ化したクエリーループを配置。
右側の設定パネルの箇所に、以下の様な記述がありました。
アーカイブや検索など、現在のテンプレートで設定されているグローバルクエリーコンテキストを使用するには切り替えてください。無効化すると、設定を独自にカスタマイズできます。
なので、テンプレートからクエリを継承を ON にしておきます。
保存してインデックスページに戻ってみると、先ほどまでは 9 件表示されていたものが、10 件表示される様になってしまった…
表示設定のページごとの項目数を 9 にしているのに、何故？
10 ってのは、どこの値？
どうやら、投稿 > 表示設定 > 1 ページに表示する最大投稿数の値が適用されているっぽかったので、その数値を 10 から 9 に変更。
すると、インデックスページの表示も 9 になりました。
記事があるのに…
記事のカテゴリやタグをクリックしてアーカイブページに遷移してみると、記事が 1 件ある際にもクエリループの結果なしに設定した「お探しの記事は見つかりませんでした！」の文言が表示されてしまう。→ 意図した動作ではない。
一致する記事が 2 件以上になると、文言は表示されない。→ 意図した動作。
検索フォームを設置して一致する記事がない場合は、「お探しの記事は見つかりませんでした！」が表示される。→ 意図した動作。
一致する記事が 1 件ある場合にも、記事と共に「お探しの記事は見つかりませんでした！」が表示されてしまう…→ 意図した動作ではない。
う〜ん、何で？