ねずみのブログ

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

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

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

wordpress ページャー

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

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

wordpress ページャー

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

 

[php]
<!–ページャー–>

<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>

[/php]

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

 

[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]

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

 

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

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

コメントを残す

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

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