WordPress

WordPressで簡単！投稿一覧ページにページネーションを追加する方法【プラグイン不要】

 

WordPressの投稿一覧ページにページネーション（ページ送り）を追加する方法を紹介します。
プラグインを使わずに、テーマのコードに少し手を加えるだけで実装できるので、ぜひ試してみてください。

Contents

前提条件

この記事では、以下の条件を前提としています。

  • WordPressの基本的なテーマ編集ができる
  • functions.phpやarchive.phpを編集できる環境がある
  • パーマリンク設定が適切に行われている（後述）

WordPressでのページネーションとは

ページネーションとは、投稿一覧ページを複数ページに分割し、ユーザーが簡単にページ移動できるようにする仕組みです。
WordPressではpaginate_links()関数を使うことで実装できます。

パーマリンクの理想の設定と注意点

ページネーションを正しく動作させるには、パーマリンクの設定が適切である必要があります。
WordPressの管理画面で、
設定 > パーマリンク設定
にアクセスし、カスタム構造で
/category/%postname%/
のような設定にすると、SEOにも有効です。

また、ページネーションがうまく機能しない場合は、一度パーマリンク設定を「デフォルト」に戻し、再度希望の設定に変更して保存することで解決することがあります。

function.phpの記述

このコードは、WordPressの投稿一覧ページにページネーションを表示するための関数 my_custom_pagination() を定義しています。
paginate_links() 関数を使用し、ページナビゲーションのリンクをリスト形式で出力します。

function my_custom_pagination($args = []) {
global $wp_query;

$defaults = [
    'prev_text' => '',
    'next_text' => '',
    'type' => 'array',
    'base' => get_pagenum_link(1) . '%_%',
    'format' => '/page/%#%',
];

$args = wp_parse_args($args, $defaults);
$links = paginate_links($args);

if (is_array($links)) {
    echo '<ul class="pnavi">';
    foreach ($links as $link) {
        if (strpos($link, 'prev') !== false || strpos($link, 'next') !== false) {
            continue;
        }
        if (strpos($link, 'current') !== false) {
            echo '<li class="current">' . strip_tags($link) . '</li>';
        } else {
            echo '<li>' . $link . '</li>';
        }
    }
    echo '</ul>';
}
}

  1. グローバル変数 $wp_query の使用
    WordPressのクエリ情報を取得するために global $wp_query; を使用。
  2. ページネーションのデフォルト設定
    • ‘prev_text’ => ” → 「前へ」ボタンのテキストを空にして非表示。
    • ‘next_text’ => ” → 「次へ」ボタンのテキストを空にして非表示。
    • ‘type’ => ‘array’ → paginate_links() の出力を配列として取得。
    • ‘base’ => get_pagenum_link(1) . ‘%_%’ → ページリンクのURLを生成。
    • ‘format’ => ‘/page/%#%’ → ページ番号のフォーマットを指定。
  3. ページリンクをリスト表示

    • paginate_links() で生成されたリンクをリスト ＜ul class=”pnavi”＞ 内に出力。
    • 現在のページ番号に class=”current” を付けて強調。
    • prev や next に関するリンクをスキップして、純粋なページナビゲーションのみ表示。

CSSの記述例

ページネーションのデザインを整えるためのCSSスタイルです。ナビゲーションを横並びにし、現在のページを強調します。

.pnavi {
    display: flex;
    list-style: none;
    padding: 0;
}
.pnavi li {
    margin: 0 5px;
}
.pnavi li a {
    display: block;
    padding: 8px 12px;
    background-color: #0073aa;
    color: white;
    text-decoration: none;
    border-radius: 4px;
}
.pnavi li a:hover {
    background-color: #005177;
}
.pnavi li.current {
    padding: 8px 12px;
    background-color: #005177;
    color: white;
    border-radius: 4px;
}

archive.php（または投稿一覧ページ）の記述

このコードは、投稿一覧を表示し、ページネーションを適用するためのテンプレートファイル archive.php に記述するものです。
functions.php で定義した my_custom_pagination() を実行し、ページネーションを追加。

<?php if (have_posts()): ?>
<?php global $wp_query; ?>
<ul>
<?php while (have_posts()): the_post(); ?>
    <li>
        <div class="date"><?php echo get_the_date(); ?></div>
        <a href="<?php the_permalink(); ?>"><h2><?php the_title(); ?></h2></a>
    </li>
<?php endwhile; ?>
</ul>
<?php my_custom_pagination(); ?>
<?php endif; ?>

注意点

  • WordPressのパーマリンク設定が適切に設定されていることを確認してください。
  • カスタムクエリを使っている場合は、$wp_queryをグローバルに扱うか、ページネーション用の引数を適用してください。
  • ページネーションのリンクが正しく動作しない場合は、※1 flush_rewrite_rules()を試してみてください。

※1 flush_rewrite_rules()とは
ページネーションが機能しない場合、flush_rewrite_rules()を使ってWordPressのリライトルールをリフレッシュすることで解決することがあります。
以下のコードをfunctions.phpに一時的に追加し、管理画面を開いた後に削除してください。

function my_custom_flush_rewrite_rules() {
    flush_rewrite_rules();
}
add_action('init', 'my_custom_flush_rewrite_rules');

まとめ

プラグインを使用せずに、シンプルなコードでページネーションを実装する方法を紹介しました。
CSSを調整することでデザインをカスタマイズできるので、ぜひ活用してみてください。

　
※参考にされる場合は自己責任でお願いします。

ページネーション プラグイン不要
関連記事