如何將它們添加到導航中

如果您曾經看過一個網站,並且想知道他們如何製作菜單圖標,那麼您來對地方了。 WordPress菜單圖標為您的網站添加了視覺元素,並結合了相關圖標,以進一步指導用戶訪問所需的頁面。

簡而言之,菜單圖標是一種簡單,無創的方法,可以使您的網站看起來更加專業,同時通過準確指示用戶單擊菜單選項卡時可以期望的內容,為用戶提供更多的便利。

而且,使用正確的插件添加WordPress菜單圖標僅需執行幾步。 您無需自定義代碼菜單設計或擔心複雜的設置。

繼續閱讀以了解有關添加這些WordPress菜單圖標並為您的行業和企業找到完美視覺效果的信息。

?目錄:

要輕鬆添加WordPress菜單圖標,您可以使用ThemeIsle插件提供的免費菜單圖標。 到目前為止,它是最容易達到預期效果的插件,並且您會收到令人印象深刻的圖標集,包括Font Awesome,Fontello和Genericons中的選項。

下面,我們將向您展示如何設置插件。

如何快速添加第一個菜單圖標

我們將在文章的後面介紹更多特定於行業的圖標,但是現在是時候將即時圖標添加到菜單中的幾個選項卡上了。

注意:我們假設您已經配置了WordPress菜單。 如果不是這種情況,請轉到本文(或針對多級下拉菜單的這篇文章)以了解如何設置WordPress菜單。

如果您有興趣,ThemeIsle的插件文檔提供了有關如何添加菜單圖標的快速指南。 我們還將在這裡進行更深入的介紹。

首先,轉到WordPress儀錶板,然後單擊外觀→菜單。

菜單

假設您已經有一個菜單,則應該能夠在「菜單結構」標題下看到菜單項。 使用多個菜單,您必須選擇要編輯的菜單。 左側還有一個名為「添加菜單項」的模塊,該模塊使您可以從頁面,帖子,自定義鏈接等中製作菜單選項卡。

看菜單

找到正確的菜單並添加圖標

要添加WordPress菜單圖標,請選擇您已經創建的任何菜單項。

找到圖標:選擇鏈接。 單擊該按鈕導航到該部分,以向該特定菜單項添加圖標。

選擇

默認情況下,ThemeIsle的菜單圖標插件會顯示Dashicons集合中的圖標選項。 隨意滾動列表,然後選擇適合實際菜單標題的圖標。

例如,定製程序(筆/筆)圖標將與Blog的菜單圖標相關。

破折號

您也可以按關鍵字搜索圖標,或使用類別過濾器查找不同類型的圖標。

WordPress菜單圖標的類別

點擊您要用於菜單項的圖標。 這將突出顯示該圖標,並在其旁邊放置一個複選標記。

在右側,激活圖標之前,您將看到一些要配置的設置。

這些包括:

  • 隱藏標籤–刪除文本標籤,僅保留圖標(對於社交媒體圖標來說很好)。
  • 位置–相對於文本移動圖標的位置。
  • 垂直對齊–移動圖標的垂直位置。
  • 字體大小–放大或縮小圖標的大小。

選擇WordPress菜單圖標

有一個「預覽」區域,提供了有關調整設置時菜單項外觀的示例。 例如,增加字體大小並將圖標的位置移至「之後」將產生新的預覽。

寫博客圖標

確保所需圖標仍然突出顯示,然後單擊「選擇」按鈕將其添加到菜單中。

選擇

確保單擊「保存菜單」以激活圖標。

如果要更改某些內容,可以始終選擇「刪除」鏈接以重新開始。

保存菜單

查看前端菜單上的新圖標

檢查該圖標是否實際顯示在您的網站上。

通過查看實時網站,您可以查看它是否美觀,或者是否需要進一步調整圖標設置。

博客

故障排除

如果看不到該圖標或某些菜單項,請確保正確配置了菜單設置。 最重要的部分是為該菜單分配「顯示位置」,例如將其分配給「主菜單」位置。

菜單設置

檢查「菜單」部分中的「管理位置」選項卡也很重要,因為您可能會發現將錯誤的菜單分配給了主菜單。

主菜單

如何激活插件中所有受支持的圖標包

ThemeIsle插件的菜單圖標隨附對以下圖標包的支持:

  • 大柵欄
  • 難以捉摸
  • 字體很棒
  • 基礎
  • 泛型
  • 圖片
  • SVG

默認情況下,插件設置僅顯示Dashicons,但是您可以根據需要激活其他圖標集。 但是,您應該嘗試限制載入的圖標集的數量,因為每增加一個圖標集都會對網站的性能產生很小的影響。

要激活所有或某些圖標類型,請轉到儀錶板中的外觀→菜單。

選擇菜單圖標設置選項卡。

WordPress菜單圖標設置

打開所有菜單圖標集合/源

您將在「全局」選項卡下看到各種圖標類型:

圖標類型

選中要添加為選項的圖標集。

單擊保存設置按鈕繼續。

檢查並保存

確定要為其添加新圖標的菜單項。

單擊該項目的選擇按鈕。

選擇按鈕

探索其他來源的圖標

現在,您應該在窗口左側看到幾個圖標類別的列表。

注意:如果看不到新的圖標類別,請嘗試刷新頁面或保存菜單。

所有類別的WordPress菜單圖標

現在,如果您在搜索欄位中輸入「商店」,您將在每個圖標集中看到一些不同的圖標。

例如,Foundation集合為該搜索提供了兩個圖標,一個是購物袋,另一個是購物車。

基金會WordPress菜單圖標

使用完全相同的搜索詞,Font Awesome提供了另外三個圖標,與Foundation集合稍有不同。

字體很棒

就像上面的教程一樣,選擇一個圖標,然後單擊「選擇」以將其添加到菜單中。

購物車

請記住點擊「保存菜單」按鈕。

預覽並刪除

現在,菜單中既有以前的Blog圖標,又有Shop圖標,但這一次來自不同的圖標源。

前端WordPress菜單圖標結果

如何添加圖像附件和SVG附件

該插件還允許上傳SVG(矢量)和圖像文件。

這意味著您可以製作自己的圖像或矢量圖標並將其上傳,也可以從在線其他位置找到很酷的圖像圖標。

同樣,轉到外觀→菜單,然後單擊所選菜單項的「選擇」鏈接。

圖標選擇

SVG和圖像文件的不同之處在於,通常需要先將它們調整為理想大小,然後再上傳到WordPress; 否則,圖像可能太大或太小,從而影響了菜單設計。

要繼續,請上傳一個非常小的圖像(這取決於您的主題,但是50×50 px是一個很好的起點),突出顯示該圖像,然後單擊「選擇」。

添加圖片

您應該看到圖像圖標顯示在菜單的後端。

WordPress菜單圖標圖像

它會顯示在以前的圖標旁邊,但圖像會更加獨特。

前端上的圖像-WordPress菜單圖標

立即開始使用WordPress菜單圖標

當涉及到WordPress菜單圖標時,好處是很多的。

它們不僅使您的網站更加生動,而且為導航添加了額外的用戶友好元素。

幸運的是,通過ThemeIsle插件創建的Menu Icons(菜單圖標)可輕鬆實現圖標,圖像和SVG圖標,只需單擊幾下即可。

有關增強WordPress菜單的其他方法,請查看以下指南:

如果您對WordPress菜單圖標有疑問,請在評論中告訴我們。

原創文章,作者:WPJIAN,如若轉載,請註明出處:https://wpjian.com/zh-tw/tips/2021020341332.html