Menu Social Icons – WordPress plugin 外掛推薦下載

點擊下載

菜單社交圖標

外掛Plugin描述

此外掛Plugin會更改任何WordPress菜單中的社交網站鏈接,以使用FontAwesome中的圖標。

無需進行任何配置,其他內容包含內置WordPress菜單中社交媒體配置文件的鏈接。在外觀>下添加指向這些社交網站中的任何一個的鏈接。菜單,然後啟用外掛Plugin。

支持的網站

  bitbucket.org dribbble.com dropbox.comfacebook.com flickr.com foursquare .comgithub.com gittip.com instagram.comlinkedin.com mailto :( email)pinterest.complus.google.com renren.com * slideshare.netstackoverflow.com * stackexchange.com trello.comtumblr.com twitter.com * vimeo.comvk。 com weibo.com xing.comyoutube.com *需要打開storm_social_icons_use_latest。 (參見下文。) 

更改圖標外觀

如果要以下面的選項不提供的方式編輯圖標的外觀,您可以使用自定義CSS執行更多操作以匹配您的主題。此視頻將介紹此過程:

選項:添加Vimeo和堆疊交換

要使用FontAwesome 4.0+,刪除對 IE7 的支持,但添加 vimeo.com stackexchange.com ,將其添加到主題的 functions.php 文件中:
add_filter(’storm_social_icons_use_latest’,’__ return_true’);

選項:顯示文本

顯示菜單項文本除了圖標之外,還要將其添加到主題的 functions.php 文件中:
add_filter(’storm_social_icons_hide_text’,’__ return_false’);

選項:替代圖標

要顯示替代圖標樣式,其中徽標已從徽標中刪除,請將其添加到主題的 functions.php file:
add_filter(’storm_social_icons_type’,create_function(“,’return”icon-sign“;’));

選項:圖標大小

要改變圖標大小,請將其添加到主題的 functions.php 文件中:(默認為2x)

 的add_filter('storm_social_icons_size',create_function('','返回“正常”;'));的add_filter('storm_social_icons_size',create_function('','返回“大”;'));的add_filter ('storm_social_icons_size',create_function('','返回“2X”;'));的add_filter('storm_social_icons_size',create_function('','返回“3×”;'));的add_filter('storm_social_icons_size',create_function(' ','返回“4x”;'));  

選項:添加更多圖標

FontAwesome 添加圖標以用於其他URL。例如,RSS提要:

 的add_filter('storm_social_icons_networks','storm_social_icons_networks');函數storm_social_icons_networks($網絡){$ extra_icons =陣列('/進料'=>陣列(//為包含此文字'name'=>'RSS'的任何網址啟用此圖標,//默認菜單項標籤'class'=>'rss',//自定義類'icon'=>'icon-rss' ,// FontAwesome類'icon-sign'=>'icon-rss-sign'//可能無法使用。檢查FontAwesome。),); $ extra_icons = array_merge($ networks,$ extra_icons);換貨政...$ extra_icons;}  

選項:更改HTML輸出

這對於使用帶有自定義圖標集的外掛Plugin的開發人員非常有用。

編輯圖標HTML輸出:

  add_filter('storm_social_icons_icon_html','storm_social_icons_icon_html',10,4);函數storm_social_icons_icon_html($ html,$ size,$ icon,$ show_text) {$ html =“< i class ='$ size $ icon $ show_text'>< / i>”; return $ html;}  

編輯標題HTML輸出:

  add_filter('storm_social_icons_title_html','storm_social_icons_title_html',10,2);函數storm_social_icons_title_html($ html,$標題){$ html =“< span class ='fa-hidden'> $ title< / span>”; return $ html;}  

編輯所有鏈接屬性(WordPress核心過濾器):

  add_filter('wp_nav_menu_objects','storm_wp_nav_menu_objects',7,2);函數storm_wp_nav_menu_objects ($ sorted_menu_items,$ args){foreach($ sorted_menu_items as& $ item){if(0!= $ item-> menu_item_parent){//跳過子菜單項繼續; } //僅對包含此文本的鏈接應用更改。 $ search_url ='facebook.com'; if(false!== strpos($ item-> url,$ search_url)){//添加自定義類$ item-> classes [] ='some-custom-class'; //在鏈接$ item-> title ='< strong> custom html< / strong>'中添加自定義HTML 。 $本期特價貨品>標題;返回$ sorted_menu_items;}  

屏幕截圖

WordPress菜單編輯器中的圖標和快捷方式。
菜單未激活外掛Plugin。
菜單,默認設置。
替代“圖標 – 符號”顯示。
禁用隱藏文字。
“正常”圖標大小
“4x”圖標大小

安裝

WordPress管理員>下搜索“菜單社交圖標”。外掛Plugin>添加新激活外掛Plugin。

FAQ

安裝說明在 WordPress管理員>下搜索“菜單社交圖標”。外掛Plugin>添加新激活外掛Plugin。可以添加X圖標嗎?

菜單社交圖標取決於 FontAwesome圖標庫。如果FontAwesome中存在圖標,您可以使用外掛Plugin描述中顯示的 storm_social_icons_networks 示例為其添加過濾器。

如果FontAwesome中不存在圖標,您可以請求查看FontAwesome的請求新圖標的說明。

如何更改圖標的對齊方式,位置,顏色,大小等。

有關編輯外觀的教程視頻和外掛Plugin說明中各種選項的代碼示例。

此外掛Plugin是否安裝了所有FontAwesome?

是的。該外掛Plugin安裝完整的FontAwesome包。您可以使用HTML中的任何圖標。

我在外掛Plugin中的任何地方都看不到FontAwesome!

我們使用NetDNA的 Bootstrap CDN 服務將FontAwesome加載到您的站點上。這使得它為用戶加載的速度更快。

評論

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *