Wordpressでページネーションをつける方法
Wordpressでページネーションを実装する方法についてご紹介。
まず初めにページネーションの実装に当たって固定ページでページネーションを実装しようとするとうまくいかない話。
ページネーションの機能はarchive.phpのファイルに記述することで簡単に実装できた話。
固定ページでページネーションを実装しようとして失敗した話
初めは固定ページに投稿したカテゴリー別の記事を一覧表示するようにphpで書き出していましたが、
ページネーションのコードを埋め込んでもページネーションは表示されるがページネーションを利用してページを変更しても、
初めに表示されている投稿の繰り返しとなってしまう。
archive.phpに記述することで簡単にページネーションの機能を実装できた話。
ページネーションの機能はarchive.phpを作成して、任意の表示したい場所にページネーションの記述をするだけで
ページネーションの機能を実装することができました。
この方法でページネーションを実装するとプラグインを利用することなく、ページネーションを実装できるのでWordpressのバージョン管理も楽になります。
※ちなみにarchive.phpは記事の一覧みたいなもので、ブログ系に適したwordpressだとほとんどindex.phpと代わりがないかもしれません(笑
下記に記載したコードをarchive.phpでページネーションを表示したい場所に記述
<div> <?php global $wp_rewrite; $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('page/%#%/','paged');; $paginate_base .= '%_%'; } echo paginate_links(array( 'base' => $paginate_base, 'format' => $paginate_format, 'total' => $wp_query->max_num_pages, 'mid_size' => 4, 'current' => ($paged ? $paged : 1), 'prev_text' => '«', 'next_text' => '»', )); ?> </div>
CSSに関しては下記のコードを自分のCSSに記述して、自分のサイトデザインに合うようにアレンジしてください。
.pager{ text-align:center; } a.page-numbers, .pager .current{ background:rgba(0,0,0,0.02); border:solid 1px rgba(0,0,0,0.1); border-radius:5px; padding:5px 8px; margin:0 2px; } .pager .current{ background:rgba(0,0,0,1); border:solid 1px rgba(0,0,0,1); color:rgba(255,255,255,1); } <||