WP-PageNavi（ページネーション）

2023.06.16 WordpressのプラグインWP-PageNaviの使い方

はじめに

概要

ユーザーアビリティを意識したウェブサイト制作では、パンくずリストやページネーション、お問い合わせフォームなどが重要な要素となります。しかし、これらをHTMLやCSSのみの知識で実装することは困難です。特にお問い合わせフォームの実装にはPHPなどの知識が必要です。

しかし、WordPressでは、プラグインを利用することで簡単にこれらの要素を実装することができます。※なお、ページネーションは一覧(arcive.php)ページでの設定を前提としております。arciveページの詳しい設定はこちらをご参照ください。

プラグインのご紹介

WP-PageNavi（ページネーション）
サブクエリでの表示の仕方
まとめ

※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。

WP-PageNavi（ページネーション）

サイトのページネーションを簡単に実装してくれるプラグインです。メインクエリ及びサブクエリのページネーションにも対応しています。

【手順】
プラグインWP-PageNaviをインストールします。

ページネーションを表示したいページに以下のコードを記述します。

<?php wp_pagenavi(); ?>

HTMLに以下のコードが展開されます。

<div class="wp-pagenavi" role="navigation">
  <span class="pages">1 / 3</span>
  <span aria-current="page"class="current">1</span>
  <a class="page larger"title="ページ 2"href="https://web-html.blog/all/page/2/">2</a><a class="page larger"title="ページ 3"href="https://web-html.blog/all/page/3/">3</a>
  <a class="nextpostslink"rel="next"aria-label="次のページ"href="https://web-html.blog/all/page/2/">»</a>
  <div class="wp-pagenavi"role="navigation">
    <span class="pages">1 / 3</span>
    <span aria-current="page"class="current">1</span>
    <a class="page larger"title="ページ 2"href="https://web-html.blog/all/page/2/">2</a><a class="page larger"title="ページ 3"href="https://web-html.blog/all/page/3/">3</a><a class="nextpostslink"rel="next"aria-label="次のページ"href="https://web-html.blog/all/page/2/">»</a>
  </div>
</div>

こちらに付与されているクラスを元に、デザインをカスタムすることが可能です。デベロッパーツールを活用しましょう。

サブクエリを使用したページネーションの設定

以下は本サイトの全て投稿取得し、ページネーションを表示させているコードです。

<?php
 // ※重要
 $paged = get_query_var('paged') ? get_query_var('paged') : 1;
 $args = array(
 'post_type' => array('post', 'css', 'javascript', 'wordpress'),
 'posts_per_page' => 9,
 'paged' => $paged,
);
　　// &all_query変数名は任意
 $all_query = new WP_Query($args);

 // 全ページ数を取得 ※重要
 $pages = $all_query->max_num_pages;
 // 取得したページ数を渡す ※重要
 $wp_query->max_num_pages = $pages;
?>

<?php if ($all_query->have_posts()) :
 while ($all_query->have_posts()) : $all_query->the_post(); ?>

 // ここにループさせたいコードを記述

<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_postdata(); ?>

重要なコードのみを抜粋すると

 $paged = get_query_var('paged') ? get_query_var('paged') : 1;
 'paged' => $paged,

// 全ページ数を取得
 $pages = $all_query->max_num_pages;
 // 取得したページ数を渡す
 $wp_query->max_num_pages = $pages;

こちらのコードを記述しないとページネーションが機能しませんのでご注意ください。参考にさせていただいたサイトはこちらです。

single.phpでページネーションを実装

<?php
// 前の投稿へのリンクに画像とタイトルを表示
previous_post_link('%link', '<img src="' . get_template_directory_uri() . '/images/icon/arrow-left.svg" alt="Previous post"> %title', true);

// 次の投稿へのリンクとタイトルを表示
next_post_link('%link', '%title <img src="' . get_template_directory_uri() . '/images/icon/arrow-right.svg" alt="Next post">', true);
?>

このPHPコードは、WordPressテーマ内で前の投稿と次の投稿へのナビゲーションリンクを表示するために使用されています。まず、previous_post_link関数は前の投稿へのリンクを生成し、リンク内には左向きの矢印アイコンとその投稿のタイトルが表示されます。このアイコンはテーマディレクトリ内のimages/icon/arrow-left.svgという画像ファイルを指しています。
次に、next_post_link関数は次の投稿へのリンクを生成し、リンク内にはその投稿のタイトルと右向きの矢印アイコンが表示されます。このアイコンはテーマディレクトリ内のimages/icon/arrow-right.svgという画像ファイルを指しています。
両方のリンク生成関数ともに、第三引数にtrueを指定することで、同じカテゴリ内の投稿に限定してリンクを生成する設定となっています。