這次要介紹是[Breadcrumb NavXT]這個外掛, WordPress環境裡似乎找不到這個功能, 它就像Windows下檔案總管中的路徑, 一個網站的內容如果很龐大很多, 是容易迷失在裡面, 所以增加此外掛, 可以知道目前位置是在哪裡.
一開始依然是先在WP(Word Press)後台中, 找到[外掛]-[安裝外掛]-關鍵字中輸入[Breadcrumb NavXT]就可以找到了, 如下圖所示, [立即安裝]後, 然後[啟用]就能使用了!
此畫面為外掛的部份截圖內容, 能使用調整的功能有很多, 這次是以預設方式來示範, 也就是沒有調整任何設定.
一開始直接進入cPanel 系統中, 直接做文件的修改來增加此功能區塊, 這裡需求是在文章中加入此外掛導航的功能顯示, 所以開啟如下路徑中的php 檔做編輯.
[wp-content]–[themes]–[frontier](自訂的佈景主題名稱)–[loop-single.php]
然後加入紅線框中的代碼, 它的用意就是增加一個區塊功能, 可以顯示目前的路徑.
[溫馨提醒]–>修改任何網站內的文件, 請先備份, 才不會因為修改錯誤而導致網站掛掉!
改好並且存檔之後, 就可以進入網站看結果了, 由於上個步驟的代碼寫的位置是在最前面, 所以此導航顯示功能會在文章的最前端, 但如果此代碼寫的位置在比較後面, 會造成覆蓋於文章中的某個部份, 這個要注意!
此時的樣式是預設,沒有做任何修改. 它依然也是可以透過CSS來做美化調整.
利用Google Chrome的工具[檢查]來找尋此功能的類別(class)名稱是什麼, 下圖紅色框所示, breadcrumbs 或者是div.breadrumbs這二者類別名稱皆可.
直接在WP後台中, [外觀]-[自訂]-[附加的CSS]中, 空白處加入以下代碼:
.breadcrumbs{
font-family:微軟正黑體;
font-size:14px;
background-color: #E4E8ED;
border:7px groove #FAF2F6;
color: #000000;
}
儲存後就能改善顯示的畫面了, 如下圖所示, 要呈現不同的美化,就需要一些CSS的基本概念, 也可以透用Google去做更多了解, 這裡就不多做解釋代碼意義了!
