簡介
我們在別人的網頁中常常看到“網頁軌跡”的功能，什麼是網頁軌跡？直接看圖比較明瞭，如下圖紅色箭頭處。你會想說這東西重要嗎？是否可有可無？但我想說，其實還真的有點重要，尤其實在SEO時，程式會判斷使用這是從哪個地方”一層一層“的進入到目的頁面，這都可以分析使用者行為。然而我們通常把這個功能稱作『 麵包屑 』，KeyWord稱『 Breadcrumbs 』。在這篇我們特別講述如何實現在Wordpress中，且怎麼把它放置在Page頁面中。
前置作業 – Page Parent
我自己原本還沒搞懂Page Parent這塊時，常會以為Breadcrumbs是依循著Menu的階層、分支來顯示麵包屑的階層，而其實不對，會影響到Breadcrumbs的階層的是在你Page或Post或其他新增頁面內容的類別之中的層級分類。在這邊我們以Page來新增頁面。
在這邊不得不提一下好用的WP建立頁面的工具，叫做WPBakery，待會有個Breadcrumbs也是這其中裡面的一個模型。大家可以看上圖右側紅框框處，當我們在新增完頁面內容後，需要做周邊的設定，例如Footer、Header、Title等等要不要顯示等其他設定，但本篇在述說Page Parent的階層，那就看到Page Attributes的地方，有個Parent的下拉式選單，你可以指定此頁面要掛載在誰的階層下，對於製作Breadcrumbs勢必要設定之處。
上圖就是我們在Parent指定上一階層後，顯示在Page的每個頁面效果，可以看到最上層的名稱前面不會有『 – 』符號，代表他是最上層，接著看到第二層，這邊我新增了祖父跟祖母在Home的階層之下，前面會多了一槓，第三層是爸爸，前面有兩槓，而第四層就會有三槓依此類推。以上就是要實現Breadcrums的前置作業。
Breadcrumb實作於Page中(1) – Breadcrumb
接著我們來裝Plugin，一樣到Plugin->add new頁面的搜尋欄處（上圖紅色箭頭）打上關鍵字，並看到紅色框框這個，請按下Install Now，安裝好請Activate他。橙色框框的那個也是可以用但需要比較繁瑣的程序，所以這次我們就捨棄他，想多嘗試的人可以試試看。
啟動此外掛後我們到他的Setting區來做細節設定，設定包含了General Option , Style Shortcodes , Custom CSS 最後個可以不用看。先來講講General Option的調整參數：
Breadcrumb front text：在你的Breadcrumb欄位最一開頭會顯示的文字。
Breadcrumb separator text：Breadcrumb的分隔符號，你也可以替換成” / “或其他你喜歡的字元都可以。
Display last separator：是否要顯示字元下方的分隔線。
Breadcrumb link text limit by：限制點擊Breadcrumbs的角色。
Limit count：最大顯示階層（上個段落所設定的階層）。
Ending character：在最後階層的按鈕後所有接續的贅字。
Display “Home” on breadcrumb：是否要顯示首頁在Breadcrumbs中，通常是都會要顯示。
Custom home text：你要顯示Home這個最前置按鈕的字，可以改其他你喜歡的字。
Hide breadcrumb on these pages：在哪些頁面你不想顯示Breadcrumbs（這要付費）。
Hide on page by ID：同上方功能，但是以page id來隱藏的。
Current URL hash：通常都用＃，點擊後會停留在此頁面。
Style Setting：
在免費版本只有五種Style可以選擇，但我也覺得是夠用了，因為下方可以調整按鈕的背景、字體顏、分隔符號的顏色與大小。
Shortcodes是WP特有的格式，這邊的”[breadcrumb]“就是你要複製貼上在你的Page頁面中的短程式碼，很重要。但你假如看這Shortcode裡面的字不爽也可以改成其他的單字，改完記得要儲存。而後面的Custom CSS 與 Help可以略過，假如你是要自己克制breadcrumbs裡面字的字型或其他要調整的可以使用Custom CSS，這裡就不多贅述了。
開始新增剛剛設定好的Breadcrumbs，在最一開始推薦的Page Builder WPBakery好用的地方就是不用自己寫程式碼，如上圖，請點選箭頭處的“＋”。
WPBakery有許多的Element可以用，假如沒有你想要的，還可以去Plugin裝Add-on（等等會講到），這邊我們新增一個Raw HTML的Element，並把我們剛剛複製的Breadcrums shortcodes貼上，儲存發布。可以看到效果顯示在網頁前台，以上。可以看到下圖箭頭處。
Breadcrumb實作於Page中(2) – WPBakery Addons
實現Breadcrumbs第二個外掛就是ThePlus Addons For WPBakery Page Builder，這前提就是要你已經有安裝WPBakery了，那我們就安裝下去吧，一樣Install Now & Activate。
接著看到上圖，請點選紅色箭頭處剛剛啟動的外掛，並看到頁面，有許多Addons的功能，當然你可以全選把全部的東西加到WPBakery的Element資源庫中，但這邊我先把Breadcrumbs打勾即可，並按下儲存。然後請移動到剛剛Page->Son Page裡新增。
可以看到當你要Add Element時，多了一個如上圖的Icon，不要猶豫，就是他按下去。
而相較於第一個外掛要到特定他的Setting頁面進行設定，第二個是在頁面中設定Breadcrumbs的Style，這邊有General , Icon , Background Options , Texture Background , Text的設定區，這個外掛是比較活潑一點。
在General的Layout是讓你選擇對其狀態。
Title Style Layout：你的標題要在上或是在下。
Vertical Position：垂直位置。
Breadcrumb Bar Display：是否要開啟Breadcrumb功能（講廢話嗎），而下方兩個子選項都只有一個可以選（沒辦法這是免費的）
Page Title Options / Sub Title：填入你的Breadcrumbs名稱 與 次要標題名稱。
Breadcrumb Width：整體的Breadcrumbs元件的寬度，有兩個選項，其一是Container，意思是符合你現在的RWD分佈容器，另一個則是Full-width，width = 100 %的意思。
Breadcrumb Height：整個元件的高度。
Extra Class：就是你假如有寫Css在此Theme中則只需呼叫他的class name即可。
Icon區，讓你的Breadcrunbs點綴一下，在Title的上方可以加入Icon , Image , SVG(動態繪製線搞功能，要錢）。
Background Option：此區域可以將麵包屑區塊底部放入影片，這邊會用到的時機是，你把此區塊當作Banner並且在General設定成Full-Width的模式，不僅可以有Breadcrumbs的資訊，亦可是好看的Banner。而下一個Texture Background也是有這用意，只不過他是圖片背景。而最後一個是Text的參數設定，這邊就不多贅述，我們可以看到下圖是結果顯示。
小結
這篇講述的是非常好用且重要的功能，大家可以嘗試著自己建構，從Page的階層，延伸至應用於Breadcrumb。也可以嘗試使用不同的Breadcrumb的實現方法，例如透過WP裡的Widght啊，或是從PHP code著手都可以。