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

WordPress 後台Custom Post Type icon 更換

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

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

 

WordPress 核心內建的 icon 庫查詢

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

WordPress Dashicons

 

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

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

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

 

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

'menu_icon' => '該 icon 名稱'

取得 WordPress icon 程式名稱

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

 

WP後台選單 官方核心內建 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來更動選單的順序位置,可參考下圖我完成設定後的模樣:

更改WP後台選單Custom Post Type icon圖示以及順位
不只換了 icon,也換了選單的排列順序

推薦 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 圖庫,取得號碼來做更換。

 

WordPress 後台 icon 更換
請取得 WP 官分 icon 灰色這行字的程式碼,來做更改

 

在這裡,你不會被廣告打擾,所有的學習內容都是免費的。
如果這讓你感到滿意,一杯咖啡能讓我們走得更遠。

請 Perry 喝杯咖啡
上一篇WordPress 高顏值免費 BLOG 主題 Ashe & Pro 下一篇WordPress 顯示文章最後更新時間?不安裝外掛實現

Divi 編輯器特賣 onSale!

Divi Summer Sale 20% 折扣!時間有限!

90秒強大功能展示:傳送門

優惠傳送門:傳送門

Divi 中文化:傳送門

完整教學:傳送門

Divi 特賣 onSale!