メールで読めるブログ購読

メールアドレスを記入してください。
更新ブログをメールで受信できます。

Toggle

WordPress

WordPress(ワードプレス)で投稿一覧にページャーやソートを付ける方法「WP-PageNavi」

WordPress(ワードプレス)で投稿一覧にページャーやソートを付ける方法「WP-PageNavi」

ページャーの作り方

ページャーは今回、WordPressページナビゲーション(ページ送り)を作成する「WP-PageNavi」というプラグインを利用します。

1. WPプラグイン「WP-PageNavi」をインストールする

  1. WordPressのメニューから下記の手順でインストールし、有効化する。
    • 「プラグイン」→「新規追加」→「WP-PageNavi」を検索→「いますぐインストール」→「有効化」

2. ページャーの設置

ページャーを表示したい場所に下記のコードを実装します。

3. プラグインの設定

WordPressのメニューから「設定」→「PageNavi」から設定できます。

ページナビゲーションテキストの設定
  • 総ページ用テキスト
    「1 / ○○」というように、現在閲覧しているページと総ページのテキスト設定ができます。
    削除して表示させないように設定することも可能。
  • 最初のページ用テキスト
    インストール時の初期設定では、「« 先頭」と設定されています。
    公開日順でワードプレスを運用しているなら「« 最新」とか、サイトのデザインによっていは英語表記などにしてもいいかもしれません。
  • 最後のページ用テキスト
    初期設定では、「最後 »」と設定されています。
  • 前のページ用テキスト
    初期設定では、「«」と設定されています。「前へ」や「Previous」に変更するのもありですね。
  • 次のページ用テキスト
    初期設定では、「»」と設定されています。「次へ」や「Next」に変更するのもありですね。
  • 「前へ…」用テキスト
    初期設定では、「…」と設定されています。お好みの設定に変更しましょう。
  • 「次へ…」用テキスト
    初期設定では、「…」と設定されています。お好みの設定に変更しましょう。
ページナビゲーションの設定
  • pagenavi-css.css を使用
    チェックを入れるとあらかじめ用意されたスタイル(css)に設定されます。
    関連プラグインの「WP PageNavi Style」を使って、ページナビゲーションのスタイルを変更することもできます。
  • Page Navigationスタイル
    スタイルを「通常」と「ドロップダウンリスト」から選択できます。
  • 表示するページ数
    初期設定は「5」になっています。
    その場合、「ページ 1,2,3,4,5…」のように表示されます。
  • 省略するページ数
    初期設定の「3」の場合、「ページ 1,2,3,4,5…10…20…30…最後」のように表示されます。
    「1」の場合、「ページ 1,2,3,4,5…10…最後」と表示されます。
  • 省略ページを以下の倍数で表示
    初期設定の「10」の場合、「10,20,30…」と表示されます。
    「5」の場合、「5,10,15,20…」と表示されます。

ソートボタン(新しい・古い順)の作り方

WordPressは基本URLにパラメータを追加することで投稿の並び替え・絞り込みができます。
WP_Queryのパラメーターを使い、様々な条件を指定することができます。

パラメーター 内容 概要
order 昇降順 ‘ASC’で昇順、’DESC’で降順(初期値は’DESC’)
orderby 何で どのパラメーターでソートするか(初期値は’date’)
‘none’:並び替えない
‘ID’:記事IDでソート
‘author’:投稿者でソート
‘title’タイトルでソート
‘name’:ユーザー名でソート
‘date’:日付でソート
‘modified’:更新日でソート
‘parent’親ページのIDでソート
‘rand’:ランダムでソート
‘comment_count’:コメント数でソート
‘menu_order’:ページの表示でソート
‘meta_value’:カスタムフィールドの値を文字列としてソート
‘meta_value_num’:カスタムフィールドの値を数値としてソート
‘post_in’配列で指定された記事IDの並び順を維持

※カスタムフィールドやカスタム投稿のパラメーターはデフォルトでは使えないのでfunctions.phpをカスタマイズする必要があります。
「query_vars」フィルターフックを使い、カスタムフィールドのキーと値がURLパラメータとして認識されるようにします。
カスタムクエリの追加方法はWordPress Codex日本語版に詳しく記載されてます。

並び替えボタンを作成する

実際に並び替えをするには<a>タグ(リンク)を使用して、「add query arg」関数を使い、クエリを付けたURLを取得します。

1. 投稿順で並び替える

2. 人気順で並び替える

プラグインの「WP-PostViews」を使用すれば、記事の回覧数をカスタムフィールドの「views」というmeta_keyに値(回覧数)を保存するようになります、この値を利用して人気順としてソートすることができます。
「get_pagenum_link(1)」という記述は、並び替えをしたとき強制的に1ページ目を表示させます。

注意点・ポイント

管理画面上からドラッグ・アンド・ドロップで並び順を変更できるプラグイン「Intuitive Custom Post Order」を有効にしていると、「order」で降順、昇順の並び替えがうまくいきませんでした。
記事並び替え系のプラグインを使用しているとバッティングして挙動がおかしくなることがあるので、その場合はソートを利用するカテゴリや投稿のみ「Intuitive Custom Post Order」の機能をOFFにしておきましょう!

MONA流:セットで設定する

ページャーとソート機能はセットで設置されているのがベストだと思っています。
下記は私がいつも使っている実装方法。

 

参考にさせていただいたサイト

Return Top