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

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

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

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

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 "
"; echo ($paged > 2 && $paged+$range+1 > $pages && $showitems < $pages)? "最前":""; echo ($paged > 1 && $showitems < $pages)? "上一頁":""; for ($i=1; $i <= $pages; $i++){ if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )){ echo ($paged == $i)? "".$i."":"".$i.""; } } echo ($paged < $pages && $showitems < $pages) ? "下一頁" :""; echo ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) ? "最後":""; echo "
\n"; } }?>

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

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

替換成以下代碼：

有沒有發現新代碼與加入 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;}

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

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

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

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

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

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