在WordPress Enfold主題新增Social Profiles Icon

進入左側選單,選擇外觀 –> 佈景主題編輯器

function.php最下面貼上:

因為我這次是要新增github的icon,這個icon在Enfold自己的icon列表中已經有了,只需要找到他的代號(\ue8eb

以下程式碼,把Github相關字眼換成你的icon名稱,然後ue8eb換成icon編碼。

// Register new icon as a theme icon
function avia_add_custom_icon($icons) {
  $icons['github'] = array( 'font' =>'entypo-fontello', 'icon' => 'ue8eb');
  $icons['line'] = array( 'font' =>'line', 'icon' => 'ue9ad'); // 如果你有一個以上的icon,就在這邊往下寫... 
  return $icons;
}
add_filter('avf_default_icons','avia_add_custom_icon', 10, 1);

// Add new icon as an option for social icons
function avia_add_custom_social_icon($icons) {
  $icons['Github'] = 'github';
  $icons['Line'] = 'line';  // 如果你有一個以上的icon,就在這邊往下寫... 
  return $icons;
}
add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);

1. 如果你有使用子佈景主題,建議直接放在子佈景child theme的funcion.php,不要改動原佈景主題

2. 如果你是自己import icon的話,font那邊要把entypo-fontello改成你上傳的名稱。

3. icon編碼可以在內頁的元件中找到,滑鼠停留在icon上會顯示出編碼。


接著你會發現把他加入header之後,hover顏色好像怪怪的,跟預設的不太一樣:

人家預設的 youtube hover就有顏色,我自己加的 github 跟 line 就沒有。

沒關係,可以在 css 的地方手動設定:

/*social github */
#top #wrap_all .av-social-link-github:hover a{
    color: #fff;
    background-color: #24292f;
}
/*social line */
#top #wrap_all .av-social-link-line:hover a{
    color: #fff;
    background-color: #00c100; /* 自己去找line的那個綠色色號*/
}

這樣看起來就完美拉~

| 軟體開發 | 網站建置 | 網頁系統 | 資料庫網站 |

| 客製化網站 (報名系統、投票系統、掛號系統...) |

| 前後端技術合作 |

歡迎與我們聯繫:jessica@penueling.com

加入Line立即聊聊:@539mjyid

0
0 回復

發表評論

Want to join the discussion?
Feel free to contribute!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。