ねずみのブログ

ネットショップ運営に関する情報や、自分の好きな事を発信するブログです。

WordPress、プラグインなしでページャーを設置するやり方

こちらの記事は2014年3月25日に変更しております。変更内容は記載されていた、PHPとCSSに誤りがあったので修正しました。

wordpress ページャー

WordPressでページャーを設置するやり方です。SEOにも効果的なので、今回はプラグインなしでも簡単にできる方法をご紹介。

とっても簡単ページャーの設置

wordpress ページャー

プラグインなしでも簡単に設置が可能で、今回はKowappaブログさんがご紹介している方法になります。下記コードをhome.php(またはindex.php)に設置し、CSSでカスタマイズして終了です。

 

<!--ページャー-->

<div class="pager">
	<?php global $wp_rewrite; $paginate_base = get_pagenum_link(1); if(strpos($paginate_base, '?') || ! $wp_rewrite->using_permalinks()){
		$paginate_format = '';
		$paginate_base = add_query_arg('paged','%#%');
	}
	else{
		$paginate_format = (substr($paginate_base,-1,1) == '/' ? '' : '/') .
		user_trailingslashit('page/%#%/','paged');;
		$paginate_base .= '%_%';
	}
	echo paginate_links(array(
		'base' => $paginate_base,
		'format' => $paginate_format,
		'total' => $wp_query->max_num_pages,
		'mid_size' => 5,
		'current' => ($paged ? $paged : 1),
		'prev_text' => '«',
		'next_text' => '»',
	)); ?></div>

18行目に数字の「5」と記載れている部分、ページャーの表示する数になります。
※変更可能
あとは下記のようにCSSで設定しています。(style.cssに設定)

 

/* ページャー */
.pager{
	margin-bottom: 20px;
	text-align:center}

a.page-numbers,
.pager .current{
	background-color: #edede3;
	border: solid 1px #aaaaaa;
	border-radius:5px;
	padding:5px 8px;
	margin:0 2px;}

.pager .current{
	background-color: #000000;
	border: solid 1px #000000;
	color: #ffffff;}

.pager a:hover{
	color: #ffffff;
	border: solid 1px #000000;
	background-color: #000000;}

これで設定完了です。あとはご自分のブログに合わせたCSSの設定をしてください。

 

ページャーはSEOにも効果的

色々調べているとページャーの設置はSEO的にも効果的!重たくなるプラグインなど使わなくても簡単に設置が出来るので、挑戦してみてください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)