如何在WordPress中使用導航菜單添加圖像圖標


您是否要在WordPress導航菜單中添加圖像圖標? 最近,我們的一位用戶要求添加菜單圖標的簡便方法。 在本文中,我們將向您展示如何在WordPress中使用導航菜單添加圖像圖標。

在WordPress中添加導航菜單圖標

為什麼要添加帶有導航菜單的圖像圖標?

通常,WordPress導航菜單是純文本鏈接。 這些鏈接適用於大多數網站,但是,您可以通過添加圖像圖標使導航菜單看起來更具交互性。

圖像圖標還可用於使菜單更加醒目。 例如,聯繫人頁面旁邊的漂亮圖像圖標可以使其在菜單中的其他鏈接中脫穎而出。

話雖如此,讓我們看一下如何在WordPress中輕鬆添加帶有導航菜單的圖像圖標。

影片教學

訂閱WPBeginner

如果您不想觀看視頻教程,則可以繼續閱讀以下文本版本:

方法1:使用插件添加菜單圖標

此方法更簡單,建議初學者使用,因為它不涉及代碼。

您需要做的第一件事是安裝並激活Menu Image插件。 有關更多詳細信息,請參閱有關如何安裝WordPress插件的分步指南。

激活後,您需要訪問 外觀»菜單 頁。

在這裡,您可以單擊右列中的任何菜單項以將其展開。 您會在每個項目的設置中看到“菜單圖像”和“懸停圖像”按鈕。

菜單圖像按鈕

使用這些按鈕,可以選擇或上傳要使用的菜單圖像圖標。 如果需要,則可以僅上載菜單圖像而忽略懸停圖像。

在“圖像尺寸”下拉菜單中,您可以選擇圖像圖標的尺寸。 此大小將同時應用於菜單圖標圖像和懸停圖像。

該插件帶有多個選項供您選擇。 但是,我們建議通過使用24×24或36×36尺寸來保持菜單圖標較小。

菜單圖標大小

如果要為菜單圖像添加自己的自定義大小,則可以通過在主題的functions.php文件或特定於站點的插件中添加此代碼來實現。

add_filter( 'menu_image_default_sizes', function($sizes){
 
  // remove the default 36x36 size
  unset($sizes['menu-36x36']);
 
  // add a new size
  $sizes['menu-50x50'] = array(50,50);
 
  // return $sizes (required)
  return $sizes;
 
});

您還可以將標題位置設置在圖像圖標的上方,下方,之前或之後。 它還允許您隱藏標題,並且僅顯示每個導航菜單的圖像圖標。

頭銜

配置設置後,只需將圖像圖標分別添加到所有導航菜單項中即可。 接下來,您需要單擊“保存菜單”按鈕以查看正在使用的菜單圖標。

導航菜單中的圖像圖標

方法2:使用代碼段添加菜單圖標

此方法適用於有經驗的用戶,他們了解CSS的方式。

首先,您需要訪問 媒體»添加新 在WordPress中上傳所有圖像圖標。 上傳後,您需要復制其URL並將其粘貼到文本編輯器(如記事本)中。

接下來,您需要轉到 外觀»菜單 並點擊屏幕右上角的“屏幕選項”按鈕。 在屏幕選項中,您需要檢查“ CSS類”選項。

添加CSS類

之後,向下滾動並單擊任何菜單項以展開其設置。 您會注意到“ CSS類(可選)”字段,需要在其中為菜單項添加CSS類名稱。

添加班級名稱

現在,您需要將此自定義CSS添加到主題中。

.homeicon {
background-image: url('http://www.example.com/wp-content/uploads/2018/09/home.png');
background-repeat: no-repeat;
background-position: left;
padding-left: 5px;
}

在此CSS代碼段中,.homeicon是您在上面的CSS類字段中添加的類名稱。

根據您的主題,您可能需要稍微調整CSS才能獲得菜單圖標的完美位置。 對結果滿意後,對所有菜單項重複該過程。

就這樣。 我們希望本文能幫助您學習如何在WordPress中使用導航菜單添加圖像圖標。 您可能還需要查看有關如何設置WordPress導航菜單樣式的指南。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。