按ThemeIsle的菜單圖標
外掛Plugin描述
此外掛Plugin使您能夠向菜單項添加圖標,類似於外觀最新的儀表板菜單。
用法
外掛Plugin激活後,轉到外觀> 菜單編輯菜單啟用/禁用“菜單圖標設置”元框中的圖標類型設置當前導航菜單的默認設置;這些設置將由新添加的菜單項繼承選擇圖標,單擊“選擇圖標”鏈接保存菜單
支持的圖標類型
Dashicons(WordPress核心圖標)難以捉摸的圖標 Aristeides Stathopoulos Font Awesome by Dave Gandy 基金會圖標 by Zurb Genericons by Automattic Fontello 圖標包 TI圖標圖標包 ThemeIsle 圖像(附件)SVG(附件)
計劃支持的圖標類型
圖像( URL)
擴展
兼容的主題
菜單圖標適用於大多數主題,特別是流行的像Twenty Seventeen或 Hestia 。
此外掛Plugin的開發在 GitHub 上完成。 歡迎拉請求。在進入外掛Plugin論壇之前,請參閱報告的問題。
如果您喜歡這個外掛Plugin,請考慮查看我們的其他項目:
CodeinWP Blog – WordPress的設計指南
Revive.Social – 社交媒體工具
JustFreeThemes – 免費WordPress主題目錄
屏幕截圖








安裝
將菜單圖標
上傳到 / wp-content / plugins /
directory通過WordPres中的外掛Plugin菜單激活外掛Plugins
常見問題
圖標未顯示!
確保您的活動主題使用默認步行器顯示導航菜單。如果它使用自己的自定義助行器,請確保菜單項標題是可過濾的(請諮詢您的主題作者)。
圖標位置看起來不正確
如果您對編輯主題樣式表感到滿意,那麼您可以從那裡覆蓋樣式。
如果安裝了 Jetpack ,還可以使用自定義CSS 模塊。
否則,我建議您使用高級CSS外掛Plugin。
某些字體圖標無法正確呈現
這是字體圖標本身的錯誤。更新字體後,此外掛Plugin也會更新其字體。
如何使用CDN的css文件?
您可以使用 icon_picker_icon_type_stylesheet_uri
過濾器,例如:
/ ** *從CDN * * @param字符串加載Font Awesome的CSS $ stylesheet_uri圖標類型的樣式表URI。 * @param string $ icon_type_id圖標類型的ID。 * @param Icon_Picker_Type_Font $ icon_type圖標類型的實例。 * * @return string * / function myprefix_font_awesome_css_from_cdn($ stylesheet_uri,$ icon_type_id,$ icon_type){if('fa'=== $ icon_type_id){$ stylesheet_uri = sprintf('https://maxcdn.bootstrapcdn.com/font- awesome /%s / css / font-awesome.min.css',$ icon_type-> version); } return $ stylesheet_uri;} add_filter('icon_picker_icon_type_stylesheet_uri','myprefix_font_awesome_css_from_cdn',10,3);
這個外掛Plugin是否可以擴展?
當然可以! 以下是如何從外掛Plugin/主題中刪除圖標類型:
/ ** *刪除一個或多個圖標類型* *取消註釋一行或多行以刪除圖標類型* * @ param數組$ types註冊的圖標類型。 * @return array * / function my_remove_menu_icons_type($ types){// Dashicons // unset($ types ['dashicons']); //難以捉摸//未設置($ types ['elusive']); // Font Awesome // unset($ types ['fa']); //基礎//未設置($ types ['foundation-icons']); // Genericons // unset($ types ['genericon']); //圖片//未設置($ types ['image']); return $ types;} add_filter('menu_icons_types','my_remove_menu_icons_type');
要添加新圖標類型,請查看此外掛Plugin的 includes / library / icon-picker / includes / types
目錄中的文件。
我不想要設置元框。如何刪除/禁用它?
將此代碼塊添加到 mu-plugin文件:
add_filter('menu_icons_disable_settings','__ return_true');
如何更改CSS類用於隱藏菜單項標籤?
將此代碼塊添加到 mu-plugin文件:
/ ** *覆蓋隱藏標籤類* * @param string $ class隱藏標籤類。 * @return string * / function my_menu_icons_hidden_label_class($ class){$ class ='hidden'; return $ class;} add_filter('menu_icons_hidden_label_class','my_menu_icons_hidden_label_class');
如何修改菜單項的標記?
將此代碼塊添加到 mu-plugin文件:
/ ** *覆蓋菜單項標記* * @param string $ markup菜單項標題標記。 * @param integer $ id菜單項ID。 * @param array $ meta菜單項元值。 * @param string $ title菜單項標題。 * * @return string * / function my_menu_icons_override_markup($ markup,$ id,$ meta,$ title){//做你的事。 return $ markup;} add_filter('menu_icons_item_title','my_menu_icons_override_markup',10,4);
可以添加X圖標字體嗎?
通過 GitHub發布告訴我,我會看到我能做些什麼。
如何禁用某個菜單的菜單圖標?
將此代碼塊添加到 mu-plugin文件:
/ ** *禁用菜單的菜單圖標* * @param array $ menu_settings菜單設置。 * @param int $ menu_id菜單ID。 * * @return array * / function my_menu_icons_menu_settings($ menu_settings,$ menu_id){if(13 === $ menu_id){$ menu_settings ['disabled'] = true; } return $ menu_settings;} add_filter('menu_icons_menu_settings','my_menu_icons_menu_settings',10,2);
如何從Fontello添加圖標包?在 wp-content
中創建一個名為 fontpacks
的新目錄。抓取包裝的拉鍊,提取並上傳它到新創建的目錄。啟用圖標類型設置元框。我無法從*圖像大小*下拉列表
讀取此博客文章中選擇自定義圖像大小。