
## 久しぶりに WordPress を

必要に迫られ、久々に WordPress を触ることに…

WordPress5.9 からブロックテーマが加わり、ブロックを用いてサイトなりブログを構築していくのが、オススメらしい…

WordPress は v6.2.1、Create Block Theme のプラグインは、 v1.10.0 を使用。

## テンプレートパーツを作成

1. 外観 > エディタからテンプレートパーツの作成を選択

2. ブロックのリストから、クエリループ を選択

3. 画像・日付・タイトルを選んで、グリッド表示に変更

4. 表示設定のページごとの項目数を 9、カラムを 3、投稿タイプを投稿にする

5. 日付の項目を削除して、画像とタイトルをグループ化して保存

6. 外観 > エディタ > テンプレートからインデックスを選択し、作成したクエリループ のテンプレートパーツを配置

ダミー記事をいくつか投稿しておくと、その内の 9 件が 3x3 のカラムで表示され、10 件目以降には、ページネーションが適用されます。

## グループ化した箇所に CSS を適用

テンプレートパーツにしたクエリループのグループ化（画像とタイトル）した箇所に、functions.php と style.css を使って、カードっぽくしてみました。

![隣り合うカードの長さが揃っていない](../assets/not_align_height_title.png)

タイトルの長さが異なると、隣り合うカード（カラム）の高さが揃わない…

Developer Tool で検証してみると、カード 1 枚 1 枚は li 要素になっていて、その親要素の ul には以下の様な CSS が設定されています。

```css
display: flex;
flex-direction: row;
```

子要素である li に display:flex;を設定してあげれば、高さが揃いそうなので、やってみると…

```css
display: flex;
```

![隣り合うカードの長さが揃う](../assets/align_height_title.png)

高さが揃いました。

## カテゴリとタグを追加する

テンプレートパーツを編集して、カテゴリとタグを追加してみます。

![隣り合うカードの長さとカテゴリ＆タグの表示位置が揃っていない](../assets/not_align_height_tag.png)

今度は、カテゴリとタグの表示位置が揃わなくなりました…

## カテゴリとタグの表示位置を調整する

先にグループ化してスタイルを設定した箇所（背景色などを設定したカード部分）に、以下を追記します。

```css
display: flex;
flex-direction: column;
```

次にカテゴリとタグをグループ化して、functions.php と style.css を使って、以下のスタイルを適用させます。

```css
margin-top: auto;
```

![カテゴリとタグの表示位置も揃っている](../assets/aligh_height_tag.png)

## アーカイブページを作成

アーカイブ用のテンプレートを作成して、そこにもテンプレートパーツ化したクエリーループを配置。

右側の設定パネルの箇所に、以下の様な記述がありました。

> アーカイブや検索など、現在のテンプレートで設定されているグローバルクエリーコンテキストを使用するには切り替えてください。無効化すると、設定を独自にカスタマイズできます。

なので、テンプレートからクエリを継承を ON にしておきます。

保存してインデックスページに戻ってみると、先ほどまでは 9 件表示されていたものが、10 件表示される様になってしまった…

表示設定のページごとの項目数を 9 にしているのに、何故？

10 ってのは、どこの値？

どうやら、投稿 > 表示設定 > 1 ページに表示する最大投稿数の値が適用されているっぽかったので、その数値を 10 から 9 に変更。

すると、インデックスページの表示も 9 になりました。

## 記事があるのに…

記事のカテゴリやタグをクリックしてアーカイブページに遷移してみると、記事が 1 件ある際にもクエリループの結果なしに設定した「お探しの記事は見つかりませんでした！」の文言が表示されてしまう。→ 意図した動作ではない。

一致する記事が 2 件以上になると、文言は表示されない。→ 意図した動作。

検索フォームを設置して一致する記事がない場合は、「お探しの記事は見つかりませんでした！」が表示される。→ 意図した動作。

一致する記事が 1 件ある場合にも、記事と共に「お探しの記事は見つかりませんでした！」が表示されてしまう…→ 意図した動作ではない。

う〜ん、何で？


WordPressの記事、1件あります