えじの自由帳

今の自分を書きためるブログ

Wordpress

ちょっぴりお洒落なページネーションをコピペで作る方法

MIYAKO85_kurimaoohashi20140726500

自由にカスタマイズできることが特長のStinger5。ブロガーの皆様も思い思いにカスタマイズしていらっしゃるのではないでしょうか。

ですが、トップページはどうですか？ もっと言ってしまうと、ページネーションはどうですか？

ページネーションはデフォルトのものを使っている方が多いのではないでしょうか。

せっかく自由自在にカスタマイズできるテーマを使っているのですから、細かいところも自分好みにカスタマイズしてしまいたいものです。

この記事では、ちょっぴりお洒落なページネーションをコピペで作る方法を紹介します。

完成図はPCではこんな感じ。ページ番号と隣ボタンと、最初&最後ボタンがつきます。

pagination1

スマホだとNewer、Olderのみの表示になります。

pagination2

まずはfunctions.phpをいじる

最初はfunctions.phpです。functions.phpをいじる時のお約束ですが、バックアップはきちんと取っておきましょう。

まず、ページネーションに関する部分を削除します。具体的には、//ページャー機能から//ヘッダーを綺麗にまでを削除してください。

次に、以下のコードをコピーして同じ場所にペーストします。

//ページャー機能
function pagination($pages = '', $range = 2)
{
$showitems = ($range * 2)+1; 
global $paged;
if(empty($paged)) $paged = 1;
if($pages == '') {
global $wp_query;
$pages = $wp_query->max_num_pages;
if(!$pages) $pages = 1;
}  
if ($pages != 1){
if (!is_mobile()) {
echo "<ul class=\"pagination\"><li><span>page ".$paged." of ".$pages."</span></li>";
if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<li><a href='".get_pagenum_link(1)."'>&laquo;</a>";
if($paged > 1 && $showitems < $pages) echo "<li><a href='".get_pagenum_link($paged - 1)."'>&lsaquo;</a>";
for ($i=1; $i < = $pages; $i++) {
if ( !($i >= $paged+$range+1 || $i < = $paged-$range-1) || $pages <= $showitems ) {
echo ($paged == $i)? "<li class=\"active\"><span>".$i."</span>":"<li><a href='".get_pagenum_link($i)."' >".$i."</a></li>";
}
}
if ($paged < $pages && $showitems < $pages) echo "<li><a href=\"".get_pagenum_link($paged + 1)."\">&rsaquo;</a>";
if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo "<li><a href='".get_pagenum_link($pages)."'>&raquo;</a>";
echo "</ul>\n";
}
else {
echo "<ul class=\"pagination\">";
if ($paged == 1) { echo "<li class=\"inactive\"><span>&lsaquo; Newer</span></li>";}
else { echo "<li><a href='".get_pagenum_link($paged - 1)."'>&lsaquo; Newer</a></li>";}
echo "<li class=\"active\"><span>page ".$paged." of ".$pages."</span></li>";
if ($paged == $pages) { echo "<li class=\"inactive\"><span>Older &rsaquo;</span></li>";}
else { echo "<li><a href=\"".get_pagenum_link($paged + 1)."\">Older &rsaquo;</a></li>";}
echo "</ul>\n";
}
}
}

2行目にある$range = 2の値を変えると、現在のページの前後にいくつ番号を表示するかを変えることができます。

例えば、$range = 3にして、5ページ目を開くと、2, 3, 4, 5, 6, 7, 8が表示されます。

style.cssで見た目を整える

先ほどと同様、ページネーションに関する行をすべて削除します。

具体的には、.pagenationとついているセレクタを全て削除すればOKです。

行数で言うと、デフォルトのstyle.cssなら699～728行目あたりと1218行目から最後の/*--ここまで--*/の前まで。2ヶ所あります。

次に、削除した1カ所目の場所に、以下のコードを貼ります。

.pagination{clear:both;text-align:center;margin:30px 0;overflow:hidden;*zoom:1}
.pagination li{font-size:84%;color:#666;text-align:center;display:-moz-inline-stack;display:inline-block;vertical-align:middle;*vertical-align:auto;zoom:1;*display:inline;margin:0 1px 0 0;overflow:hidden;*zoom:1}
.pagination li span{display:block;padding:8px 14px}
.pagination li.active{background-color:#f0f0f3}
.pagination li.inactive{color:#ccc}
.pagination li a{display:block;padding:8px 14px;text-decoration:none;color:#666}
.pagination li a:hover{padding:5px 11px;border:3px solid #ccc}

ここの、.pagination li.active{background-color:#f0f0f3}の値を変えると、ページネーションの色を変えることができます。

完成！

はいこれだけ。10分もかからないと思います。たぶん。

第何弾かもうわかりませんが、Stinger5のカスタマイズ記事でした。

余談ですが、最近別のサイトを立ち上げました。学生向けの情報サイトです。

学生スクエア

記事の内容は学生向けなのでまぁいいのですが、カスタマイズに関してはうまくいったと思っています。(スマホ表示をだいぶこだわっています)

こちらのサイトの執筆と編集が忙しいのでしばらくこちらの更新頻度が落ちると思いますが、ご容赦のほどを……

 Wordpress
 ,