ブラグインを使わずページネーションを追加する方法。
投稿(post)、カスタム投稿タイプでも動きます。また固定ページに作成した一覧ページでも動きます。
PHP(テンプレートに記載)
<div class="pagination">
<?php
global $wp_rewrite;
$big = 999999; // 非常に大きい数値を設定
$max_page_num = $wp_query->max_num_pages;
$paginate_base = get_pagenum_link(1);
if(strpos($paginate_base, '?') || ! $wp_rewrite->using_permalinks()){
$paginate_format = '';
$paginate_base = add_query_arg('paged','%#%');
}
else{
$paginate_format = (substr($paginate_base,-1,1) == '/' ? '' : '/') .
user_trailingslashit('?paged=%#%','paged');;
$paginate_base .= '%_%';
}
$pagination_args = array(
'base' => $paginate_base,
'format' => $paginate_format,
'current' => max(1, get_query_var('paged')),
'total' => $wp_query->max_num_pages,
'current' => ($paged ? $paged : 1),
'prev_text' => 'Prev',
'next_text' => 'Next',
'mid_size' => 2, // 任意の数値(現在のページ番号の両端にページ番号をいくつ表示させるか)
'end_size' => 1, // 任意の数値(両端に何個のページ番号を表示するか)
);
$pagination = paginate_links($pagination_args);
// 現在のページ番号
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
if ($pagination) {
// 「最初へ」ボタン ………… 1ページ目以外で表示
if ($paged != 1) {
echo '<a href="' . get_pagenum_link(1) . '" class="first">< 最初へ</a>';
}
echo '<nav>' . $pagination . '</nav>';
// 「最後へ」ボタン ………… 最後のページ以外で表示
if ($paged != $max_page_num) {
echo '<a href="?paged=' . $max_page_num . '" class="last">最後へ ></a>';
}
}
?>
</div>
function.phpに追記
//ページ送り追加設定
add_filter('redirect_canonical','my_disable_redirect_canonical');
function my_disable_redirect_canonical( $redirect_url ) {
if ( is_archive() ){
$subject = $redirect_url;
$pattern = '/\/page\//'; // URLに「/page/」があるかチェック
preg_match($pattern, $subject, $matches);
if ($matches){
//リクエストURLに「/page/」があれば、リダイレクトしない。
$redirect_url = false;
return $redirect_url;
}
}
}
吐き出されるHTMLは以下
<div class="pagination">
<a href="" class="first">< 最初へ</a>
<nav>
<a class="prev page-numbers" href="">Prev</a>
<a class="page-numbers" href="">1</a>
<span class="page-numbers dots">…</span>
<a class="page-numbers" href="">3</a>
<a class="page-numbers" href="">4</a>
<span aria-current="page" class="page-numbers current">5</span>
<a class="page-numbers" href="">6</a>
<a class="page-numbers" href="">7</a>
<span class="page-numbers dots">…</span>
<a class="page-numbers" href="">19</a>
<a class="next page-numbers" href="">Next</a>
</nav>
<a href="" class="last">最後へ ></a>
</div>
ページネーション用のスタイルシートを参考までに記載します。
お好みで調整してください。ちょっと調整したもらった方が良いかも。
/*ページネーションのスタイル*/
.pagination{
clear:both;
text-align: center;
font-size: 17px;
line-height: 100%;
}
.pagination a,
.pagination span{
position: relative;
display: inline-block;
text-align: center;
vertical-align: middle;
text-decoration: none;
width: 30px;
height: 30px;
margin: 0 10px;
}
/*ページネーション番号*/
.pagination nav{
display: inline-block;
vertical-align: middle;
}
.pagination nav a,
.pagination nav span.current{
margin-top: 0.95em;
opacity: 1 !important;
color: #aaa;
}
.pagination nav a::after,
.pagination nav span.current::after{
content: '';
width: 30px;
height: 30px;
border-radius: 16px;
position: absolute;
top: 0.5em;
left: 50%;
margin: -1em 0 0 -0.95em;
z-index: -1;
transition: 0.3s ease-in-out;
background-color: #ddd;
border: solid #ddd 1px;
}
.pagination nav span.dots{
width: auto;
margin: 0.5em 0 0 0;
color: #aaa;
}
/*ホバー時*/
.pagination nav a:hover,
.pagination nav span.current:hover{
color: #fff;
}
.pagination nav a:hover:after,
.pagination nav span.current:hover::after{
background-color: #aaa;
border: solid #aaa 1px;
}
/*現在のページ番号*/
.pagination nav span.current{
font-weight: 700;
color: #fff;
}
.pagination nav span.current::after{
background-color: #333;
border: solid #333 1px;
}
/*前へ、次へボタン*/
.pagination nav a.prev,
.pagination nav a.next{
width: 30px;
height: 30px;
margin-top: 0;
text-indent: -99999px;
border-radius: 16px;
}
.pagination nav a.prev::after,
.pagination nav a.next::after{
display: none;
}
.pagination nav a.prev{
background: url(../../images/pagination_arrow_prev.png) center center no-repeat;
background-size: auto 8px;
background-color: #fff;
border: solid #fff 1px;
}
.pagination nav a.next{
background: url(../../images/pagination_arrow_next.png) center center no-repeat;
background-size: auto 8px;
background-color: #fff;
border: solid #fff 1px;
}
.pagination nav a.prev:hover,
.pagination nav a.next:hover{
opacity: 0.6 !important;
}
/*最初へ、最後へボタン*/
.pagination a.first,
.pagination a.last{
display: inline-block;
width: 30px;
height: 30px;
text-indent: -99999px;
border-radius: 16px;
margin: 0;
}
.pagination a.first{
background: url(../../images/pagination_arrow_first.png) center center no-repeat;
background-size: auto 8px;
background-color: #fff;
border: solid #fff 1px;
}
.pagination a.last{
background: url(../../images/pagination_arrow_last.png) center center no-repeat;
background-size: auto 8px;
background-color: #fff;
border: solid #fff 1px;
}
.pagination a.first:hover,
.pagination a.last:hover{
opacity: 0.6 !important;
}
1ページに表示する件数は、wordpress管理画面 > 設定 > 表示設定から「1ページに表示する最大投稿数」を変更してください。