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

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

WordPress 主題製作學習筆記
WordPress 主題製作學習筆記

 

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

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

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

 

 

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

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

 

 

替換成以下代碼:

 

 

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

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

 

 

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

 

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

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

 

 

文by覺非/WordPress 主題製作學習筆記系列文章.之二

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

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

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

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

This Post Has 16 Comments

    1. 咦?原來ㄚ湯有寫過啊?真是不好意思沒注意到 😳

      1. 最近也還在做新版,很多地方還沒有頭緒~~

        1. 嗯,做一個新的主題的確會有很多地方需要突破的,ㄚ湯對於主題製作已經很有心得了,現在應該是在想整個版面佈局的問題吧?

          1. 沒錯…佈局是挺頭痛的@@
            還有配色問題..其它應該不是問題= =

        2. 做主題最令人頭痛的,一直以來應該就是佈局和配色問題了,其它技術性的問題反倒比較好解決呢~

  1. 最近也還在做新版,很多地方還沒有頭緒~~

    1. 那就互相學習囉~對了,你留的網址就是你自己做的主題嗎?

  2. 我想你打錯了。
    你在function.php已經echo了,在輸出頁便不需要再打上。
    不然便會變成這樣了。

    1. 便會重複了
      <div class="pagination"><div class="pagination">
      <?php kriesi_pagination ($query_string); ?>
      </div></div>

      1. 啊,是的,的確只需輸入:

        即可,否則便會如你所說,重複了 DIV 的區塊。

        感謝指正 🙄

        我已經修正文章了。

        1. 不用謝,舉手之勞而已。
          感謝分享。

  3. 可以請問一下,覺非大的文章分類那一行是甚麼功能?翻了教學文還是看不出所以然來!

    1. >>文章分類那一行是甚麼功能
      你這句我不懂耶,有什麼其他功能嗎?麻煩詳述你的問題喔!

發佈留言

Close Menu