您想將圖像圖標添加到您的WordPress導航菜單中嗎？圖片可以幫助訪問者一目了然地了解您網站的導航。您甚至可以使用圖標來突出顯示菜單最重要的內容或號召性用語。在本文中，我們將向您展示如何在WordPress中的導航菜單中添加圖像圖標。

 為什么要在WordPress中添加帶有導航菜單的圖像圖標？

通常，WordPress導航菜單是純文本鏈接。這些鏈接適用于大多數網站，但它們并不總是看起來有趣或引人入勝。

通過將圖像圖標添加到導航菜單，您可以鼓勵訪問者關注菜單并瀏覽您網站的更多內容。

如果您的菜單有很多不同的選項，那么圖像圖標可以使訪問者更輕松地掃描內容并找到他們正在尋找的內容。這可能是增加網頁瀏覽量和降低WordPress跳出率的簡單方法。

您甚至可以使用圖像圖標來突出顯示最重要的菜單項，例如在線市場中的結帳鏈接。

通過在菜單中突出顯示號召性用語，您通常可以獲得更多的注冊、銷售、會員和其他轉化。

 方法1：使用插件將圖像圖標添加到導航菜單（快速簡便）

將圖標添加到WordPress菜單的最簡單方法是使用菜單圖像。該插件帶有儀表板圖標，您只需單擊幾下即可添加。

如果您在網站上設置了字體真棒，那么您可以使用菜單圖像輕松地將這些圖標添加到導航菜單中。

另一種選擇是使用WordPress媒體庫中的圖像或圖標。

您需要做的第一件事是安裝并激活菜單圖像插件。

激活后，單擊WordPress儀表板中的菜單圖像。在此屏幕上，您可以選擇是獲取安全和功能通知還是單擊“跳過”按鈕。

這將帶您進入一個屏幕，您可以在其中配置插件的設置。首先，您將看到可用于圖像圖標的所有不同大小。

如果您打算使用字體真棒或破折號圖標中的圖標，則菜單圖像將自動調整它們的大小。但是，如果您使用媒體庫中的圖像，則需要手動選擇大小。

該插件支持默認的WordPress圖像大小，例如縮略圖，圖像和大圖像。它還添加了三個唯一大小，默認情況下設置為 24×24、36×36 和 48×48 像素。

這些設置應該適用于大多數網站，但您可以通過為第一個、第二個或第三個菜單圖像大小鍵入不同的數字來放大或縮小圖標。

當您向菜單添加圖標時，默認情況下，您會看到一個“懸停時的圖像”字段。這允許您在訪問者將鼠標懸停在該菜單項上時顯示不同的圖標。

請注意，此設置僅在使用自己的圖像時可用。如果您打算使用儀表板圖標或字體真棒圖標，則無需擔心“懸停時的圖像”功能。

顯示不同的圖標可以幫助訪問者查看他們在導航菜單中的位置。如果您的菜單包含許多不同的項目，這將特別有用。例如，您可以使用不同的顏色或圖標大小來突出顯示當前選定的項目。

如果要創建不同的懸停效果，請確保選中“在懸停字段上啟用圖像”。

完成后，單擊“保存更改”以存儲您的設置。

要將圖標添加到導航菜單，請轉到外觀?菜單。默認情況下，WordPress將顯示您網站的主菜單。

如果要編輯其他菜單，只需打開“選擇要編輯的菜單”下拉菜單，然后從列表中選擇一個菜單即可。之后，點擊“選擇”。

現在，將鼠標懸停在要添加圖標的第一個菜單項上。當出現“菜單圖像”時，單擊它。

您現在可以決定是使用自己的圖像還是選擇現成的圖標，例如字體真棒圖標。

要使用現成的圖標，請單擊“圖標”旁邊的單選按鈕。

然后，您可以單擊以選擇任何儀表板圖標或字體真棒圖標。

您想改用自己的圖像嗎？然后選擇“圖像”旁邊的單選按鈕，然后單擊“設置圖像”鏈接。

您現在可以從WordPress媒體庫中選擇圖像，也可以從計算機上傳新文件。

如果您在插件的設置中選中了“懸停時啟用圖像字段”，那么您還需要單擊“懸停時設置圖像”。

現在，選擇要在用戶將鼠標懸停在此菜單項上時顯示的圖像。

有時，您可能希望忽略此設置，無論如何都顯示相同的圖標。為此，請單擊“懸停時設置圖像”，然后選擇完全相同的圖標。

如果您不選擇圖像，則當訪問者將鼠標懸停在其上時，圖標將完全消失。

之后，打開 圖片尺寸 下拉列表并從列表中選擇一種尺寸。

對所有圖標使用相同的大小往往會使菜單看起來更有條理。但是，有時最好為最重要的項目使用更大的圖標。

例如，如果您使用WooCommerce等插件創建了一個在線商店，那么您可以使用更大的圖標進行“結帳”，使其脫穎而出。

當您對圖標感到滿意時，是時候查看菜單項的標簽了。默認情況下，插件在圖標后顯示標題標簽。

要更改此設置，請選擇“標題位置”部分中的任意單選按鈕。

另一種選擇是完全刪除導航標簽并創建僅圖標菜單。如果您的菜單有很多項目，那么這可以使其看起來不那么混亂。

