自行建立Navigation.php，捨棄WP-Pagenavi

在使用WordPress的初期，不知道大家有沒有曾為沒有分頁功能而煩惱呢。對於這個很普遍的基本功能WordPress竟然沒有，這著實讓我愕然了一會，甚至還一度被迫使用他原來預設的陽春內置跳頁系統。

這樣子，不單對用戶做成不好的體驗，簡單來說就是對用戶不友善。更會影響搜尋器搜尋你網站的幅蓋率，因你頁面中並不是完全直接顯示網站內所有的頁面，而是分成了數頁分別輸出。這樣如果使用「上一頁」和「下一頁」的表示方式，便會造成了首頁缺乏對所有分頁的直接連結，從而影響了搜尋結果。

要解決這個問題，很簡單，使用WordPress總類繁多的外置分頁插件，如：WP-Pagenavi，PageBar等等。

不過這卻造成了另一個問題——加重了對伺服器CPU的負擔，現在很多的虛擬主機都會對用戶的CPU使用率有所限制，詳情不在此細說。人在屋簷下，所以我們要盡量解決CPU使用量問題，自行使用代碼，直接編輯主題，而捨棄插件的使用。

這是的行動可以實現的原因，其實是因為官方提供了paginate_links()函數，使得我們能夠直接取得分頁頁數。

現在我來說一說自行在主題建立分頁的過程，首先是在自己的主題建立一個navigation.php，並裡面輸入以下代碼

<?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 '<div>'. "\n";
echo paginate_links( array(
'base' => $paginate_base,
'format' => $paginate_format,
'total' => $wp_query->max_num_pages,
'mid_size' => 10,
'current' => ($paged ? $paged : 1),
'type' => 'list',
'prev_text' => __('&laquo; Previous', 'default'),
'next_text' => __('Next &raquo;', 'default'),
));
echo "\n</div>\n";
?>

其中的換成你需要的分頁數目

'mid_size' => 10,

另外以下代碼，

echo '<div>'. "\n";
...
echo "\n</div>\n";

可以換成你需要的代碼，並加上class。同樣道理，當然你也可以按照規律加上適用的代碼。

echo '<div class="navi">'. "\n";
...
echo "\n</div>\n";

navigation.php建立成功後，可以在index.php中找到

<div class="navigation">
...
</div>

預設的WordPress分頁應該是長這樣

<div class="alignleft">
<?php next_posts_link('&laquo; Older Entries') ?>
</div>
<div class="alignright">
<?php previous_posts_link('Newer Entries &raquo;') ?>
</div>

我們以這段判斷代碼替換以上的代碼，來確認用戶是否有使用page-navi插件，如沒有則使用navigation.php。

<?php if (function_exists('wp_pagenavi')) { wp_pagenavi(); } else { include('navigation.php'); } ?>

最後加上在style.css加上樣式表，來設定你分頁的樣式就好了。

.navigation {
	display: block;
	padding:30px 20px 20px 20px;
	clear:both;
	width:100%;
}
.navigation a {
	color:#777;
}
.navigation ul {
	list-style:none;
}
.navigation ul li {
	float:left;
	margin: 0 3px 0 3px;
}
.navigation ul li a {
	background: #fff url(images/pagenavi_btn.gif) no-repeat 0 0;
	width:27px;
	height:22px;
	color: #777;
	padding:5px 0 0 0;
	text-align:center;
	display:block;
}
.navigation ul li a:hover {
	background: #fff url(images/pagenavi_btn.gif) no-repeat 0 100%;
}
.navigation ul li span.current {
	background: #777 url(images/pagenavi_btn_current.gif) no-repeat;
	width:27px;
	height:22px;
	color: #fff;
	padding:5px 0 0 0;
	text-align:center;
	display:block;
}

教學参考自這裡