分享本文

分享在 facebook
分享在 twitter
分享在 linkedin
分享在 whatsapp
分享在 telegram
相信有許多使用 WordPress 的朋友們對於這個文章導航的功能都不陌生,而過去我們通常是安裝 Breadcrumb Navigation XT 這款插件來達成這個功能,但近年來有許多 WordPress 使用者們都逐漸減少了插件的使用。因為安裝啟用的插件越多,對於主機造成的負擔就越大,嚴重地甚至會大大拖慢部落格開啟的速度(當然,過度使用加載 js 也是會造成這樣的後果)。
WordPress 主題製作學習筆記:幫你的主題加上「文章導航」的功能
WordPress 主題製作學習筆記:幫你的主題加上「文章導航」的功能

 

相信有許多使用 WordPress 的朋友們對於這個文章導航的功能都不陌生,而過去我們通常是安裝 Breadcrumb Navigation XT 這款插件來達成這個功能,但近年來有許多 WordPress 使用者們都逐漸減少了插件的使用。因為安裝啟用的插件越多,對於主機造成的負擔就越大,嚴重地甚至會大大拖慢部落格開啟的速度(當然,過度使用加載 js 也是會造成這樣的後果)。

 

所以這回要跟大家分享的是幫你的主題加上自帶文章導航的功能,實現這個功能後,你就可以完全脫離 Breadcrumb Navigation XT 插件,少裝一個插件,讓你的 WordPress 速度加快飛起來!

 

我先將我的文章導航代碼貼出來,再跟各位解釋其中的原理。

 

 

 https:// 這裡代表的是,我們要呼叫首頁的鍊結網址 https:// 這裡代表我們要調用文章的分類鍊結 https:// 這裡代表我們要調用該篇文章的標題鍊結

 

那為何我又用了 breadcrumb-nav 這樣的 div class 包住呢?那是因為我們必須在主題的 CSS 裡面定義這個區塊(DIV)的樣式,給文章導航一個特定的 class 方便你日後修改樣式表。以下是 SO Personal 的文章導航樣式,如果要運用在你的主題裏,請自行更改樣式,這裡的樣式僅提供參考:

 

.breadcrumb-nav{ background: #EFF8FF; border: 2px solid #21BEDE; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; color: #4f4f4f; margin: 10px; padding: 10px;}

 

 

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


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

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


請拍掌支持我繼續創作

↓↓↓ 若你喜歡我的文章,請在下方的「讚賞鍵」按讚,我會因此獲得收入。

回饋由 LikeCoin 基金會出資,您只要註冊/登入帳號(fb、google 帳號都可以註冊,流程超快),按五次左鍵,就可以贊助我的文章,完全免費。感謝支持。 ↓↓↓

飛翔於文字國裏的蝴蝶,我是愛寫文的女子,不要看我的人,請你看看我的文,那裡面全是我的心.和我想對你說的話……
StartOver.回。到。原。點 https://carrielis.com

分享本文

分享在 facebook
分享在 twitter
分享在 linkedin
分享在 whatsapp
分享在 telegram

“WordPress 主題製作學習筆記:幫你的主題加上「文章導航」的功能” 有 12 則留言

    1. 對,我都忘了 WordPress 搭建實在很快、也沒有難度,主要還是佈景主題的修改。 😎

      你的博客主題挺簡潔,或許我下一個主題會邁向那樣的色調吧 :mrgreen:

    1. 這我倒不知道,只知道能從後台設計下拉式導航列(可選分頁或是分類),我有下載 3.0 beta2 的版本,不過最近都在看書,還沒真正開啟檔案來測試過,你說的部份我之後會注意。

請留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

相關文章

捲動至頂端