WordPress分類目錄前添加圖標(biāo)的實(shí)現(xiàn)方法

來自：素雅營銷研究院

方知筆記

2025年05月29日 00:59

在WordPress網(wǎng)站中，為分類目錄添加圖標(biāo)可以顯著提升視覺效果和用戶體驗(yàn)。本文將介紹幾種簡單有效的方法，幫助您在分類名稱前添加個(gè)性化圖標(biāo)。

方法一：使用Font Awesome圖標(biāo)庫

安裝Font Awesome插件：在WordPress后臺(tái)搜索并安裝”Font Awesome”插件
獲取圖標(biāo)代碼：訪問Font Awesome官網(wǎng)(https://fontawesome.com/)選擇心儀圖標(biāo)
修改分類標(biāo)題：在分類編輯頁面，將圖標(biāo)代碼添加到分類名稱前，例如：

<i class="fas fa-camera"></i> 攝影作品

方法二：通過CSS添加背景圖標(biāo)

為分類添加特定class：使用”Term Metadata”等插件為分類添加自定義字段
編輯主題CSS文件：在主題的style.css中添加類似代碼：

.cat-music:before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background-image: url('music-icon.png');
background-size: contain;
margin-right: 5px;
}

方法三：使用分類圖標(biāo)插件

推薦幾款專門用于此功能的插件：

Category Icons：簡單易用，支持Font Awesome
Taxonomy Images：可為分類添加圖片而非圖標(biāo)
WP Term Icons：功能全面，支持多種圖標(biāo)類型

高級(jí)技巧：根據(jù)分類ID動(dòng)態(tài)添加圖標(biāo)

在主題的functions.php文件中添加以下代碼，實(shí)現(xiàn)更靈活的圖標(biāo)管理：

add_filter('list_cats', 'add_icon_to_category', 10, 2);
function add_icon_to_category($name, $category) {
$icons = array(
'1' => '<i class="fas fa-music"></i>', // 音樂分類ID為1
'2' => '<i class="fas fa-film"></i>',  // 電影分類ID為2
// 添加更多分類對(duì)應(yīng)圖標(biāo)
);
return isset($icons[$category->term_id]) ? $icons[$category->term_id].$name : $name;
}