WordPressの固定ページでページネーションした時のメモ

WordPressで記事が増えてきたので、カテゴリ別に表示したくなりました。

そこで固定ページを作って記事のカテゴリごとに表示できるようにしたのですが、ページネーション（次のページへ、のボタン）が表示されず、最新記事5件までというような表示のみになってしまいました。これだと訪問してくれた方が、過去の記事を見つけずらいため、ページネーションをつけることを考えました。

調べてみると投稿ページにはページネーションはあるものの、固定ページはその名の通り固定した内容を表示するので、ページネーションの機能は内容そうです。そのため、プログラムを書いて実装するしかないとのことでした。

ページネーションの実装に必要なphpには詳しくないので、おおよその実装方法を調べつつchatGPTにお願いしながらコードとデザイン用のCSSを作成してもらい何とか表示できるようになったので、ここにその方法とコードを記録しておきます。どなたかの参考になると幸いです。

ページネーションの実装のために大きく3つのことを行いました。①ページネーション用のショートコード作成プログラムの準備、②固定ページにショートコードの記述、③記事の表示デザインのためのCSSの準備。固定ページのテンプレートはデフォルトのものを使いました。

①ページネーション用のショートコード作成プログラムの準備
②固定ページにショートコードの記述
③記事の表示デザインのためのCSSの準備

①ページネーション用のショートコード作成プログラムの準備

以下のプログラムをfunction.phpに追記しました。function.phpは、ダッシュボードの「外観>テーマファイルエディター」の右側の列にあるテーマファイルのところにあります。

function shortcode_post_list_with_cards($atts) {
  // 初期値と属性の取得
  $atts = shortcode_atts(array(
    'category_id' => '', // カテゴリID
  ), $atts);

  ob_start();

  $paged = (get_query_var('paged')) ? get_query_var('paged') : (get_query_var('page') ? get_query_var('page') : 1);

  $args = array(
    'post_type' => 'post',
    'posts_per_page' => 6,
    'paged' => $paged,
  );

  // カテゴリIDが指定されていたら追加
  if (!empty($atts['category_id'])) {
    $args['cat'] = (int)$atts['category_id'];  // カテゴリIDを指定
  }

  $the_query = new WP_Query($args);

  if ($the_query->have_posts()):
    echo '<div class="card-container">';
    while ($the_query->have_posts()): $the_query->the_post();
      echo '<div class="card">';
      if (has_post_thumbnail()) {
        echo '<div class="card-thumb"><a href="' . get_permalink() . '">' . get_the_post_thumbnail(null, 'medium') . '</a></div>';
      }
      echo '<div class="card-content">';
      echo '<h2 class="card-title"><a href="' . get_permalink() . '">' . get_the_title() . '</a></h2>';
      echo '<p class="card-excerpt">' . get_the_excerpt() . '</p>';
      echo '</div>';
      echo '</div>';
    endwhile;
    echo '</div>';

    echo '<div class="pagination">';
    echo paginate_links(array(
      'base' => esc_url(add_query_arg('paged', '%#%')),
      'format' => '',
      'current' => max(1, $paged),
      'total' => $the_query->max_num_pages,
      'prev_text' => '前へ',
      'next_text' => '次へ',
    ));
    echo '</div>';
  else:
    echo '<p>投稿が見つかりませんでした。</p>';
  endif;

  wp_reset_postdata();
  return ob_get_clean();
}
add_shortcode('custom_post_cards', 'shortcode_post_list_with_cards');

このショートコードでは、指定された”category_id”の記事を6記事まで表示し、それ以上の部分は「次のページ」へと表示するものです。プログラムの内容までは理解していませんが、6記事以上を表示したければ、以下の部分の数字を変更すればよいと思います。

  $args = array(
    'post_type' => 'post',
    'posts_per_page' => 6,
    'paged' => $paged,
  );

②固定ページにショートコードの記述

固定ページに①で作成したショートコードを記述して、固定ページに記事一覧を表示できるようにします。

[custom_post_cards category_id="13"]

category_id=”13″の13はカテゴリIDです。ダッシュボードの「固定ページ>固定ページ一覧」にあるIDの数字のことです。

③記事の表示デザインのためのCSSの準備

①と②で固定ページに記事とページネーションが表示されます。表示をもう少しかっこよくしたかったので、CSSで表示デザインを行いました。

以下のCSSを追加CSSに記述しました。追加CSSは、ダッシュボードの「外観>カスタマイズ」で左側の列にあります。

.card-container {
  display: flex;
  flex-direction: column;
  margin: 20px 0;
}

.card {
  display: flex;
  align-items: flex-start; /* サムネイルとタイトルを縦中央に揃える */
  border-bottom: 1px solid #ddd;
  padding-bottom: 1px;
}

.card-thumb {
  width: 120px;
  height: 80px;
  flex-shrink: 0;
  margin-right: 15px;
	margin-top:5px;
}

.card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-content {
  flex-grow: 1;
}

.card-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 20px;
  font-weight: bold;
  background-color: transparent !important; /* ← 背景を無色（透明）に */
  margin-bottom: 10px;
  line-height: 1.2;
  height: 80px;
  display: flex;
  align-items: center;
}

.card-title a {
  text-decoration: none;
  color: #000;
}

.card-title a:hover {
  text-decoration: underline;
}

.card-excerpt {
  display: none !important;
}

このCSSで以下のように表示されます。カード形式で左側にアイキャッチの画像で、右側に記事のタイトルが表示されます。