更改WP後台選單Custom Post Type icon圖示？

替客戶製作 WordPress 網站的過程常常會需要新增不同的 Custom Post Type，但新增之後每一個前面的 icon 圖示都是一個圖釘。雖然只是外觀表現不影響功能。

但如果能換一些更適合該文章類型的圖示，增加客戶一眼的辨識率，也算是提升用戶的使用者體驗！更是展現我們身為 WordPress 工程師對於系統的掌握度！

WordPress 核心內建的 icon 庫查詢

首先我們先暸解一下官方 WordPress 核心內建了哪些 ICON 可以做選擇，請點擊以下網址：

WordPress Dashicons

以上 icon 都是已經藏在 WordPress 的程式之中，因此不需額外自己準備圖片，只需選定後直接更換是不是很方便！趕快來替網站換上漂亮 ICON 吧！

開始更改後台 Custom Post Type 的圖示 icon

更改的方式並不難，只需再你的 POST TYPE 程式碼中加入：

'menu_icon' => '該 icon 名稱'

取得 WordPress icon 程式名稱

名稱的部分請見剛剛貼的官方 ICON 列表，當你點擊某 ICON 的時候：

整段 Custom Post Type 程式碼示範

將此名稱輸入，整段 Custom Post Type 程式碼示範為：

register_post_type('product', // Register Custom Post Type
        array(
        'labels' => array(
            'name' => __('產品展示', 'Make9 Customized Theme'),
            'singular_name' => __('Product', 'Make9 Customized Theme'),
            'menu_name' => __('Product', 'Make9 Customized Theme'),
            'all_items' => __('所有產品', 'Make9 Customized Theme'),
            'add_new' => __('新增產品', 'Make9 Customized Theme'),
            'add_new_item' => __('Add New Product', 'Make9 Customized Theme'),
            'edit' => __('Edit', 'Make9 Customized Theme'),
            'edit_item' => __('Edit Product', 'Make9 Customized Theme'),
            'new_item' => __('New Product', 'Make9 Customized Theme'),
            'view' => __('View Product', 'Make9 Customized Theme'),
            'view_item' => __('View Product', 'Make9 Customized Theme'),
            'search_items' => __('Search Product', 'Make9 Customized Theme'),
            'not_found' => __('No Products found', 'Make9 Customized Theme'),
            'not_found_in_trash' => __('No Products found in Trash', 'Make9 Customized Theme')
        ),
        'public' => true,
        'hierarchical' => true,
        'has_archive' => true,
        'menu_icon' => 'dashicons-edit-large',
        'menu_position' => 7,
        'supports' => array(
            'title',
            'editor',
            'thumbnail'
        ), 
));

請注意menu_icon的設定（看 WP 有哪些內建 icon 可選），另外我還設定了menu_position來更動選單的順序位置，可參考下圖我完成設定後的模樣：

推薦 Custom Post Type 外掛：

以上是不透過外掛只用程式來設定 Custom Post Type。而如果你要用外掛來設定 Custom Post Type 的話，那將會更加的簡單，外掛內直接可以讓你設定、選擇 icon，這邊推薦使用Custom Post Type UI此款外掛來設定！

更改預設的 POST 文章 icon

以上教學適用在新增的 Custom Post Type，但是對於本來內建的「文章」圖釘如果也想修改呢？對於這個我沒找出可直接修改的方式，因此我透過 CSS 來做覆蓋的修改。

在 function.php 中，加入下列程式碼：

add_action( 'admin_head', 'custom_post_type_icon' );

function custom_post_type_icon() {
    ?>
    <style type="text/css" media="screen">
        .dashicons-admin-post.wp-menu-image:before{
            content: '\f327';
        }
    </style>
    <?php
}

至於 icon 的選擇，請更改程式碼中 content: '\f327'; 這個部分，一樣請參考官網 icon 圖庫，取得號碼來做更換。