WordPress架站| OceanWP麵包屑設定|Yoast SEO Breadcrumb設在文章頁面

  • Post last modified:2022-08-23
  • Reading time:4 mins read
  • Post category:Learn | Wordpress架站

Breadcrumb,直翻叫做「麵包屑」,其實就是網站導覽,一般會長的像下段這樣,

首頁 » 生活中的生活 » Learn | WordPress架站 » WordPress網站建置從零開始-給我兩天給你全世界

是一種「階層概念」,可以讓訪客知道現在自己在哪個位置,也方便直接跳往想要去的階層。在SEO優化手冊裡面,會建議開啟Breadcrumb功能,在google評分上有益。本網站因為使用OceanWP主題,加上有啟用Yoast,這篇就跟大家分享如何開啟麵包屑功能。

OceanWP主題本身就提供Breadcrumb

OceanWP主題本身就有Breadcrumb功能,而且也有短代碼,不過官方網站有指出,如果有開啟Yoast SEO外掛,那預設的Breadcrumb將無法使用,需要去Yoast SEO設定。

The Breadcrumb doesn’t Appear

If you use Yoast SEO, the default breadcrumb is disabled, you just need to go to the Yoast SEO settings and enable the plugin breadcrumb, this way you will have more control over it.

如果沒有使用Yoast SEO外掛,那可以透過短代碼,把Breadcrumb插入在想要的位置。短代碼寫法參考

開啟Yoast SEO麵包屑功能

控制台Yoast SEO搜尋外觀導覽標記啟用Breadcrumb。
可以自行再做細節上的設定,包括分隔符號、頁首等等…
Yoast SEO官網有寫一個英文版的教學網頁,懶得看的話就照下面步驟進行。

Yoast SEO新增麵包屑

啟用以後,就要在佈景主題編輯器中加入麵包屑程式碼。
麵包屑可以添加在自己想要的位置上,依據不同位置貼在不同地方。
我是想像下圖這樣,在每篇文章上方出現,設定的地方如下:

控制台→外觀→佈景主題檔案編輯器→「singlular.php」→
在<?php do_action( ‘ocean_before_content’ ); ?> 後面將下面Yoast麵包屑程式碼貼上

<?php
if ( function_exists('yoast_breadcrumb') ) {
  yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>

這樣在文章的頂端(Header下面,Title上面),就會出現麵包屑。注意不要亂貼,貼的時候記得自己貼在第幾行,要是貼的地方有問題,網站會掰,我再嘗試貼在那的時候,網頁就曾經出現「你的網站出現重大問題」。

如果想要麵包屑適用在整個網站,包括首頁等任何頁面,就要設在「header.php」
直接貼在程式碼最後面,這樣整個網站都會有Breadcrumb導覽。

注意會被佈景主題更新洗掉

但要注意的是,如果沒有使用OceanWP子主題功能,那OceanWP更新的時候,就會被洗掉,需要重設,因為OceanWP子主題的佈景主題編輯器無法做太多更動(或是太高階了我不會動…),建議可以在母主題設定完後,再啟用子主題,就會一併套用了,這樣以後OceanWP主題更新,就不會動到網站設定。

WordPress網站建置從零開始-給我兩天給你全世界