WP-PageNaviを使用して賢威7.0にページャーを表示させる方法

今回はWordPressのプラグイン『WP-PageNavi』を使用して、賢威7.0にページャーを表示させる方法についてご紹介していきましょう。

WordPressのテンプレート賢威7.0のデフォルトでは、ページャーが表示されておらずユーザビリティに欠ける部分があります。

ブログ下を見て、
ページャー賢威7.0

（以前の記事へ）となっていると、サイト全体に移動しづらいためページャー（ページネーション）を表示させておきましょう。

WP-PageNaviをインストール

まずはプラグイン『WP-PageNavi』をインストールをしていきましょう。

ダッシュボード画面から『プラグイン→新規追加』を選択して、検索窓に「WP-PageNavi」と入力しましょう。

『今すぐイントール』をクリックして、「有効化」を忘れずにしていきましょう。

WP-PageNaviの設定方法

WP-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>"; 
}

正常に完了していていれば、

こんなかんじでページャーが表示されていればOKです。

WP-PageNaviのデフォルトはダサい…。

WP-PageNaviのデフォルトのページャーってあまりオシャレではないんですよね。

なので、ページャーのデザインを変更していきましょう！ちなみに僕は現状、こんな感じのページャーを使っています↓↓

※このやり方はプラグイン『Simple Custom CSS』を利用します。事前にインストールしておきましょう。

WP-PageNaviのページャーデザインを変更する方法

まずは、ダッシュボード画面から「設定→PageNavi」を選択します。

そして、設定画面からpagenavi-css.css を使用が「はい」になっているので、「いいえ」にしましょう。

『変更を保存』をクリックします。

この時点で、デフォルトのデザインでなくなるため、ページャーはこんなかんじになっているはずです↓↓

もはやダサいどころの騒ぎではない・・・笑

ということでダッシュボード画面から『外観→カスタムCSS』を選択していきます。（Simple Custom CSSがインストールされていないと表示されません）

入力欄に以下のコードを追記してくださいね！

/* ----------------------------------------------------
 ページャー
-----------------------------------------------------*/
/*wp-pagenavi 02*/
.wp-pagenavi {
	clear: both;
	text-align:center;
 
}
.wp-pagenavi a, .wp-pagenavi span {
	color: #fff;
	background-color: #3CB4E5;
	border: 1px solid #3CB4E5;
	padding: 8px 15px;
	margin: 0 2px;
	white-space: nowrap;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	text-align: center;
	text-decoration: none;
}
.wp-pagenavi a:hover{
	color: #FFF;
	background-color: #FFC500;
	border-color: #FFC500;
    }
.wp-pagenavi span.current{
	color: #FFF;
	background-color: #36C21C;
	border-color: #36C21C;
	font-weight: bold;
    }

追記したら『カスタムCSSの更新』をクリックしていきましょう。

そして、自分のブログを確認すると・・・。