銀河鉄道

月うさぎBlog

【WordPress】ページネーションを自作し、任意のクラス名を付ける

記事更新日：2022-09-18

サムネイル
ページネーションを自作する
クラス名も
自分で
付けたい

ページネーションを関数化

<?php
function set_pagination() {
    global $wp_query;
    $big = 999999999;
    if ($wp_query->max_num_pages <= 1) {
        return;
    }
    $paged = get_query_var('paged') ? intval(get_query_var('paged')) : 1;
    $pagenum_link = html_entity_decode(get_pagenum_link());
    $query_args = array();
    $url_parts = explode('?', $pagenum_link);
    if (isset($url_parts[1])) {
        wp_parse_str($url_parts[1], $query_args);
    }
    $pagenum_link = remove_query_arg(array_keys($query_args), $pagenum_link);
    $pagenum_link = trailingslashit($pagenum_link) . '%_%';
    $format = $GLOBALS['wp_rewrite']->using_index_permalinks() && !strpos($pagenum_link, 'index.php') ? 'index.php/' : '';
    $format .= $GLOBALS['wp_rewrite']->using_permalinks() ? user_trailingslashit('page/%#%', 'paged') : '?paged=%#%';
    $translated = __('ページ番号', 'mytextdomain'); // Supply translatable string

    $page_links = paginate_links(array(
        'base' => str_replace($big, '%#%', esc_url(get_pagenum_link($big))),
        'format' => $format,
        'total' => $GLOBALS['wp_query']->max_num_pages,
        'current' => $paged,
        'end_size' => 1,
        'mid_size' => 1,
        'prev_text' => '<i class="fas fa-angle-double-left"></i>',
        'next_text' => '<i class="fas fa-angle-double-right"></i>',
        'before_page_number' => '<span class="screen-reader-text">' . $translated . ' </span>',
        'type' => 'array',
    ));
?>

    <nav class="（クラス名）">
        <ul class="（クラス名）">
            <li class="">
                <?php echo join('</li><li>', $page_links); ?>
            </li>
        </ul>
    </nav>

<?php
}

paginate_links( $args )

ページ番号付きリンクを生成できます。（例： « Prev 1 &#133; 3 4 5 6 7 &#133; 9 Next » ）

参照：
関数リファレンス/paginate_links

get_pagenum_link

Retrieves the link for a page number.

参照：
Developer Resources：get_pagenum_link

functions.php

<?php
include(get_template_directory() . '/xxx/set_pagination.php');

呼び出し方

<?php
if (function_exists('set_pagination')) set_pagination();

function_exists

指定した関数が定義されている場合に true を返す

参照：
関数リファレンス：function_exists

CSS設定の注意点

出力されるHTMLはこんな感じ

<nav class="（クラス名）">
    <ul class="（クラス名）">
        <li>
            <a class="prev page-numbers" href="xxx">
                <i class="fas fa-angle-double-left"></i>
            </a>
        </li>
        <li>
            <span aria-current="page" class="page-numbers current">
                <span class="screen-reader-text">ページ番号</span>
                1
            </span>
        </li>
        <li>
            <a class="page-numbers" href="xxx">
                <span class="screen-reader-text">ページ番号</span>
                2
            </a>
        </li>

        ~略~
        
        <li>
            <a class="next page-numbers" href="xxx">
                <i class="fas fa-angle-double-right"></i>
            </a>
        </li>
    </ul>
</nav>

current にも next にも、すべて page-numbers が付く

なので、別々のスタイリングをしたいときは、こんな感じ

.page-numbers {
	// 共通スタイリング

	&:not(.current) {
		// current以外のスタイリング
	}
}

.prev.page-numbers,
.next.page-numbers {
	// prev と nextのみのスタイリング
}

著者

author
月うさぎ

2022-09-18

編集後記：
この記事の内容がベストではないかもしれません。

記事一覧