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

 為什么要在WordPress中添加帶有導(dǎo)航菜單的圖像圖標(biāo)？

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

通過將圖像圖標(biāo)添加到導(dǎo)航菜單，您可以鼓勵訪問者關(guān)注菜單并瀏覽您網(wǎng)站的更多內(nèi)容。

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

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

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

 方法1：使用插件將圖像圖標(biāo)添加到導(dǎo)航菜單（快速簡便）

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

如果您在網(wǎng)站上設(shè)置了字體真棒，那么您可以使用菜單圖像輕松地將這些圖標(biāo)添加到導(dǎo)航菜單中。

另一種選擇是使用WordPress媒體庫中的圖像或圖標(biāo)。

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

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

這將帶您進(jìn)入一個屏幕，您可以在其中配置插件的設(shè)置。首先，您將看到可用于圖像圖標(biāo)的所有不同大小。

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

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

這些設(shè)置應(yīng)該適用于大多數(shù)網(wǎng)站，但您可以通過為第一個、第二個或第三個菜單圖像大小鍵入不同的數(shù)字來放大或縮小圖標(biāo)。

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

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

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

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

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

要將圖標(biāo)添加到導(dǎo)航菜單，請轉(zhuǎn)到外觀?菜單。默認(rèn)情況下，WordPress將顯示您網(wǎng)站的主菜單。

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

現(xiàn)在，將鼠標(biāo)懸停在要添加圖標(biāo)的第一個菜單項上。當(dāng)出現(xiàn)“菜單圖像”時，單擊它。

您現(xiàn)在可以決定是使用自己的圖像還是選擇現(xiàn)成的圖標(biāo)，例如字體真棒圖標(biāo)。

要使用現(xiàn)成的圖標(biāo)，請單擊“圖標(biāo)”旁邊的單選按鈕。

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

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

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

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

現(xiàn)在，選擇要在用戶將鼠標(biāo)懸停在此菜單項上時顯示的圖像。

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

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

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

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

例如，如果您使用WooCommerce等插件創(chuàng)建了一個在線商店，那么您可以使用更大的圖標(biāo)進(jìn)行“結(jié)帳”，使其脫穎而出。

當(dāng)您對圖標(biāo)感到滿意時，是時候查看菜單項的標(biāo)簽了。默認(rèn)情況下，插件在圖標(biāo)后顯示標(biāo)題標(biāo)簽。

要更改此設(shè)置，請選擇“標(biāo)題位置”部分中的任意單選按鈕。

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

但是，僅當(dāng)每個圖標(biāo)的含義很明顯時，才應(yīng)隱藏標(biāo)簽。如果不清楚，那么訪問者將很難瀏覽您的WordPress博客或網(wǎng)站。

要繼續(xù)并隱藏標(biāo)簽，請選擇“無”旁邊的單選按鈕。

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

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

完成后，不要忘記單擊“保存菜單”按鈕。現(xiàn)在，如果您訪問WordPress網(wǎng)站，您將看到更新的導(dǎo)航菜單。

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

您還可以使用 CSS 將圖像圖標(biāo)添加到導(dǎo)航菜單中。

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

在開始之前，請繼續(xù)上傳要用作圖標(biāo)的所有圖像文件。這些可能是庫存照片、你在網(wǎng)上找到的免版稅圖片，或者使用 Canva 等應(yīng)用創(chuàng)建的自定義圖形。

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

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

之后，您需要轉(zhuǎn)到 外觀 ? 菜單。

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

之后，繼續(xù)并單擊“選擇”。

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

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

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

您可以隨意調(diào)用這些類，但最好使用有助于識別菜單項的內(nèi)容。

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

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

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

現(xiàn)在，您可以使用CSS將圖像圖標(biāo)添加到WordPress導(dǎo)航菜單中。

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

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

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

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

激活后，轉(zhuǎn)到代碼片段 ? 添加代碼段。

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

只需將鼠標(biāo)懸停在“添加自定義代碼”上，然后在出現(xiàn)時單擊“使用代碼段”。

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

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

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

為了幫助您，我們在下面創(chuàng)建了一個示例代碼段。您可以繼續(xù)將“.carticon”更改為您在上一步中創(chuàng)建的自定義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選擇器的原因。

您需要針對上面創(chuàng)建的每個菜單項調(diào)整上面的代碼段。

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

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

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

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

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

現(xiàn)在，如果您訪問您的網(wǎng)站，您將在導(dǎo)航菜單中看到所有圖像圖標(biāo)。

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

然后，只需將鼠標(biāo)懸停在代碼段上，然后在出現(xiàn)時單擊“編輯”鏈接。

這將打開代碼編輯器，該編輯器已準(zhǔn)備好供您進(jìn)行一些更改。