但是，僅當每個圖標的含義很明顯時，才應隱藏標簽。如果不清楚，那么訪問者將很難瀏覽您的WordPress博客或網站。

要繼續并隱藏標簽，請選擇“無”旁邊的單選按鈕。

如果您對菜單項的設置方式感到滿意，請單擊“保存更改”。

要將圖標添加到其他菜單項，只需按照上述相同過程操作即可。

完成后，不要忘記單擊“保存菜單”按鈕。現在，如果您訪問WordPress網站，您將看到更新的導航菜單。

 方法2：使用代碼將圖標添加到WordPress菜單（更可定制）

您還可以使用 CSS 將圖像圖標添加到導航菜單中。

通過這種方式，您可以準確控制圖標在菜單中的顯示位置。您還可以使用任何圖像作為圖標，因此這是添加自己的品牌的好方法。

在開始之前，請繼續上傳要用作圖標的所有圖像文件。這些可能是庫存照片、你在網上找到的免版稅圖片，或者使用 Canva 等應用創建的自定義圖形。

將每個圖像添加到WordPress媒體庫后，請確保復制其URL并將其粘貼到記事本等文本編輯器中。在下一步中，您將需要所有這些鏈接。

要查找圖像的URL，只需在WordPress媒體庫中選擇它，然后查看“文件URL”字段。

之后，您需要轉到 外觀 ? 菜單。

接下來，打開“選擇要編輯的菜單”下拉菜單，然后選擇要添加圖像圖標的菜單。

之后，繼續并單擊“選擇”。

接下來，您需要通過單擊“屏幕選項”來啟用自定義CSS類。

在顯示的面板中，選中“CSS 類”旁邊的框。

完成此操作后，您可以將自定義CSS類添加到導航菜單中的任何項。這就是您將每個菜單項鏈接到WordPress媒體庫中的圖像的方式。

您可以隨意調用這些類，但最好使用有助于識別菜單項的內容。

要開始使用，只需單擊要添加圖像圖標的第一個項目。在“CSS 類（可選）”字段中，鍵入要使用的類名。

您將在下一步中使用這些自定義 CSS 類，因此請在記事本或類似應用中記下它們。

只需按照相同的過程為所有菜單項添加單獨的類。之后，單擊“保存菜單”以存儲您的設置。

現在，您可以使用CSS將圖像圖標添加到WordPress導航菜單中。

通常，WordPress教程會告訴您將代碼片段添加到WordPress主題文件中。但是，這樣做可能會導致常見的WordPress錯誤，并且對初學者不是很友好。

這就是我們推薦WPCode的原因。

WPCode是超過1萬個WordPress網站使用的最受歡迎的代碼片段插件。它允許您添加自定義代碼，而無需編輯主題的功能.php文件。

您需要做的第一件事是安裝并激活免費的WPCode插件。

激活后，轉到代碼片段 ? 添加代碼段。

這將帶您進入“添加代碼段”頁面，您可以在其中看到WPCode的現成代碼片段庫。其中包括允許您通過禁用XML-RPC來提高WordPress安全性的代碼片段，上傳WordPress默認不支持的文件類型等等。

只需將鼠標懸停在“添加自定義代碼”上，然后在出現時單擊“使用代碼段”。

首先，鍵入自定義代碼段的標題。這可以是幫助您識別WordPress儀表板中代碼段的任何內容。

完成后，打開“代碼類型”下拉列表，然后選擇“CSS片段”。

在代碼編輯器中，您需要為要顯示的每個圖標添加一些代碼。

為了幫助您，我們在下面創建了一個示例代碼段。您可以繼續將“.carticon”更改為您在上一步中創建的自定義CSS類。您還需要將URL替換為WordPress媒體庫中圖像的鏈接：

.carticon {background-image: url('http://localhost:10013/wp-content/my-media/cartcheckout.png');background-repeat: no-repeat;background-position: left;padding-left: 5px;}

注意：您需要在代碼片段中將點 '.“ 保留在 CSS 類的前面。這就是告訴WordPress它是一個類而不是另一種CSS選擇器的原因。

您需要針對上面創建的每個菜單項調整上面的代碼段。

當您對代碼感到滿意時，請滾動到“插入”部分。WPCode可以將代碼添加到不同的位置，例如在每個帖子之后，僅前端或僅管理員。

要在整個WordPress博客或網站上使用自定義CSS代碼，請單擊“自動插入”（如果尚未選擇）。

然后，打開“位置”下拉菜單并選擇“站點范圍標題”。

之后，您就可以滾動到屏幕頂部并單擊“非活動”切換，使其更改為“活動”。

最后，單擊“保存代碼段”以使自定義CSS生效。

現在，如果您訪問您的網站，您將在導航菜單中看到所有圖像圖標。

根據您的WordPress主題，您可能需要調整CSS，使其在正確的位置顯示圖像圖標。如果是這種情況，請前往 代碼片段 ? 代碼片段 在WordPress儀表板中。

然后，只需將鼠標懸停在代碼段上，然后在出現時單擊“編輯”鏈接。

這將打開代碼編輯器，該編輯器已準備好供您進行一些更改。