こんちには、金田です。
秋なのにたまに暑い日がありますね。過ごしやすい日が続くといいのですが、もう少ししたら寒くなるのでしょうか?
さて本日はワードプレスのページ送りを番号付にカスタマイズする方法をご紹介します。
使用するテーマによりますが、ページ送りが「次のページ」「前のページ」のケースがあると思います、好みにもよりますが番号付のページ送りの方がガッツリ戻れたり、任意のページを選択出来たりと何かと便利ではないでしょうか?
ページャー(カスタマイズ前)
既存テーマのページ送りの例です。(テーマにより異なります。あくまで一例です。)
前へ・次へというバージョンです。これではちょっと使いづらいですね。
<div class="navigation">
<div class="prev"><?php previous_posts_link(); ?></div>
<div class="next"><?php next_posts_link(); ?></div>
</div>
ページネーションに変更する
番号付のページ送りの例です。
前へ・次へというリンクに加え、ページ番号のリンクがあるタイプに変更します。
現在使用しているテーマから、ページャーの記述部分を下記のコードに置換してください。
直接書く方法と、読み込む方法を例示します。
index.phpなどのループの外に直接書く場合
<?php
global $wp_query;
$bignum = 999999999;
if ( $wp_query->max_num_pages <= 1 )
return;
echo '<nav class="text-center">';
echo paginate_links( array(
'base' => str_replace( $bignum, '%#%', esc_url( get_pagenum_link($bignum) ) ),
'format' => '',
'current' => max( 1, get_query_var('paged') ),
'total' => $wp_query->max_num_pages,
'prev_text' => '←',
'next_text' => '→',
'type' => 'list',
'end_size' => 3,
'mid_size' => 3
) );
echo '</nav>';
?>
オプションなど詳しくはWordPress日本語Codexのサイトを参照してください。
functions.phpから読み込む場合
index.phpなどのループの外
<?php example_page_navi(); ?>
functions.php
function example_page_navi() {
global $wp_query;
$bignum = 999999999;
if ( $wp_query->max_num_pages <= 1 )
return;
echo '<nav class="text-center">';
echo paginate_links( array(
'base' => str_replace( $bignum, '%#%', esc_url( get_pagenum_link($bignum) ) ),
'format' => '',
'current' => max( 1, get_query_var('paged') ),
'total' => $wp_query->max_num_pages,
'prev_text' => '←',
'next_text' => '→',
'type' => 'list',
'end_size' => 3,
'mid_size' => 3
) );
echo '</nav>';
} /* end page navi */
オプションなど詳しくはWordPress日本語Codexのサイトを参照してください。
出力されるHTML(現在位置が2ページ目の例)
<nav class="text-center"><ul class="page-numbers">
<li><a href="http://127.0.0.1/wp/page/1/" class="prev page-numbers">←</a></li>
<li><a href="http://127.0.0.1/wp/page/1/" class="page-numbers">1</a></li>
<li><span class="page-numbers current">2</span></li>
<li><a href="http://127.0.0.1/wp/page/3/" class="page-numbers">3</a></li>
<li><a href="http://127.0.0.1/wp/page/3/" class="next page-numbers">→</a></li>
</ul>
</nav>
CSSでデザインを整えればOKです。下記はBootstrap3をベースにしたCSSのサンプルです。
よろしければベースとしてご利用ください。
.text-center{
text-align: center;
}
ul.page-numbers {
border-radius: 4px;
display: inline-block;
margin: 20px 0;
padding-left: 0;
}
ul.page-numbers > li {
display: inline;
}
ul.page-numbers > li > a ,
ul.page-numbers > li > span {
background-color: #ffffff;
border: 1px solid #dddddd;
color: #428bca;
float: left;
line-height: 1.42857;
margin-left: -1px;
padding: 6px 12px;
position: relative;
text-decoration: none;
}
ul.page-numbers > li:first-child > a {
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
margin-left: 0;
}
ul.page-numbers > li:last-child > a {
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
}
ul.page-numbers > li > a:hover {
background-color: #eeeeee;
border-color: #dddddd;
color: #2a6496;
}
ul.page-numbers .current{
background-color: #428bca;
border-color: #428bca;
color: #ffffff;
cursor: default;
z-index: 2;
}
まとめ
- 「前へ」「次へ」に加え、「ページ番号」のリンクもあれば便利!
- 既存のテーマをページ番号付のリンクを出力するコードに置き換えれば実現可能
サイトによって、ベストは異なると思います。ユーザービリティーを高めるにはコツコツと改善することが必要だと考えます。