【WordPress】プラグイン無し、カンタンページネーション作成・パラメータ指定例も紹介(paginate_links)

                      2766文字

【WordPress】プラグイン無し、カンタンページネーション作成・パラメータ指定例も紹介(paginate_links)

今回は、WordPressでオリジナルテーマを作るときに使うかもしれない『ページネーション(ページャー)』について取りあげます。サイトの下のほうについていて『1ページ目・2ページ目』みたいな、あれです。
カスタム投稿タイプのときは少しコツが必要ですが、通常メインループの場合はサックリと実装できます。さっそくこのサイトで実験。『元の状態・ページネーション&パラメータ・カスタム投稿の場合』などを確認していきましょう。

このサイト・元の状態(functions.phpで設定したページネーション)


まずは、このサイトでテストする前に元の状態のページネーションを確認します。下のグレーの部分です。


これは『functions.php』でパラメーターや出力タグなどを指定して、『pagination($wp_query->max_num_pages)』で任意の場所に出力するタイプのページネーションです。もともとstinger過去バージョンに入っていたのを、管理人が改造しました。これを使ってもいいんですが、『WPサクッとページネーションの実験』のため、一時非表示にします(カット・または//でコメントアウト)。


消しました。それでは実験開始!

組み込みファンクションpaginate_links()でページネーション出力する方法

メインループなら、paginate_links()でカンタン出力


それではWordPressページネーションをサクッと作ってみましょう。WP組み込みファンクション『paginate_links()』を、任意の場所に記載します。『()』はパラメータが入りますが、空にするとデフォルト状態になります。
トップページなどに使う場合は『index.php / home.php』など。カテゴリやタグの一覧に使う場合は『archive.php』に記載します(一般には)。


特にパラメータを指定しない場合は、このような形のページネーションが出力されます。カスタム投稿やフィールド条件指定などを使っていない場合のメインループでは、このようにサックリ出力することが可能です。

サイズなどを調整したい場合は、出力されるCSSのクラスも


状況によっては、『字が小さい』などの理由で、少しユーザビリティが良くないかもしれません。ソースをみて、どのようなCSSクラスが出力されているかを調べます。
『page-numbers』『current(現在のページ)』『next(次のページ)』といったCSSクラスが確認できました。

ページネーション部分をdivでくくるとか、これらのクラスにfont-sizeやletter-spacing・インライン要素左右のmargin/paddingを調整して見やすくできます。

『’show_all’=>true,’prev_next’ => false,』のように、パラメータを指定してみる


次は、パラメータを指定してみます。やり方はshow_allなどを指定して、変数$args(変数名は何でもいいです)に格納。paginate_linksに渡します。『’show_all’=>true』というのが『全部表示』、『’prev_next’ => false』というのが『リストの中に「前へ」「次へ」のリンクを含まない(trueだとリンクが出る)』です。


このように『ページネーションが全部出て、「前へ」「次へ」のリンク無し』という形式に変更できました。このほかにも使えるパラメータがあるので、codexの『関数リファレンス/paginate_links』もご覧ください(url形式/フォーマットなどは使う頻度が高そうです)。

カスタム投稿のループのときの対応はどうするか?

これまで行ってきたページネーションは『メインループの投稿・タグ・カテゴリ』などにサクッと対応します。しかし、『カスタム投稿・カスタムフィールド条件絞り込み』などが入ってきた場合、少し工夫しなければなりません(管理人は以前お仕事でこのケースにあたったことがあります。メインループ用ページネーションが上手く動かないことがありました)。

具体的には、『WP_Queryに、’post_type’ => 〇〇〇のように、カスタム投稿を取れるよう指定(またはフィールド名など)』『表示用のテンプレートファイル』『paginate_linksのパラメーターに’total’ => $the_query->max_num_pagesといった指定』などでしょうか(他にも指定するべきパラメータはあります。)。

以下にカスタム投稿タイプページネーションや、WP_Queryで指定できるパラメータ(ページネーションに渡します)についてのリンクがあるので、こちらもご覧ください。

あとがき・まとめ

  • WordPressのメインループのページネーションは、WP組み込みファンクション『paginate_links()』で出力できる
  • デザイン調整をしたい場合は、CSSクラスをチェックする
  • パラメータ指定により、内容を変えることも可能
  • メインループの投稿・タグ・カテゴリはサクッと対応できるが、カスタム投稿タイプの場合は$wp_queryにpost_typeを渡すなどの工夫が必要

まとめると、このようなところでしょうか。メインループの投稿・タグ・カテゴリに関しては、割と簡単に対応できるので、プラグインなどを気にしなくてもよいでしょう。パラメータやCSS調整・カスタム投稿のループのときの対応なども合わせて、チェックしていただければと思います。

WordPressサイト制作&リニューアル・機能開発サービス | アトリエSS


【カテゴリ】 - wpサイト制作事例
【タグ】 - ,

  関連記事

【WordPress】人気記事表示のしかた~PVカウント・フィールド格納&ソート(ログイン者カウントなし)
WPログアウト機能『wp-login.php?action=logout』と『wp_logout_url』の違い~後者はwpnonceで一発ログアウト
WordPressのカスタムフィールド値で記事を絞り込み・検索するサイトの作り方・一部始終を徹底解説
別ディレクトリでの記事の管理・表示を、1つのWordPressを使いまわして対応する方法(プラグイン無しカスタム投稿・wp-blog-header.php)
【WordPress】カスタム投稿・カスタムフィールドでオプション項目を作り、管理画面から操作する方法
【オリジナルWPサイト】スターターテーマ&フレームワーク・Materializeでオリジナルデザイン(レストラン風)
サイト制作お仕事事例~WPで仮想通貨投資情報サイトを(justiceクリプトカレンシーズ・AID LLCさま)
サイト制作事例~バンド・音楽情報サイト・ブログをオウンドメディアサイトに(ミュージックサロンp+luckさま)
WordPressサイトに、Microsoft Azureを使って、シングルサインオン機能(パスワードベース・プラグイン無し)を実装してみる
アンテナサイト風?WordPress『fetch_feed』&配列要素指定で、複数サイトRSS取得とパラメーターでサイトを切り替える方法
【WordPress】プラグイン無し、カンタンページネーション作成・パラメータ指定例も紹介(paginate_links)
【WordPressテーマ改造】カスタマイザープレビューが表示されなくなった件の対応(ファンクション名変更・twenty seventeen)