WordPress

プラグインを使わないでWordPressにページナビを実装してみる

WordPressのトップページなどの一番下によくあるページナビをプラグインを使わないで実装するやり方です。プラグインではWP-pageNaviといった便利なものがあるのですが、プラグインに頼らなくても実装する方法がいくつかあったので実際に試してみます。

[ads_center]

プラグインを使わないページナビその1

参考サイトは以下になります。

ノーマル版と拡張版の2つが紹介されていますが、ここでは拡張版を試してみます。functions.phpに以下を追加します。

function pagination($pages = '', $range = 4){
     $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(1 != $pages)
     {
         echo "<div class=\"pagination\"><span>Page ".$paged." of ".$pages."</span>";
         if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>&laquo; First</a>";
         if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>&lsaquo; Previous</a>";
 
         for ($i=1; $i <= $pages; $i++)
         {
             if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
             {
                 echo ($paged == $i)? "<span class=\"current\">".$i."</span>":"<a href='".get_pagenum_link($i)."' class=\"inactive\">".$i."</a>";
             }
         }
 
         if ($paged < $pages && $showitems < $pages) echo "<a href=\"".get_pagenum_link($paged + 1)."\">Next &rsaquo;</a>";
         if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>Last &raquo;</a>";
         echo "</div>\n";
     }
}

そしてページナビを設置する場所に以下を追加します。

<?php if (function_exists("pagination")) {
    pagination($additional_loop->max_num_pages);
} ?>

あとはCSSで見栄えを整えると完成です。

.pagination {
clear:both;
padding:20px 0;
position:relative;
font-size:11px;
line-height:13px;
}
 
.pagination span, .pagination a {
display:block;
float:left;
margin: 2px 2px 2px 0;
padding:6px 9px 5px 9px;
text-decoration:none;
width:auto;
color:#fff;
background: #555;
}
 
.pagination a:hover{
color:#fff;
background: #3279BB;
}
 
.pagination .current{
padding:6px 9px 5px 9px;
background: #3279BB;
color:#fff;
}

実装するとこんな感じになります。

ページナビ

プラグインを使わないページナビその2

もう一つプラグインを使わないページナビを実装する方法です。参考サイトは以下より。

こちらはページナビを設置したい場所に以下のコードを追加します。

<div class="tablenav"><?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),
)); ?></div>

これだけでこんな感じのページナビができあがります。

ページナビ2-1

これだけでもシンプルでいいですね。スタイルシートで調整すればもっとかっこよくなります。

.tablenav {
	color: #2583ad;
	background:white;
	margin: 1em auto;
	line-height:2em;
	text-align:center;
}

a.page-numbers, .tablenav .current {
	color: #00019b;
	padding: 2px .4em;
	border:solid 1px #ccc;
	text-decoration:none;
	font-size:smaller;
}

a.page-numbers:hover {
	color:white;
	background: #328ab2;
}

.tablenav .current {
	color: white;
	background: #328ab2;
	border-color: #328ab2;
	font-weight:bold:
}

.tablenav .next, .tablenav .prev {
	border:0 none;
	background:transparent;
	text-decoration:underline;
	font-size:smaller;
	font-weight:bold;
}

これでこんな感じになります。

ページナビ2-2

まとめ

プラグインはとても便利なんですが自分が使わない機能があったり、入れすぎるとサイトも重くなってしまうみたいなので自分で設置できるものはそっちの方が勉強のためにもいいのかなと思ったりしました。なので他にもプラグインを使わないで実装できる機能があれば今後も色々試してみようかと思ってます。

関連記事

  1. WordPressのログイン時のツールバー

    WordPress

    WordPressでカテゴリーとタグのリストを一緒に出力して表示させるやり方

    色々と悩んだ結果、これが一番手っ取り早くて簡単だったのでメモしときます…

  2. WordPressにPocketボタンを設置

    WordPress

    WordPressにPocketボタンを設置するやり方

    そういえばPocketのボタンをまだ設置していなかったので、このたび設…

  3. Quote Tweet

    WordPress

    選択したテキストをツイートできるWordPressプラグイン「Quote Tweet」

    Quote Tweetはサイト内で選択したテキストを簡単にツイートする…

  4. WordTwit

    WordPress

    WordTwitの設定方法や日本語化してからの使い方について

    WordTwitはWordPressで記事を投稿した時に自動でツイート…

  5. WordPressのログイン時のツールバー
  6. Hemingway

    WordPress

    レスポンシブ対応の2カラムWordPressテーマ「Hemingway」

    レスポンシブに対応した2カラムのお洒落なWordPressテーマを発見…

コメント

  1. この記事へのコメントはありません。

  1. 2012年 12月 25日

最近の記事

  1. SOL001
  2. 末廣ラーメン
  3. ナッティホワイトチョコレートフラペチーノ

アーカイブ

PAGE TOP