WordPressで簡単、プラグインなしでページネーション設置方法。

WEB制作、マーケティングに関する情報をお届けします。

WordPressで簡単、プラグインなしでページネーション設置方法。

2018.04.28

カテゴリ：WEB制作

タグ：

Wordpress

WordPressでサイト制作時には導入することが多いページネーション導入方法です。
「ページネーション設置」などで検索しているとfunctions.phpを触るものなどがかなりたくさん出てきますが、ループする際にページネーションを指示するだけなので直書きで問題ないです。
細かい説明も紹介しております。

インデックス

コードについて

コードについて

外部フォント(アイコン)を読み込み

矢印アイコンを使用するため外部フォントを読み込みます。
header.phpでスタイルを読み込ませてください。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

PHPを編集

以下の処理を一覧ページなどのページネーションを使用したいところに貼り付けます。

<!--ループの処理-->
<ul>
<?php
    $page_number = get_query_var('paged'); //現在のページ番号を取得
    $page_number = $page_number == 0 ? '1' : $page_number; //$page_number == 0がもし0だった場合は1を代入、0以外であれば$page_numberをそのまま出力
    $args = array(
        'posts_per_page' => 10, //1ページに表示させる記事数をを指定
        'paged' => $paged,　//ページ送りを設定するかどうかを指定
    );
    $the_query = new WP_Query($args);
    if ( $the_query->have_posts() ) :
        while ( $the_query->have_posts() ) : $the_query->the_post();
?>
    <li>ここに記事の処理</li>
<?php endwhile;	?>
<?php else:  ?>
    <li>記事がありません。</li>
<?php endif; ?>
</ul>
            
            
<!--ここからページネーション-->
<?php
    $post_num = get_option('posts_per_page'); //1ページに投稿する記事数を取得
    $Post_no = wp_count_posts('post'); //記事数を取得
    $Post_no = $Post_no->publish; //公開済みの記事数を取得
?>			
<?php
    if ($the_query->max_num_pages > 1) {　//ページが複数あるかどうかをチェック
        echo '<div class="pagination">'.paginate_links(array( //paginate_linksリンクで値を渡してページネーションを生成
            'base' => get_pagenum_link(1) . '%_%',
            'format' => 'page/%#%/',
            'current' => max(1, $paged),
            'prev_text' => '<i class="fa fa-angle-left"></i>',
            'next_text' => '<i class="fa fa-angle-right"></i>',
            'total' => $the_query->max_num_pages
        )).'</div>';
    }
?>
<?php wp_reset_postdata(); ?>

CSSを追加

CSSでデザインを定義します。

.pagination {
  margin: 60px auto 90px;
  padding: 10px 0;
  text-align: center
}

.pagination a {
  font-size: 9pt;
  line-height: 35px;
  text-align: center;
  letter-spacing: 0;
  display: inline-block;
  height: 35px;
  width: 35px;
  border-radius: 50%;
  background: #f3f3f3;
  transition: .3s
}

.pagination a:hover {
  color: #FFF;
  background: #323232;
}

.pagination span {
  font-size: 9pt;
  line-height: 35px;
  text-align: center;
  letter-spacing: 0;
  display: inline-block;
  height: 35px;
  width: 35px;
  border-radius: 50%;
  background: #f3f3f3
}

.pagination span.dots {
  background: 0
}

.pagination span.current {
  background: #323232;
  color: #fff
}

スタイルを適用すると上のようなページネーションになります。
必要に応じてスタイルを書き換えてください。

出力されるHTML

出力されるコードは以下のような感じになります。

<div class="pagination">
	<span aria-current='page' class='page-numbers current'>1</span>
	<a class='page-numbers' href='◯◯◯◯◯'>2</a>
	<a class='page-numbers' href='◯◯◯◯◯'>3</a>
	<span class="page-numbers dots">&hellip;</span>
	<a class='page-numbers' href='◯◯◯◯◯'>6</a>
	<a class="next page-numbers" href="◯◯◯◯◯"><i class="fa fa-angle-right"></i></a>
</div>