WordPress 主題製作學習筆記：幫你的主題加上「自帶分頁」的功能

三月底的時候，我曾經寫過一篇 WordPress 主題製作的學前準備文章，隨著本站剛上線啟用的 SO Personal 主題，現在就跟大家分享解釋我是怎麼將主題分頁的功能整合進主題裏的。

要說明的一點就是，我一開始是在對岸朋友知更鳥的博客裏看到這項教學，後來還陸續在其它對岸朋友們的博客裏看到，但我自己有關注的台灣部落客朋友們，似乎還沒人寫過（還是有人寫過呢？），所以我就在此分享這個技巧了。

首先，請各位拿出你們主題的函數檔案 functions.php，將以下代碼加入檔案中。如果你們的主題沒有這個檔案，代表主題不支援後台新增模組功能（Widget），請新增函數檔案讓主題更靈活喔！

<?php
https:// 實現自帶分頁功能
    function kriesi_pagination($query_string){
    global $posts_per_page, $paged;
    $my_query = new WP_Query($query_string ."&posts_per_page=-1");
    $total_posts = $my_query->post_count;
    if(empty($paged))$paged = 1;
    $prev = $paged - 1;
    $next = $paged + 1;
    $range = 10; https:// 編輯這裡的數字，這是前台分頁顯示的頁數
    $showitems = ($range * 2)+1;

    $pages = ceil($total_posts/$posts_per_page);
    if(1 != $pages){
    echo "
<div class='pagination'>";
    echo ($paged > 2 && $paged+$range+1 > $pages && $showitems < $pages)? "<a href='".get_pagenum_link(1)."'>最前</a>":"";
    echo ($paged > 1 && $showitems < $pages)? "<a href='".get_pagenum_link($prev)."'>上一頁</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>";
    }
    }

    echo ($paged < $pages && $showitems < $pages) ? "<a href='".get_pagenum_link($next)."'>下一頁</a>" :"";
    echo ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) ? "<a href='".get_pagenum_link($pages)."'>最後</a>":"";
    echo "</div>

\n";
    }
    }
?>

<?php

https:// 實現自帶分頁功能

function kriesi_pagination($query_string){

global $posts_per_page, $paged;

$my_query = new WP_Query($query_string ."&posts_per_page=-1");

$total_posts = $my_query->post_count;

if(empty($paged))$paged = 1;

$prev = $paged - 1;

$next = $paged + 1;

$range = 10; https:// 編輯這裡的數字，這是前台分頁顯示的頁數

$showitems = ($range * 2)+1;

$pages = ceil($total_posts/$posts_per_page);

if(1 != $pages){

echo "

<div class='pagination'>";

echo ($paged > 2 && $paged+$range+1 > $pages && $showitems < $pages)? "<a href='".get_pagenum_link(1)."'>最前</a>":"";

echo ($paged > 1 && $showitems < $pages)? "<a href='".get_pagenum_link($prev)."'>上一頁</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>";

}

echo ($paged < $pages && $showitems < $pages) ? "<a href='".get_pagenum_link($next)."'>下一頁</a>" :"";

echo ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) ? "<a href='".get_pagenum_link($pages)."'>最後</a>":"";

echo "</div>

\n";

}

請注意，上面代碼裏我有加註釋，你可以編輯該行代碼裏的數字，來決定你要在前台顯示多少分頁。$showitems = ($range * 2)+1; 代表的是頁數顯示的方法，也就是，你如果將顯示頁數設為2，要繼續往下翻看，就是 2+1=3；不知道我這樣解釋大家聽得懂嗎？

那麼，我們該如何在前台調用這個分頁功能呢？請打開你們主題的 index.php 檔案，將原本的代碼

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

</div>

替換成以下代碼：

	<?php kriesi_pagination($query_string); ?>

1	<?php kriesi_pagination($query_string); ?>

有沒有發現新代碼與加入 functions.php 的代碼之間的關聯性呢？沒錯，就是 class 值，我們也要利用這個 class 來設定 CSS 樣式以達到前台美觀效果喔！

現在再請各位打開你們的樣式表 style.css 編輯，這裡僅提供我的樣式給大家做個參考，你們可以針對自己主題的整體樣式去做設置。以下是我的樣式代碼：

/*  自帶文章分頁導航  */
.pagination{
		float: none;
		line-height:23px;
		text-align: center;
}
.pagination span, .pagination a{
		font-family: inherit;
		font-style: inherit;
		font-weight: inherit;
		font-size:12px;
		margin: 2px 6px 2px 0;
		background:#fff;
		border:1px solid #e5e5e5;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		color:#2F8CAB;
		padding:2px 5px 2px 5px;
		text-decoration:none;
		float:center;
}
.pagination a:hover{
		background: #8391A7;
		border:1px solid #fff;
		color:#fff;
}
.pagination .current{
		background: #21BEDE;
		border:1px solid #fff;
		color:#fff;
		font-family: inherit;
		font-style: inherit;
		font-weight: inherit;
		font-size:12px;
		padding:2px 5px 2px 5px;
}

