エンジニアが学んだことをお伝えします

2018-08-29 Blog

WordPressのページネーション機能をプラグインなしで設定する方法と実践

新着記事などの数が増えると、全ての記事を1ページに一覧表示することはできない。そこで、前後のページに送るページネーション機能が必要となる。

WordPressでプラグインなしでページネーションを設定する方法について、色々調査し、僕なりの方法をまとめるので参考にしてもらえればと思う。

当ページのページネーション設定

僕のブログのページネーション表示は以下の通り。

ページネーション

基本方針:とにかくシンプルなページネーションを志向

基本設定:

 

コード詳細

以下に当ブログのページネーションのコードを示す:

<?php
$args = array (
'prev_text' => '<i class="fa fa-chevron-circle-left"></i>',
'next_text' => '<i class="fa fa-chevron-circle-right"></i>',
'mid_size' => 3,
);
?>
<?php the_posts_pagination( $args ); ?>

このコードは新着記事の一覧表示を行うPHPに記載する。当ブログの場合index.php。個別に設定している内容は以下の通り。

  1. ‘prev_text’ =>にて前のページへ戻る文字(ボタン)を指定している
  2. ‘next_text’=>にて次のページへ送る文字(ボタン)を指定している
  3. ‘mid_size’は現在のページ番号の両端に番号をいくつ表示するか、を指定する

上記1.2.において使用している<i class>コードはFont Awesomeのアイコンを指定するもの。Font Awesomeを使用するには少し設定が必要なので、以下の記事も参考にしてもらえればと思う。

関連記事:Font Awesomeを活用してカテゴリーリストをオシャレにする方法

Font Awesomeでエラー発生。Font Awesome 5に対応することでとりあえず解決?

 

3.’mid_size’については3つとした理由は2つある。バランスを見て3とした。

デザインについて。CSS詳細

ボタンの見ためをCSSで設定する。僕のブログで使用しているコードは以下の通り。

.pagination h2.screen-reader-text { display: none; }
.pagination a {
padding: 2px 10px;
display: inline-block;
color: #666666;
font-size: 14px;
border-radius:15px;
}
.pagination span {
padding: 5px 10px;
display: inline-block;
}
.pagination span.current {
background-color:#e8e8e8;
border-radius:15px;
padding: 0px 10px;
}
.pagination {
overflow: hidden;
margin-top: 20px;
margin-bottom: 20px;
text-align: center;
clear: both;
}

どこをどういじると見た目がどう変わるかは、実際に変えて確認してほしい。CSS変更のたびに自分のページを再表示かけるのは大変なのでSafariをブラウザとして使っている方は以下の記事も参考にしてもらえれば幸い。

SafariのWeb開発ツールが便利。導入方法と、CSS変更による影響確認の使い方を解説します

素人が色々な方のコードを参考に使っているものなので、あくまで参考程度としてもらえればと思う(何かご意見をいただければ大変うれしく思います。)。

1行目の.pagination h2.screen-reader-text { display: none; }については、最初意味がわからなかったのだが、CSSから消してみると意味が理解できた。

これを消すと以下のような表示がページネーションに現れるのだ。これは確かに不要である。display:none;とはそういうことのようだ。

まとめ

シンプルなページネーション機能はプラグインなしでも、簡単なコードで搭載することができる。

装飾もCSSでいじくればそれっぽく見せることはできるので、自分でカスタマイズしたい人はぜひ試してみてはいかがでしょうか。

HOME

RELATED POST

   

NEW POSTS

CATEGORY



Yo
30代エンジニア。日々の生活や読書、仕事や海外での経験から学んだことをまとめるブログ。
好きなものはApple製品、コーヒー、革製品、デニム。旅とカメラも。Less is More.な生活に憧れる。
Profile詳細

© Yo 2017