WordPressでページネーションを作る

プラグインを使用する場合、反映されるソースが下記と決まっている。なので、予め静的コーディングする際にこのクラス名でコーディングする必要がある。

WP-PageNaviの場合

 <div class="wp-pagenavi">
   <span class="pages">2 / 4</span>
   <a class="previouspostslink" rel="prev" href="/example.com/news/">«</a>
   <a class="page smaller" title="Page 1" href="/example.com/news/">1</a>
   <span class="current">2</span>
   <a class="page larger" title="Page 3" href="/example.com/news/page/3/">3</a>
   <a class="page larger" title="Page 4" href="/example.com/news/page/4/">4</a>
   <a class="nextpostslink" rel="next" href="/example.com/news/page/3/">»</a>
 </div>

コンポーネントのクラス名を使用していたり、html構造を変更しないと実装できない場合などは、下記のようにプラグインなしで実装する方法もある。

index.php
 
//ループ文の上に記述しておく。
 $paged = get_query_var('paged')? get_query_var('paged') : 1;//現在のページ番号

さらに

index.php

 <?php 
   $pages = $wp_query->max_num_pages;//ページ数
 ?>
 <div class="c-navigation" role="navigation">
   <?php if($paged != 1): ?>
   <a class="c-navigation-page" href="<?php echo home_url(); ?>/news/page/1/"><<</a>//最初のページ
   <?php endif; ?>
   <?php if($paged - 1 > 0): ?>
   <a class="c-navigation-page" href="<?php echo home_url(); ?>/news/page/<?php echo $paged - 1 ?>/"><?php echo $paged - 1 ?></a>//前のページ
   <?php endif; ?>
   <span class="c-navigation-page current"><?php echo $paged ?></span>//現在のページ
   <?php if($paged + 1 <=  $pages): ?>
   <a class="c-navigation-page" href="<?php echo home_url(); ?>/news/page/<?php echo $paged + 1 ?>/"><?php echo $paged + 1 ?></a>//次のページ
   <?php endif; ?>
   <?php if($paged != $pages): ?>
   <a class="c-navigation-page" href="<?php echo home_url(); ?>/news/page/<?php echo $pages ?>/">>></a>//最後のページ
   <?php endif; ?>

投稿個別ページ編

ついでに個別投稿のページネーションもまとめておきます。
下記で前後の投稿のページネーションを実装できます。

shingle.php

<div class="c-detail-navigation" role="navigation">
 <?php 
 $prev_post = get_previous_post();
 $next_post = get_next_post();
 if( !empty( $prev_post ) ):
   $url_prev = get_permalink( $prev_post->ID );//前投稿のパーマリンク取得
 ?>
   <a class="c-detail-navigation-btn c-detail-navigation-btn-prev" rel="prev" href="<?php echo $url_prev ?>">PREV</a>
 <?php 
 endif;
 if( !empty( $next_post ) ):
   $url_next = get_permalink( $next_post->ID );//次投稿のパーマリンク取得
 ?>
   <a class="c-detail-navigation-btn c-detail-navigation-btn-next" rel="next" href="<?php echo $url_next ?>">NEXT</a>
 <?php endif; ?>
 </div>