WebCanta

初心者のための徹底ガイド-Web制作

会員ログイン
プラグイン

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

WordpressのプラグインWP-PageNaviの使い方
はじめに
概要
ユーザーアビリティを意識したウェブサイト制作では、パンくずリストやページネーション、お問い合わせフォームなどが重要な要素となります。しかし、これらをHTMLやCSSのみの知識で実装することは困難です。特にお問い合わせフォームの実装にはPHPなどの知識が必要です。 しかし、WordPressでは、プラグインを利用することで簡単にこれらの要素を実装することができます。※なお、ページネーションは一覧(arcive.php)ページでの設定を前提としております。arciveページの詳しい設定はこちらをご参照ください。
※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。
疑問を持つ読者のイラスト読者

WP-PageNavi（ページネーション）は、最初にどこを理解するとよいですか？

著者・木村のプロフィール写真木村

WordPress標準機能、プラグインの機能、テーマ側の処理を分けて考えると、どこを変更すべきか判断しやすくなります。

話を聞く読者のイラスト読者

実際に試すときは、手順だけでなく確認方法も知っておいた方がよいでしょうか？

著者・木村のプロフィール写真木村

はい。この記事では、作業の目的から実装後の確認までを順番に整理します。自分の環境と照らし合わせながら読み進めてください。

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

WP-PageNavi（ページネーション）では、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="/all/page/2/">2</a><a class="page larger"title="ページ 3"href="/all/page/3/">3</a>
  <a class="nextpostslink"rel="next"aria-label="次のページ"href="/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="/all/page/2/">2</a><a class="page larger"title="ページ 3"href="/all/page/3/">3</a><a class="nextpostslink"rel="next"aria-label="次のページ"href="/all/page/2/">»</a>
  </div>
</div>
こちらに付与されているクラスを元に、デザインをカスタムすることが可能です。デベロッパーツールを活用しましょう。

WP-PageNavi（ページネーション）で押さえたいポイント

WP-PageNavi（ページネーション）は、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。

WP-PageNavi（ページネーション）の確認方法

ローカル環境で変更し、未ログイン状態と管理者状態の両方で表示を確認します。PHPを変更した場合は、エラーログ、権限、エスケープ処理も合わせて確認してください。

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

サブクエリを使用したページネーションの設定では、WP-PageNavi（ページネーション）を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。

以下は本サイトの全て投稿取得し、ページネーションを表示させているコードです。 
<?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;
こちらのコードを記述しないとページネーションが機能しませんのでご注意ください。参考にさせていただいたサイトはこちらです。

サブクエリを使用したページネーションの設定で押さえたいポイント

サブクエリを使用したページネーションの設定は、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。

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

ローカル環境で変更し、未ログイン状態と管理者状態の両方で表示を確認します。PHPを変更した場合は、エラーログ、権限、エスケープ処理も合わせて確認してください。

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

single.phpでページネーションを実装では、WP-PageNavi（ページネーション）を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。

<?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を指定することで、同じカテゴリ内の投稿に限定してリンクを生成する設定となっています。

実装のサイト

こちらから上記を実装したサイトが確認できます。

single.phpでページネーションを実装で押さえたいポイント

single.phpでページネーションを実装は、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。

まとめ

  • プラグインを使えば簡単にページネーションが実装できる
  • サブクエリでは記述の仕方に注意する
  • デベロッパーツールを使い、付与されたクラスを指定しデザインをカスタムできる

関連する記事

プラグイン

GTranslateの使い方｜WordPressに自動翻訳を導入する手順と注意点

GTranslateは、テキストやウェブページを様々な言語に翻訳するサービスです。Googleが提供するこのツールは、ユーザーが入力したテキストを即座に別の言語に翻訳する機能を持っています。無料でも使用できショートコードを組み込むだけで、簡単に実装ができます。実装の難易度が低くシンプルに設定できるところが魅力です。以下に具体的な実装方法を示します。参考にしていただければ幸いです。

MEMBER COMMENTS

コメント（0件）

会員ログイン後にコメントできます

記事への質問や感想をコメントで共有できます。無料会員登録後もこの記事へ戻れます。

会員ログイン 無料会員登録