WordPressのブロックテーマで一覧(カテゴリやタグなど)ページは以下の手順で作成することができます。
- 一覧用テンプレートを作成する
- クエリーループブロックを設置する
- サムネイルを追加したり一覧のコンテンツを作成する
テンプレートがすでにある場合はそのテンプレートを編集することでカスタマイズできます。
一覧ページのレイアウトはサイドバーを作って2カラムにしたり、記事のレイアウトを縦並びから横並びに変更することができます。
ただ、Wordpressの標準ブロックではこれらのレイアウトを思うように作れなかったりすごく時間がかかることがあるため、パターンテンプレートを活用することをおすすめします。
OrigamiUIでは一覧ページでよくあるパターンテンプレートをたくさん用意していますのでぜひダウンロードしてみてください。
ここからは、Wordpressのブロックテーマで一覧(カテゴリやタグなど)ページを作る方法を画面の画像付きで詳しく解説していきます。
ブロックテーマで一覧ページを作る方法
一覧用テンプレートを作成する
まずは必要な一覧用テンプレートを作成します。テーマによってはすでに用意されている場合もあるので(アーカイブテンプレートなど)それを使う場合はこのステップを飛ばしてください。
テンプレートを作るには、外観->エディター->テンプレートと進んでテンプレート一覧ページを開、右上の「テンプレート追加」ボタンで作成することができます。
ここで「〜アーカイブ」となっているのが一覧用のテンプレートです。以下のようなものがあります。
- 投稿者アーカイブ
- カテゴリーアーカイブ
- 日付アーカイブ
- タグアーカイブ
- カスタムタクソノミーアーカイブ
カスタムタクソノミー用は「Custom Post Type UI」プラグインなどでタクソノミーや投稿タイプを追加した場合に表示されます。
カテゴリーアーカイブテンプレートをクリックすると以下のような画面が出てきます。
ここでは全てのカテゴリーで共通のものか、特定のカテゴリー用のものかを選択できます。右側の「特定の項目に対して」の方を選ぶと、カテゴリを選択する画面が表示されるので作成したいカテゴリーを選びます。
選択するとテンプレート編集ページに移動します。あとは必要なブロックを設置しながらテンプレートで表示したいレイアウトを作っていきます。
クエリーループブロックを設置する
WordPressのブロックテーマで一覧ページを表示させるには、先ほど作成した一覧ページ用テンプレートに「クエリーブロック」を設置します。
クエリーブロックを設置すると、こんな感じで投稿一覧が表示されます(テンプレートの選択がありますがとりあえずなんでもOK)。この状態で一旦保存して一覧ページを表示してみたものが以下の画面(ここでは日付アーカイブを作成しています)。
編集ページと同じように表示されています。後ほど解説しますが、一覧ページにとって重要なページネーションも正しく機能しています。以前はWordpressタグをPHPファイルに設置したり、プログラミングする必要があったのでこのあたりはかなり楽に実装できるようになってます。
クエリーループではクエリータイプの項目で「カスタム」を選択することで表示数(1ページあたりの)や絞り込み、並び順などの設定ができます。
設定項目は以下のとおりです。
- 投稿タイプ
- 並び順
- 先頭固定表示の投稿
- 表示
- 絞り込み(タクソノミー、著者、キーワード、フォーマット)
サムネイルを追加したり一覧のコンテンツを作成する
クエリーループの設置と設定ができたら、次はレイアウトを作成していきます。
クエリーループを設置した際にテンプレートの選択ができますが、だいたいこんな感じのシンプルな表示になってると思います。
ここに記事のサムネイル(アイキャッチ)画像を追加したり、カテゴリや続きを読むリンクなど以下のようなコンテンツを追加することができます。
- 投稿のアイキャッチ画像: サムネイルを追加
- アバター: 著者の画像を表示
- 抜粋: 抜粋を表示
- 投稿者: 投稿者情報を表示
- 作成者名: 投稿の作成者名を表示
- 変更日: 更新日時を表示
- カテゴリー: 投稿のカテゴリーを表示
- タグ: 投稿のタグを表示
- 続きを読む: 続きを読むリンクを表示
これらのコンテンツを表示するには、左上のブロック追加ボタンを押して、ブロック一覧から選択すればOK。
ただし、どこにでも追加すればいいというものではなく、レイヤーパネル(リストビュー)の「投稿テンプレート」の中に配置する必要があります。
例えばアイキャッチ画像ならこんな感じ
タイトルの上にアイキャッチを設置してみたところ、先ほどは表示されていなかったアイキャッチ画像を表示されています。あとはこんな感じで必要なコンテンツを配置していけばOK。
ただ、ゼロからレイアウトを作る作業ってすごく大変で、時間がかかったり思ったようなレイアウトが作れなかったりするんですよね。
ページのデザインをさくさく作りたい！という方はOrigamiUIのパターンテンプレートを使ってみてください。編集画面にコピーするだけでキレイなレイアウトを簡単に作成できます。
パターンテンプレート一覧はこちらで公開しているのでぜひ活用してみてください。
1ページあたりに表示する数を変更するには？
過去のWordoressテーマの場合、一覧ページの表示数は「設定->表示設定」から「1ページに表示する最大投稿数」を変更することで調整することができました。
クエリーループを使用することで、ブロックの設定から直接変更することができます。
サムネイル(アイキャッチ)付きのデザインにするには？
記事一覧でサムネイル付きのデザインに変更するには以下の方法があります。
- クエリーループブロックを設置する際にサムネイルのあるテンプレートを選ぶ
- クエリーループブロックを設置したあと、自分でアイキャッチブロックを設置する
1つめは、最初から用意されているテンプレートの中からサムネイル付きのものを選ぶ方法。選ぶだけなので簡単に実装できます。
いい感じのデザインがない場合はOrigamiUIのパターンテンプレートから探してみてください。
2つめは自分でアイキャッチ用のブロックを設置する方法。
設置場所は「クエリーループ、投稿テンプレート、投稿のアイキャッチ画像」の順で階層化されている必要があります。カテゴリーやタグの表示も投稿テンプレートの中に入れておきます。
一覧ページにページタイトルを設置するには？
一覧ページにページタイトルを表示するには、「アーカイブタイトル」というブロックを設置します。
このブロックの設定で「タイトルにアーカイブを表示」をオフにするとタイトルだけが表示されるようになります。例えばカテゴリー一覧ページの場合は以下のように表示されます。
- アーカイブを表示ON: カテゴリー:未分類
- アーカイブを表示OFF: 未分類
カテゴリーごとの一覧ページを作るには？
WordPressのブロックテーマではカテゴリーごとの一覧ページを簡単に作成できます。
やり方はテンプレートの作成方法のところで説明したように、「特定の項目に対して」という方を選ぶとカテゴリーの選択画面が表示されるので作成したいカテゴリーを選べば、そのカテゴリ用の一覧ページを作ることができます。
カスタム投稿タイプやカスタムタクソノミーも同じように個別に一覧ページを作成することができます。
一覧ページでページネーションを作るには？
ブロックテーマで作成したテンプレートにページネーションを追加するには、「ページ送り」というブロックを設置します。
このブロックはクエリーループの内側で、投稿テンプレートの外側に設置します。
設定できるのは、配置や矢印の有無やフォントスタイルのみで、細かいスタイルができませんが、OrigamiUIのカスタムCSSを使うことで編集ページ上でCSSコードを追加でき、デザインに合わせたスタイリングが可能になります。
