コピペでOK!WordPressでページネーションを実装する【WordPressカスタマイズ】

2018年8月29日 2018年9月15日 Wordpressカスタマイズ /

「ページネーション」とは、記事一覧ページなどで表示しきれなかった過去の記事を、ページ送りで表示していく機能です。

ページネーションの実装イメージはこちら。

ページネーションのイメージ

ページネーションのイメージ

絶滅しそうなウナギブロガー絶滅しそうなウナギブロガー

これこれ!見たことあるよ~!

配布されているテーマに基本機能として実装されているとは思いますが、あえてこの記事は具体的な実装方法を紹介します。
テーマのカスタマイズなどに参考になれば幸いです。

ページネーション用に関数を定義する

function.phpに以下のコードを追記します。コピペでOKです!

変更しても良いオプションは次の通りです。
prev_text next_text end_size mid_size

prev_textnext_textは、それぞれ前のページ、次のページへのリンクテキストです。
このコードでは、「←」「→」という矢印を指定しています。

end_sizeは、ページ番号のリストの両端(最初と最後)にいくつの数字を表示するか。

mid_sizeは、現在のページの両側にいくつの数字を表示するか。ただし現在のページは含みません。

その他にもオプションはありますが、基本的なページネーションの実装にはこれで十分です。
オプションの詳細は以下ページを参考に。

参考ページ
関数リファレンス/paginate links

ページネーションを設置する

archive.phpcategory.phpindex.phpなどアーカイブ用テーマファイルに設置します。
次のコードを、ページネーションを設置したい場所にコピペします。

ページネーションのHTML

出力されるページネーションは、次のようなHTMLでマークアップされます。

今いるページ番号には、class currentが自動的に付与されます。
また、前のページにはprev、次のページにはnextが付きます。

 

万が一エラーになった場合は、こちらの記事が参考になるかもしれません。
注意すべきは「スラッグ名被り」です。

WP-PageNaviの2ページ目以降で起こる404エラーの回避方法

コメント

お気軽にコメントをどうぞ。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

ウェルスナビで損失?