pagenav

在WordPress修改翻頁樣式

其實筆者換了 WordPress 主題(theme)以後,發現先用的主題,也就是 Respon,有些地方不太合心意。這也是正常的,因爲沒有東西是完美的嘛!而這個主題已經是最接近筆者想要的了,唯有自己再動手改改代碼咯!這次的問題是 Respon 在首頁和分類頁面底下沒有類似「<< older posts」這種用來翻頁的東西,也就是說訪客來到,除非他們自己找筆者的文章,否則只能看到筆者最新的幾篇文章,然後….就沒然後了?這也太荒謬了吧!還好一日一題溫哥華目前發佈的文章還沒有很多,還是可以撐一下,但這個問題往後會越來越嚴重啊!

 

通常 WordPress 的主題,都會有「<< older posts」和「newer posts >>」之類的顯示,就很普通,幾乎沒改的都是那個樣子。於是筆者 Google(Google 真的是很強大的東西,非常建議遇到任何疑難雜症都 Google)了一下,結果筆者在 @谢单单爱折腾 的網站上找到答案了,還需感謝該站站長,提供那麼有用的信息!好,現在輪到筆者說明怎麼做了。

 

本來筆者以爲 Respon 根本沒帶任何翻頁樣式,但當筆者跑去翻 WordPress 後臺(Dashboard),在主題檔案的編輯器(Editor)裏面,原來 Respon 的 index.php 是有寫翻頁代碼的,只是主題裏面沒有加入 wp_pagenavi 的 function(參數):

<!--WP PAGE NAVI-->
	<div class="pagination">
	<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>
    </div>
    <!--/WP PAGE NAVI-->

 

C$1.99 .Com at GoDaddy.com!

 

根據參考網站的資料,加入以下代碼到 functions.php 的最後面

function wp_pagenavi( $p = 2 ) {  // 可以隨意更改function名稱,只要把"wp_pagenavi"改掉就好,當然要在運用這個function的地方(依筆者的例子,是index.php)也是用同樣的名字
   if ( is_singular() ) return;  
   global $wp_query, $paged;  
   $max_page = $wp_query->max_num_pages;  
   if ( $max_page == 1 ) return;  
   if ( empty( $paged ) ) $paged = 1; // 這裏"empty",而不是參考網站上的"emptyempty" 
   echo '<span class="page-numbers page-count">' . $paged . ' / ' . $max_page . ' </span> ';  
   if ( $paged > $p + 1 ) p_link( 1, '最前頁', '&laquo;' );  
   if ( $paged > 1 ) p_link( $paged - 1, '上一頁', '&lsaquo;' );  
   if ( $paged > $p + 2 ) echo '<a>...</a>';  
   for( $i = $paged - $p; $i <= $paged + $p; $i++ ) {  
   if ( $i > 0 && $i <= $max_page ) $i == $paged ? print "<span class='page-numbers current'>{$i}</span> " : p_link( $i );  
   }  
   if ( $paged < $max_page - $p - 1 ) echo '<span class="page-numbers">...</span>';  
   if ( $paged < $max_page ) p_link( $paged + 1,'下一頁', '&rsaquo;' );  
   if ( $paged < $max_page - $p ) p_link( $max_page, '最末頁', '&raquo;' );  
   //echo '<span>共['.$max_page.']頁</span>';  
}  

function p_link( $i, $title = '', $linktype = '' ) {  
   if ( $title == '' ) $title = "第 {$i} 頁";  
   if ( $linktype == '' ) { $linktext = $i; } else { $linktext = $linktype; }  
   echo "<a class='page-numbers' href='", esc_html( get_pagenum_link( $i ) ), "' title='{$title}'>{$linktext}</a> ";  
}   
 ?>

 

如果沒有改變 style.css 檔案的話,主題會以默認方式呈現,效果未必理想。所以我們可以添加以下代碼到 style.css 裏面最下面的位置

 

.pagination span.page-count,.pagination a.next,.pagination a.prev {
	width: 60px;
}

.pagination {
	font-family: Arial, Helvetica, sans-serif;
}

.pagination a,.pagination span {
	line-height: 30px;
	height: 28px;
	width: 30px;
	text-align: center;
	margin-right: 5px;
	display: block;
	float: left;
	color: #666;
	box-shadow: 0 0 5px rgba(0,0,0,0.2);
	position: relative;
	//border-bottom: #4F8D65 1px solid; // 筆者省略此行,因爲不太喜歡這種highlight。想看效果的話,可以瀏覽參考網站的翻頁樣式。
}

.pagination a:hover,.pagination span.current {
	text-decoration: none;
	color: #FFF;
	background: #333333;
}

 

經過調整以後,一日一題溫哥華的翻頁按鈕就出現了!

 

30% off your entire order at GoDaddy.com!

 

 

參考網站:挨踢|谢单单爱折腾— WordPress在于折腾:自己动手给主题修改翻页样式
鏈接地址:http://xiedandan.com/

 

可到…

如何強行設置WordPress的縮圖大小?

怎麼讓WordPress的文章顯示概要?

看關於筆者修改主題外掛的文章。

在WordPress修改翻頁樣式》有 2 条评论