WordPress ページを表示するプラグインWP-PageNavi の使い方
ブログの記事が増えてくると、ページ最下部の「以前の記事へ→」「←新しい記事へ」だけじゃ使い勝手が悪いので、Googleで検索したときに一番下に表示される
「1 2 3 4 5・・・・次へ」
のようにページを表示したいですよね。
そんな時に便利なのがWordPressプラグイン『WP-PageNavi』です。
『WP-PageNavi』を使えばブログに、簡単にページナビを設置することができます。
目次
ページナビで巡回率アップ
ブログやサイトに設置するページナビは下図のようなものです。ページャーやページネーションとも言います。
1つ1つの記事に関連性がないブログの場合は、ユーザーに人気記事や関連記事などを見てもらえるような工夫をした方がいいのですが、同じテーマで記事が書かれている場合などは、このページナビがあった方が便利です。
特に、1番初めに書かれた記事など古い記事を読みたい場合には欠かせないものです。
「以前の記事へ→」を何度も何度もクリックするのは大変です。
そんな時、ページナビがあると、ブログを訪れたユーザーにとって使いやすいだけじゃなく、サイト巡回率もあがるので一石二鳥です。
まずはWP-PageNaviをインストール、有効化してください。
プラグインのインストール・有効化はこちらを参考にしてください。
functions.phpを編集する
インストール・有効化ができたら、ページナビを表示するために「functions.php」を編集します。
WordPress管理画面>外観>テーマ編集をクリックします。
右のメニューの上の方に「テーマのための関数(functions.php)」とあるのでクリックします。
下記のような記述を探し、水色でマークされている14~24行目の箇所を変更します。
「変更後」の14~27行目を該当箇所に上書きコピーして、「ファイルを更新」をクリックします。
【変更前】
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
//--------------------------------------------------------------------------- // ページャーを表示する //--------------------------------------------------------------------------- function pager_keni() { $pager = ""; global $wp_query; $max_page = $wp_query->max_num_pages; $now_page = get_query_var('paged'); if ($now_page == 0) { $now_page =1; } if ($max_page > $now_page) { $pager .= "<li class=\"nav-prev\">". get_next_posts_link('以前の記事へ') ."</li>\n"; } if (is_paged()) { $pager .= "<li class=\"nav-next\">". get_previous_posts_link('新しい記事へ')."</li>\n"; } if ($pager != "") { echo "<div class=\"cont-menu-wp\">\n<ul>\n".$pager."</ul>\n</div>\n"; } } |
【変更後】
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
//--------------------------------------------------------------------------- // ページャーを表示する //--------------------------------------------------------------------------- function pager_keni() { $pager = ""; global $wp_query; $max_page = $wp_query->max_num_pages; $now_page = get_query_var('paged'); if ($now_page == 0) { $now_page =1; } // if ($max_page > $now_page) { // $pager .= "<li class=\"nav-prev\">". get_next_posts_link('以前の記事へ') ."</li>\n"; // } // if (is_paged()) { // $pager .= "<li class=\"nav-next\">". get_previous_posts_link('新しい記事へ')."</li>\n"; // } // if ($pager != "") { // echo "<div class=\"cont-menu-wp\">\n<ul>\n".$pager."</ul>\n</div>\n"; // } echo "<div class=\"cont-menu-wp\">"; wp_pagenavi(); echo "</div>"; } |
トップページやカテゴリページ、アーカイブなどページ数の多いページを確認してみて下さい。
下記のようなページナビがついていればOKです。
もちろん、1ページで終わってる場合は表示されません。
スマホの表示を修正する
最近はスマホでブログを閲覧することも多くなっていますので、きちんと表示されているか確認してみましょう。
iphone5sで表示するとこんな風になってしまいました。
iphoneを横にすると大丈夫なんですが...
どうもページナビを表示するには横幅が足りないようですので
ページナビを折り返す対策が必要です。
WordPress管理画面>外観>テーマ編集をクリックします。
右横のメニューから「design.css」を選択します。
下のコードを探して、その下に【変更後】の水色マーカー部分10~15行を追加します。
【変更前】
1 2 3 4 5 6 7 8 |
/*●ページネーション WP用*/ #main-contents .cont-menu-wp{ position: relative; overflow: hidden; width: 100%; /zoom : 1; margin-bottom: 1.5em; } |
【変更後】
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/*●ページネーション WP用*/ #main-contents .cont-menu-wp{ position: relative; overflow: hidden; width: 100%; /zoom : 1; margin-bottom: 1.5em; } /*●ページネーション レスポンシブルデザイン用*/ #main-contents .cont-menu-wp a, #main-contents .cont-menu-wp span { display: inline-block; margin-bottom: 0.5em; } |
追加したら「ファイルを更新」をクリックします。
もう1度確認するときちんと表示されています。
ページナビの表示を変更する
ページナビとしてはこれで機能していますが、
表示する文字などを変更したい場合は、設定を変更します。
色や形などのデザインを変更したい場合は、あらたに専用のプラグイン
「WP PageNavi Style」をインストールして変更します。
基本的には何も変更しなくても十分機能していますが、変更が必要な場合もあるかもしれませんので解説しておきます。
ページナビゲーションテキスト
ここでは文字や記号を変更することができます。
例として、ページナビをこんな風に英語表記にしてみましょう。
これはデザインもWP PageNavi Styleで変更しています。
- 総ページ数用テキスト
Page %CURRENT_PAGE% of %TOTAL_PAGES% に変更します。
- 現在のページ用テキスト
現在ページを表している部分なので変更しません。
- ページ用テキスト
現在ページ以外のページを表している部分なので変更しません。
- 最初のページ用テキスト
« First に変更します。
- 最後のページ用テキスト
Last » に変更します。
- 前のページ用テキスト
‹ Previous に変更します。
- 次のページ用テキスト
Next › に変更します。
- 「前へ…」用テキスト
前に続くページを省略している文字なのでこのままにしておきます。
- 「次へ…」用テキスト
後に続くページを省略している文字なのでこのままにしておきます。
以上で上記のようなページナビが完成です。
ページナビゲーション設定
ここでは数字や省略の表示の仕方などを設定します。
- pagenavi-css.css を使用
CSS をカスタマイズする場合はチェックをはずします。
- Page Navigation スタイル
通常のページナビにするかプルダウンのページナビにするかです。
通常のものがいいですね。
- 常にページナビゲーションを表示
1ページで終わるときでもページナビを表示するかどうかです。
- 表示するページ数
ページが多くて省略されるときでも表示されるページの数です。3にするとこんな表示になります。(赤字のところが3つ)
Page 1 of 100 1 2 3 … 10 20 30 … Next › Last »
5にするとこんな表示になります。(赤字のところが5つ)
Page 1 of 100 1 2 3 4 5 … 10 20 30 … Next › Last »
- 省略表示するページ数
1にするとこんな表示になります。(赤字のところが1つ)
Page 1 of 100 1 2 3 4 5 … 10 … Next › Last »
3にするとこんな表示になります。(赤字のところが3つ)
Page 1 of 100 1 2 3 4 5 … 10 20 30 … Next › Last »
赤字の部分、つまり省略文字の間に表示されるページの数です。
- 省略ページを以下の倍数で表示
10にすると、赤字の箇所のように10の倍数です。
Page 1 of 100 1 2 3 4 5 … 10 20 30 … Next › Last »
5にすると、5の倍数です。
Page 1 of 100 1 2 3 4 5 … 10 15 20 … Next › Last »
ちなみに、ページ数が5ページ以内のときに、表示するページ数が5のような場合は、
下図のように「« 先頭」や「最後 »」などのないシンプルなページナビになります。
こんどはページナビのデザインを変更してみましょう。
まずはプラグイン「WP PageNavi Style」をインストール・有効化してください。
有効化すると管理画面のメニューに 「PageNavi Style」と表示されるのでそちらをクリックしてください。
基本的には、33種類の中からお気に入りのデザインを選ぶだけです。
「Select Style From Our Collection 」のプルダウンメニューを選択すると、下に表示されいているページナビのデザインが変わります。
ページナビを表示する位置「左・中央・右」も選べます。
選び終えたら「Save Settings」をクリックして設定を保存します。
「 Select StyleSheet 」の「Custom」を選択すると、ページナビをカスタマイズすることもできます。
最近のコメント