メッセージ
PR

「新着記事」ブロックにページネーションを追加する方法

Cocoonカスタマイズ集
この記事は約4分で読めます。

はじめに

固定ページで「新着記事」ブロック を使い、カテゴリー一覧のようなレイアウトを作りたいケースがあると思います。

しかし、このブロックは「表示件数」を指定する必要があり、カテゴリーページのようにページネーション付きで全ての記事を表示することはできません。

そこで、WordPress標準の「クエリーループ」ブロックを利用する方法がおすすめです。
クエリーループに 「ページ送り」ブロック を追加すれば、カテゴリー一覧ページと同様に、ページネーション付きのエントリーカード型一覧を簡単に実現できます。

この記事では、この方法について説明します。

ダウンロード

メイド・イン・ヘブン以外の環境でも利用できますが、必要に応じて「カスタムHTML」ブロック中のCSSを調整してください。

完成イメージ

  • 通知エリアのメッセージをメニュー設定から複数登録して縦スクロールする方法
  • WordPressのブロック非表示とカラム折り返しのブレークポイントがズレてる問題
  • Gutenbergエディターでサイドバーに移動したメタボックスを本文下に戻せない問題
  • トップページを「最新記事の一覧」ではなく「最新の投稿本文」へ自動で切り替える方法
  • プラグインなしで独自の問い合わせフォームを自作する方法
  • 「ナビカード」のリボン文言を変更する方法

画面幅が600px以下のときは、1カラム表示となります。

実装手順

さいごに

今回紹介した方法を使えば、固定ページでもカテゴリー一覧ページのように、新着記事をページネーション付きで表示できます。
標準の「クエリーループ」ブロックと「ページ送り」ブロックを組み合わせるだけで、Cocoon風のエントリーカード型レイアウトを実現可能です。
ぜひ自分のサイトに取り入れてみてください。

タイトルとURLをコピーしました