-3,000人以上が購読している無料メルマガはこちら-

プラグイン

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

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

賢威7.0ページャー

こんなかんじでページャーが表示されていれば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の更新』をクリックしていきましょう。

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

ページャーデザイン

はい!OK!!

もちろんこのコードでは、このデザインになるというだけで色々なデザインがあります。

今回参考させていただいたサイトはこちらのサイトです。

色々と試して、自分好みのページャーを設置するといいでしょう。

あとがき

今回はWordPressのテンプレート賢威7.0でページャーを表示させる方法をご紹介しました。

ページャーを表示することは必須とまではいきませんが、ユーザビリティの向上につながるため、是非導入しておいたほうがよいでしょう。

【関連記事】WordPressテンプレートはSEOの観点からも賢威がオススメ

【今だけ0円】WEBを使って収入源を増やすノウハウを受け取る!

数年前まで田舎でくすぶっていたサラリーマンだった僕が、たった1つのブログを作ったことで人生が変わりました。

副業で始めたブログビジネスで、週1回だけ働いて月24万円の収入を得られるようになり、今ではストレスフリーな毎日を送れています。

  • 自宅やカフェで自由に働けるノマドライフに興味がある
  • 脱サラして、人間関係に疲れることない人生を叶えたい
  • ブログで収入を得るために何から始めていいか分からない…!
  • 帰りのチケットを取らなくても海外旅行に行ける生活に憧れる

 

開放感にあふれた人生を描くために初心者向けのブログ入門書を無料でプレゼントしています。

ゼロスタートの人にも「あ、ブログってこうやって稼げるんだ!」と反響をいただき、分かりやすい動画・文章でやさしく解説をしています。

僕のメルマガ登録者さん限定で、今だけ0円で配布をしていますがいつ値上げをするか分かりませんので、今のうちに無料プレゼントをお見逃しなく。

ボタンをクリックして、登録フォームに「名前」と「メールアドレス」を入力したら、すぐにプレゼントが手に入ります。

 

もう雇われない働き方を実現する!ゼロからブログで収入を得る方法を学ぶ無料メルマガ
無料登録はこちら
ゼロからブログ起業を学べる入門書を手に入れる!
無料で受け取る