実装にはfunctions.php
へ下記のように記述し、get_the_posts_pagination()
の出力内容を一部変更させます。
具体的には関数内で現在のページ数と全ページ数をそれぞれ取得し、デフォルトで「投稿ナビゲーション」と表示されるスクリーンリーダー用テキスト部分をpreg_replace()
を使ってそれらに置き換えるということをしています。
functions.php
if ( ! function_exists( 'custom_posts_pagination' ) ) {
function custom_posts_pagination( $currentNumClass = 'page-current-number', $separate = ' / ', $maxNumClass = 'page-max-number' ) {
global $wp_query;
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
$max_page = $wp_query->max_num_pages;
if ( ! empty( $currentNumClass ) ) {
$currentNum = '<span class="' . $currentNumClass . '">' . $paged . '</span>';
} else {
$currentNum = $paged;
}
if ( ! empty( $maxNumClass ) ) {
$maxNum = '<span class="' . $maxNumClass . '">' . $max_page . '</span>';
} else {
$maxNum = $max_page;
}
$pagination_numbers = '<div class="nav-numbers">' . $currentNum . $separate . $maxNum . '</div>';
$pagination_html = preg_replace( '/\<h2 class=\"screen-reader-text\"\>(.*?)\<\/h2\>/', $pagination_numbers, get_the_posts_pagination() );
echo $pagination_html;
}
}
あとは実際にページネーションを表示させたい箇所に<?php custom_posts_pagination(); ?>
と記述すれば、デフォルトでスクリーンリーダー用テキストが表示されていた部分がページ数表示になった状態でページネーションが表示されているのを確認できます。
ちなみに、それぞれページ数表示にスタイルを指定しやすいようにclassが付与されるようにしており、それらを使用箇所によって異なるものにしたい場合は、引数で任意のものに指定すれば反映され、タグやclassなどが邪魔であれば値を空にすることで単純に数字のみ表示されます。
また、例えば「5 / 10」のような表示のときに真ん中に表示される「/」のセパレータ部分を$separate
の引数で任意のものに変更できます。