ある程度記事数が増えてきたら、サイトにページ数を表示しておくことをオススメします。
WordPressにはデフォルトで“次のページ”“前のページ”が記載されており、
前後ページへはすぐに飛べるようになっていますが、
ページを指定するにはこの『WP-Page Navi』を導入する必要があります。
記事数が増えてきてある程度ページ数も増えてきたら、
サイト訪問者のサイト巡回率を高めるためにも当プラグインを導入しておきましょう。
まずは、『WP-Page Navi』をインストール→有効化しておきましょう。
参考記事：WordPressにプラグインをインストールする方法
『ダッシュボード＞設定＞PageNavi』で設定画面へいくことができますが、
ひとまずは何もしなくて大丈夫です。
プラグインの有効化ができたら、次はテーマ編集に変更を施していきましょう。
プラグインをインストールしたら、次はfunction.phpの編集です。
ここをいじるときに失敗するとサイトトップページがぐちゃぐちゃになり手の施し用が無くなってしまいますので、必ずバックアップを取ってから変更を加えるようにしてくださいね。
参考記事：サイトカスタマイズの際に必ずするべきバックアップ方法
まず、ダッシュボード＞外観＞テーマの編集＞function.phpを選択し、
『ページャーを表示する』という項目を見つけてください。
//---------------------------------------------------------------------------
// ページャーを表示する
//---------------------------------------------------------------------------
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";
}
}
これを全て削除し、以下のコードに書き換えてください。
//---------------------------------------------------------------------------
// ページャーを表示する
//---------------------------------------------------------------------------
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>";
}
これで、サイトにページナビを取り付けることができました！
『WP-Page Navi』を有効化してからでないと、
function.phpを書き換えがおかしなことになってしまいますので注意しましょう。
ページナビを簡単にカスタマイズする方法
上記の設定までで、
ページナビを正常に取り付けることはできたでしょうか？
デフォルトのページナビでも充分なのですが、
サイトのデザインや雰囲気と合わない、という場合もあると思いますので
ここでは、非常に簡単にページナビをカスタマイズする方法をご紹介していきたいと思います。
『WP-Page Navi』を簡単にカスタマイズするには
『Wp Pagenavi Style』というプラグインをインストールします。
ダッシュボードのなかに『PageNavi Style』という項目が追加されますので、
ここをクリックします。
設定画面では、ページナビのデザインが自由に選択できるようになっています。
● Select StyleSheet：Existing Style
● Select Style From Our Collection：お好みのデザインを選択
『Preview』には選択したデザインのプレビューが随時映し出されますので
しっくりくるものが決まったら、下の<Save Settings>をクリックします。
すると、こんな感じでトップページにページナビを取り付けることができました。
これで、以上になります。お疲れ様でした！
まとめ
今回は、ページナビを設定するプラグイン『WP-Page Navi』の設定方法と、
簡単にカスタマイズすることのできる『Wp Pagenavi Style』の使い方をご紹介してきました。
少し複雑でしたので、簡単に流れを再確認しましょう。
・WP-Page Naviのインストール
・function.phpの書き換え
・Wp Pagenavi Styleのインストール
・設定画面で簡単カスタマイズ
以上の流れでおしゃれで実用的なページナビを設定してみてくださいね＾＾
それでは、最後までご覧いただきありがとうございました！