/* 自帶文章分頁導航 */

.pagination{

float: none;

line-height:23px;

text-align: center;

}

.pagination span, .pagination a{

font-family: inherit;

font-style: inherit;

font-weight: inherit;

font-size:12px;

margin: 2px 6px 2px 0;

background:#fff;

border:1px solid #e5e5e5;

border-radius: 5px;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

color:#2F8CAB;

padding:2px 5px 2px 5px;

text-decoration:none;

float:center;

}

.pagination a:hover{

background: #8391A7;

border:1px solid #fff;

color:#fff;

}

.pagination .current{

background: #21BEDE;

border:1px solid #fff;

color:#fff;

font-family: inherit;

font-style: inherit;

font-weight: inherit;

font-size:12px;

padding:2px 5px 2px 5px;

}

大家應該有發現我在樣式裏運用了 CSS3 的圓角效果 border-radius，那個 -moz-border-radius 代表的是 Firefox 火狐瀏覽器的圓角效果，-webkit-border-radius 則代表在 Safari 和 Chrome 瀏覽器的效果，當然，萬惡的 IE 還是不支援這項效果，請大家鄙視它吧！

OK, 以上就是這次的學習筆記，如果大家有什麼問題，歡迎在本文留言 😆

話說我還真的不知道怎麼寫教學文哩！每次筆觸都好生硬 😳

文ｂｙ覺非／WordPress 主題製作學習筆記系列文章．之二

<========簽名檔分隔線開始=========>

　飛翔於文字國裏的蝴蝶，我是愛寫文的女子，不要看我的人，請你看看我的文，那裡面全是我的心．和我想對你說的話……

　StartOver．回。到。原。點 https://carrielis.com

<========簽名檔分隔線結束=========>

This Post Has 16 Comments

scorpio
19 5 月 2010 回覆

http://steachs.com/archives/1406
呵,我也有寫過類似的啦~~
1. Carrie
  19 5 月 2010 回覆
  
  咦？原來ㄚ湯有寫過啊？真是不好意思沒注意到 😳
  1. scorpio
    19 5 月 2010 回覆
    
    最近也還在做新版,很多地方還沒有頭緒~~
    1. Carrie
      19 5 月 2010 回覆
      
      嗯，做一個新的主題的確會有很多地方需要突破的，ㄚ湯對於主題製作已經很有心得了，現在應該是在想整個版面佈局的問題吧？
      1. scorpio
        20 5 月 2010
        
        沒錯…佈局是挺頭痛的@@
        還有配色問題..其它應該不是問題= =
    2. Carrie
      20 5 月 2010 回覆
      
      做主題最令人頭痛的，一直以來應該就是佈局和配色問題了，其它技術性的問題反倒比較好解決呢～
Amy
4 6 月 2010 回覆

最近也還在做新版,很多地方還沒有頭緒~~
1. Carrie
  4 6 月 2010 回覆
  
  那就互相學習囉～對了，你留的網址就是你自己做的主題嗎？
WSQ
22 6 月 2010 回覆

我想你打錯了。
你在function.php已經echo了，在輸出頁便不需要再打上。
不然便會變成這樣了。
1. WSQ
  22 6 月 2010 回覆
  
  便會重複了
  <div class="pagination"><div class="pagination">
  <?php kriesi_pagination ($query_string); ?>
  </div></div>
  1. Carrie
    22 6 月 2010 回覆
    
    啊，是的，的確只需輸入：
    
    PHP
    
    <?php kriesi_pagination($query_string); ?>
    
    1
    
    <?php kriesi_pagination($query_string); ?>
    
    即可，否則便會如你所說，重複了 DIV 的區塊。
    感謝指正 🙄
    我已經修正文章了。
    1. WSQ
      22 6 月 2010 回覆
      
      不用謝，舉手之勞而已。
      感謝分享。
      1. Carrie
        23 6 月 2010
        
        🙂
Paige
25 12 月 2011 回覆

可以請問一下，覺非大的文章分類那一行是甚麼功能？翻了教學文還是看不出所以然來！
1. 覺非
  27 12 月 2011 回覆
  
  >>文章分類那一行是甚麼功能
  你這句我不懂耶，有什麼其他功能嗎？麻煩詳述你的問題喔！

You Might Also Like

This Post Has 16 Comments

Paige

發佈留言 取消回覆

發佈留言取消回覆