WP-Page Naviの設定とカスタマイズ方法｜サイトにページ数を表示する

2015-12-202016-09-06

ある程度記事数が増えてきたら、サイトにページ数を表示しておくことをオススメします。

WordPressにはデフォルトで“次のページ”“前のページ”が記載されており、
前後ページへはすぐに飛べるようになっていますが、
ページを指定するにはこの『WP-Page Navi』を導入する必要があります。

記事数が増えてきてある程度ページ数も増えてきたら、
サイト訪問者のサイト巡回率を高めるためにも当プラグインを導入しておきましょう。

WP-Page Naviのインストールと有効化

まずは、『WP-Page Navi』をインストール→有効化しておきましょう。

参考記事：WordPressにプラグインをインストールする方法

『ダッシュボード＞設定＞PageNavi』で設定画面へいくことができますが、
ひとまずは何もしなくて大丈夫です。

プラグインの有効化ができたら、次はテーマ編集に変更を施していきましょう。

WP-Page Naviを設置する方法

プラグインをインストールしたら、次は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を書き換えがおかしなことになってしまいますので注意しましょう。