如何將麵包屑添加到您的 WordPress 網站

已發表: 2023-02-12

導航是任何網站的重要組成部分，提供導航的方式不止一種。 您網站上的主菜單是將用戶帶到他們想要的內容的主要導航工具。 但是，它不會告訴您的客戶他們目前在您網站上的位置。

麵包屑菜單是一種輔助導航系統，可以告訴您的客戶他們與您的主頁相關的位置。 這有助於他們輕鬆瀏覽您網站的頁面，避免迷路。

在本文中，我們將研究什麼是麵包屑以及它們如何使您的網站受益。 然後，我們將向您展示如何將麵包屑添加到您的 WordPress 網站。 讓我們開始吧！

目錄
1.什麼是 WordPress 中的麵包屑？
2.添加麵包屑的好處
3.如何在 WordPress 中添加麵包屑
3.1. 方法一：使用插件
3.1.1. 第 1 步：下載 Yoast SEO 插件
3.1.2. 第 2 步：向您的 header.php 文件添加一個函數
3.1.3. 第 3 步：激活麵包屑導航支持
3.2. 方法 2：編寫您自己的麵包屑導航
3.2.1. 第 1 步：創建骨架函數
3.2.2. 第 2 步：添加基本規則
3.2.3. 第 3 步：添加“if else”語句
3.2.4. 第 4 步：向主題標題添加功能
4.使用 WP Engine 自定義您的網站

什麼是 WordPress 中的麵包屑？

麵包屑是用於描述分層導航菜單的術語。 這種菜單包含一系列鏈接，與 Hansel 和 Gretel 留下的麵包屑痕跡沒什麼不同：

由於許多用戶不會通過主頁進入您的 WordPress 網站，麵包屑導航可幫助他們了解他們的登陸位置。 搜索引擎還使用麵包屑來更好地了解網頁的層次結構。

添加麵包屑的好處

將 WordPress 麵包屑菜單添加到您的網站有幾個好處。 例如，Google 喜歡麵包屑，因此此功能可以改善您的搜索引擎優化 (SEO) 並為您的網站帶來更多訪問者。

麵包屑菜單還可以降低跳出率，因為它們可以改善您網站的用戶體驗 (UX)。 當用戶可以輕鬆瀏覽您的網站時，他們就更有可能花時間在上面。

如何在 WordPress 中添加麵包屑

您可以通過兩種方式將麵包屑添加到您的 WordPress 網站。 最簡單的方法是使用 WordPress 插件，但您也可以將麵包屑編碼到您網站的header.php文件中。 在您使用任何一種方法之前，您應該為您的網站創建一個備份，以防萬一出現問題。

方法一：使用插件

將麵包屑添加到 WordPress 的最簡單方法是使用麵包屑插件。 您可以使用許多插件，包括 Breadcrumb NavXT 和 Yoast SEO：

Yoast SEO 通常是最佳選擇，因為它很可能是您的網站已經使用的插件。

第 1 步：下載 Yoast SEO 插件

由於 Yoast 是一個 SEO 插件，它提供了廣泛的功能。 這包括麵包屑導航的創建和样式。

要使用此插件，您需要從 WordPress 插件目錄下載它。 您只需前往您網站的插件頁面，搜索“Yoast SEO”，然後像其他任何插件一樣安裝和激活插件。

第 2 步：向您的header.php文件添加一個函數

激活插件後，您必須在站點的header.php文件中添加一個函數。 要訪問此文件，請導航至外觀>主題編輯器並選擇文件以將其打開。

然後，在您希望麵包屑設置菜單出現的任何位置添加以下代碼：

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

通常，您需要將此代碼放在header.php文件的末尾。 但是，您可以嘗試菜單的位置，檢查站點的前端以查看結果的外觀。

如果您想讓麵包屑功能出現在頁面的其他地方，您甚至可以將上述功能添加到主題的single.php或page.php文件中。 只要確保只將它添加到一個地方即可。

第 3 步：激活麵包屑導航支持

最後，您需要激活麵包屑支持。 在 Yoast SEO 中，這意味著導航到SEO >搜索外觀>麵包屑：

只需將開關切換到“已啟用”，就可以開始了！ 您的 WordPress 麵包屑菜單將設置完畢並可以使用。

方法 2：編寫您自己的麵包屑導航

添加網站麵包屑也可以通過編碼手動完成。 如果您不想使用麵包屑插件，可以添加沒有麵包屑的插件。 在嘗試此操作之前，您可能需要閱讀微數據，以便充分利用 WordPress 麵包屑的 SEO 潛力。

第 1 步：創建骨架函數

要手動將麵包屑添加到 WordPress，您需要創建一個 PHP 函數。 創建此功能的第一步是構建骨架。 您的骨架函數將需要一個唯一的名稱，以避免與其他函數發生衝突。

function my_breadcrumbs() {
/* Breadcrumbs code will go here */
}

上面的函數是骨架，其餘的麵包屑代碼將放在大括號內。

第 2 步：添加基本規則

創建骨架後，您需要向函數添加規則。 規則應放在麵包屑部分：

/* Change according to your needs */
$show_on_homepage = 0;
$show_current = 1;
$delimiter = '»';
$home_url = 'Home';
$before_wrap = '<span clas="current">';
$after_wrap = '</span>';

/* Don't change values below */
global $post;
$home_url = get_bloginfo( 'url' );

上面的規則一般都是用變量，所以以後可以改。 前兩個變量使用布爾值，其中“0”為假，“1”為真。

第 3 步：添加“ if else ”語句

在變量下方，您需要添加“if else”語句。 該語句將檢查用戶是否在您網站的主頁上。 根據此信息，該語句將確定是否顯示麵包屑：

/* Check for homepage first! */
if ( is_home() || is_front_page() ) {
$on_homepage = 1;
}
if ( 0 === $show_on_homepage && 1 === $on_homepage ) return;

/* Proceed with showing the breadcrumbs */
$breadcrumbs = '<ol itemscope itemtype="http://schema.org/BreadcrumbList">';

$breadcrumbs .= '<li itemprop="itemListElement" itemtype="http://schema.org/ListItem"><a target="_blank" href="' . $home_url . '">' . $home_url . '</a></li>';

/* Build breadcrumbs here */

$breadcrumbs .= '</ol>';
echo $breadcrumbs;

如果此語句未添加到函數中，則麵包屑設置可能會或可能不會在您希望的時候出現。

第 4 步：向主題標題添加功能

麵包屑功能完成後，您可以將其添加到網站的header.php文件中。 導航到外觀>主題編輯器打開文件，並將功能添加到最後。

然後保存您的更改，並在前端查看您的新網站麵包屑菜單。 您可以繼續調整功能及其位置，直到菜單看起來恰到好處（或在必要時禁用麵包屑）。

使用 WP Engine 自定義您的網站

麵包屑導航菜單可幫助您網站的訪問者找到他們的方式。 它們還使搜索引擎更容易理解您網站的層次結構。 像 Yoast SEO 這樣的插件是向您的網站添加麵包屑的最簡單方法，但您也可以手動對其進行編碼。

使用正確的虛擬主機可以幫助保證您網站的性能，讓您有時間專注於開發和用戶體驗。 WP Engine 可以為您提供最好的託管 WordPress 託管計劃，以及創造令人難以置信的網站體驗的最佳資源！