Wordpressで簡単、プラグインなしでページネーション設置方法。|テラ合同会社

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

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

2018.04.28

カテゴリ：WEB制作

タグ：

Wordpress

Wordpressでサイト制作時には導入することが多いページネーション導入方法です。
「ページネーション設置」などで検索しているとfunctions.phpを触るものなどがかなりたくさん出てきますが、Wordpressの関数があるので数行で簡単に表示可能です。
また、表示のカスタマイズも可能です。
細かい説明は省きますのでコピペして使ってください。

コードについて

下記コードです。
ループの外に下記を設置してください。
「prev_text」「next_text」が矢印になります。表示をカスタマイズしたい場合は書き換えてください。

<div class="pagination">
<?php
    $big = 9999999999;
    $arg = array(
        'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
		'format' => 'page/%#%/',
		'current' => max(1, $paged),
        'prev_text' => '<i class="fa fa-angle-left"></i>',
        'next_text' => '<i class="fa fa-angle-right"></i>'
    );
    echo paginate_links($arg);
?>
</div>

<?php

$big = 9999999999;

$arg = array(

'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),

'format' => 'page/%#%/',

'current' => max(1, $paged),

'prev_text' => '<i class="fa fa-angle-left"></i>',

'next_text' => '<i class="fa fa-angle-right"></i>'

);

echo paginate_links($arg);

</div>

上記にはfontawesomeのアイコンが入っていますので下記をheadタグの中に埋め込んでください。

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

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

出力される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>

</div>

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
}

.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

}

以上で、ページネーションの設置とカスタマイズが可能です。
必要なところに今回のコードを書くだけです。

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