2026年9月21日

WordPressのページネーションをカスタマイズする方法

テーマ・デザイン

はじめに

ページネーションはウェブサイト上で複数の投稿やページを一覧表示する際に、ユーザーが各ページ間を簡単に移動できるようにする重要な機能です。WordPressではデフォルトでページネーション機能が用意されていますが、その見た目や動作をカスタマイズすることで、ユーザビリティやサイトのデザイン性を大幅に向上させることが可能です。

症状・背景

このテーマが必要になる主な場面:

デザインの一貫性を確保したい場合
視覚的なユーザー体験を改善したい場合
カスタムCSSとJavaScriptを使用して機能を拡張したい場合
WordPressの既存ページネーションがサイトのデザインに合わない場合

手順・設定方法

ステップ1: テーマのfunctions.phpファイルへのカスタム関数追加

# WordPressテーマのディレクトリ内のfunctions.phpファイルを開く
nano wp-content/themes/your-theme/functions.php

# 以下をfunctions.phpファイルに追加
function custom_pagination($pages = '', $range = 2) {
    global $paged;
    if (empty($paged)) $paged = 1;

    if ($pages == '') {
        global $wp_query;
        $pages = $wp_query->max_num_pages;
        if (!$pages) {
            $pages = 1;
        }
    }

    if (1 != $pages || 1 != $paged) {
        echo paginate_links(array(
            'base' => get_pagenum_link(1) . '%_%',
            'format' => '/page/%#%',
            'current' => max(1, $paged),
            'total' => $pages,
            'prev_text' => __('前へ'),
            'next_text' => __('次へ'),
        ));
    }
}

ステップ2: テーマのページテンプレートファイルへのカスタム関数呼び出し

# WordPressテーマ内の必要に応じたページテンプレート（例：index.php, archive.phpなど）を開く
nano wp-content/themes/your-theme/index.php

# 以下をページテンプレートファイルの適切な位置に追加
if (function_exists('custom_pagination')) {
    custom_pagination($wp_query->max_num_pages);
}

ステップ3: カスタムCSSとJavaScriptを使用して視覚効果を改善

# WordPressテーマ内のstyle.cssファイルを開く
nano wp-content/themes/your-theme/style.css

# 以下をstyle.cssに追加
.pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.pagination li {
    background-color: #f1f1f1;
    padding: 8px 16px;
    border-radius: 4px;
    margin-right: 5px;
    cursor: pointer;
}

.pagination li.current,
.pagination li a:hover {
    background-color: #337ab7;
    color: white;
}

# WordPressテーマ内のscript.jsファイルを開く
nano wp-content/themes/your-theme/js/script.js

# 以下をscript.jsに追加
jQuery(document).ready(function($) {
    $('.pagination a').click(function(e) {
        e.preventDefault();
        var page = $(this).attr('href');
        $.ajax({
            type: 'POST',
            url: ajaxurl,
            data: { action: 'load_posts', pagenum: page },
            success: function(response) {
                $('#content').html(response);
            }
        });
    });
});

ステップ4: ページネーションのカスタマイズを有効化するためのプラグイン利用

# WordPress管理画面からページネーション関連のプラグインを探し、インストールして有効化する
/wp-admin/plugins.php?page=page-navigation-settings

注意事項

デフォルトのWordPressテーマにカスタムコードを追加する際は必ずバックアップを取りましょう。
カスタマイズしたページネーションがSEOに影響を与えないよう、適切なURL構造を保つようにしましょう。
JavaScriptを使用して非同期でページネーションを行う場合、ユーザー体験を損なわないよう注意が必要です。
ページネーションの見た目は全体的なテーマデザインと調和させることが重要です。

まとめ

1. カスタム関数: WordPressの既存のページネーション機能に追加機能を追加できます。

2. 視覚効果: カスタムCSSとJavaScriptを使用して、視覚的なユーザー体験を向上させます。

3. プラグイン活用: 必要に応じて適切なページネーション関連のプラグインを利用することで更なるカスタマイズが可能になります。

4. バックアップ: カスタマイズ前に必ずテーマとデータベースのバックアップを取ることを忘れないでください。

5. SEO対策: ページネーションが適切に設定されていることを確認し、ウェブサイトの検索エンジン最適化を維持します。

Post Views: 10