99%実体験に基づく生々しい情報を発信中
  • twitter

【コピペで実装】ページネーションの簡単な作り方【WordPress初心者向け】

  • ページネーションって何?
  • 作り方を知りたい。
  • コピペで簡単に実装したい!!!

こんな方向けの記事になります。

ページネーションを作る方法には、他にも「プラグインで実装する」などがあります。
とはいえ、プラグインは管理するのが大変ですし、サイトの表示スピードも遅くなったりしますので、なるべく自作で作るのが良いのかなと思います。

本記事ではコード解説もしますが、コピペのみで作れるようになっておりますのでサクッと「ページネーション」を作りたいという方は参考にしてみてください。

それではいきましょう。

※理解しやすくシンプルに作ったので、環境によってはエラーが出るかも・・・。その場合は連絡いただけると幸いですm(__)m

ページネーションの簡単な作り方【コピペで実装】

下記の順番で解説していきます。

  • 基礎知識:ページネーションとは?
  • 手順①:functions.phpにコード記述
  • 手順②:表示する場所にコード記述
  • ページネーションのCSS

ページネーションの解説が不要な方は、飛ばして読んでみてください。

基礎知識:ページネーションとは?

1ページに収まらないコンテンツを複数のページに分けるナビゲーションの事をいいます。

ブログなどの記事一覧で10記事毎にページが別れていたりしますよね。あれがページネーションです。このブログにもページネーションがありまして下記のようなナビゲーションがページネーションになります。

ページネーション

ブログなどを運営する上で必須になると思います。
本記事では、上記の画像の「ページネーション」を作っていきます。このブログで使っているものを、シンプルに作り替えました。

※コピペで作れます。

手順①:functions.phpにコード記述

functions.phpに下記のコードをコピペしましょう。

functions.php
//ページネーション function my_paging_nav() { //グローバル変数を宣言 global $wp_query , $wp_rewrite; // ページ数が2より小さかったらページネーションを表示しない if ( $wp_query->max_num_pages < 2 ) { return; } // ページがあればページ数を取得、なければ1を入れる $paged = get_query_var( 'paged' ) ? intval( get_query_var( 'paged' ) ) : 1; // パーマリンクの設定をしていたら、それに従い表示する。デフォルトなら「?paged=%#%」で表示する $format = $wp_rewrite->using_permalinks() ? user_trailingslashit( $wp_rewrite->pagination_base . '/%#%', 'paged' ) : '?paged=%#%'; //ページネーションの設定 $links = paginate_links( array( 'base' => get_pagenum_link() . '%_%', //URLのベース 'format' => $format, //ページネーションのリンクの構造 'total' => $wp_query->max_num_pages, //ページ数(全ページを指定) 'current' => $paged, //現在のページの位置 'mid_size' => 1, //現在のページの両側に表示する数 'prev_text' => '前へ', 'next_text' => '次へ', ) ); if ( $links ) : ?> <!-- 表示されるHTMLの構想(お好みで変更してね) --> <nav role="navigation"> <ul class="page-numbers"> <li><?php echo $links; ?></li> </ul> </nav> <?php endif; }

コードの解説をコメントアウトで書きましたので、参考にしてみてください。いらない場合は消してOKです。「ページネーションの設定」の部分だけ深掘りして解説していきます。

ページネーションの設定

PHP
//ページネーションの設定 $links = paginate_links( array( 'base' => get_pagenum_link() . '%_%', //URLのベース 'format' => $format, //ページネーションのリンクの構造 'total' => $wp_query->max_num_pages, //ページ数(全ページを指定) 'current' => $paged, //現在のページの位置 'mid_size' => 1, //現在のページの両側に表示する数 'prev_text' => '前へ', 'next_text' => '次へ', ) );

paginate_linksという関数を使ってページネーションの設定をしています。特にこのまま変更しなくても問題なしなのですが、下記の部分だけお好みで変更して頂ければと思います。

  • mid_size:現在のページの両端に表示する数
  • prev_text:「前へ」を好きな文字に変える
  • next_text:「次へ」を好きな文字に変える

上記は僕の好みで設定しているので変えてOKです。エラーも出ないと思います。

手順②:表示する場所にコード記述

ページネーションを表示したい場所に下記のコードをコピペしましょう。記事一覧のあるindex.phpやarchive.phpですかね。

PHP
<?php my_paging_nav(); ?>

functions.phpでページネーションの関数を作り、それを呼び出しているイメージです。正常に表示されていれば完成です。

ページネーションのCSS

ページネーションのスタイルが欲しい方向けにCSSを貼っておきますね。

CSS
.page-numbers { text-align: center; list-style-position: inside; list-style-type: none; padding: 0; } .page-numbers li { display: inline-block; } .page-numbers a { display: inline-block; padding: .5rem; margin: 0 .2rem .2rem 0; background: #fff; border: 1px solid #ccc; } .page-numbers span { display: inline-block; padding: .5rem; margin: .2rem; border: 1px solid #ccc; }

以上で「ページネーション」は完成です。

ページネーションの作り方を調べると、色々なコードを出てくると思います。ですが、皆さん色々とアレンジして複雑になっており、初心者の方には理解しづらいなと思い簡潔にシンプルに作りました。

まずは、このコードで「ページネーション」を作り改善点が出てきたら自分なりにアレンジして頂ければなと思います。

それではまたね。