Thêm icon cho custom post type

Khi bạn thêm một custom post type, mặc định WordPress sẽ thêm icon pinner cho post và icon page cho trang. Bài này tôi sẽ hướng dẫn thêm icon cho custom post type vào website của các bạn.
Từ bản 3.8, WordPress đã sử dụng font icon có tên là Dashicons, font icon này phù hợp trên tất cả các thiết bị. Bạn có thể sử dụng chúng để thêm icon vào custom post type. Còn nếu bạn muốn đơn giản hơn thì có cách sử dụng plugin ở phía dưới nhé, nhưng tôi sẽ không khuyến khích làm vậy nếu bạn là một coder hoặc là một người đang học làm web trừ khi bạn không thể chỉnh sửa vào code. Để tối ưu cho website thì thêm một dòng code tốt hơn nhiều so với việc cài một plugin mà ta không quản lý được trong đó có gì.

1. Thêm icon custom post type bằng cách thủ công

Nếu bạn đã tạo ra custom post type bằng cách đăng ký trong functions.php hoặc cài plugin, bạn có thể thêm icon bằng cách sau.
Truy cập và trang Dashicons để chọn icon thích hợp và copy CSS class của icon đó.

Sau khi chọn xong bạn sẽ thêm dòng code sau vào Custom post type mà bạn đã đặng ký.

'menu_icon'           => 'dashicons-images-alt2',

Bạn cũng có thể thay class bằng đường dẫn ảnh đã upload lên host

'menu_icon'           => 'http://hamrongmedia.com/.../ten-icon.png',

Toàn bộ code sau khi thêm sẽ giống như sau:

// Register Custom Post Type
function hrm_post_travel() {

    $labels = array(
        'name'                => _x( 'Travels', 'Post Type General Name', 'hrm' ),
        'singular_name'       => _x( 'Travel', 'Post Type Singular Name', 'hrm' ),
        'menu_name'           => __( 'Travel', 'hrm' ),
        'parent_item_colon'   => __( 'Parent Item:', 'hrm' ),
        'all_items'           => __( 'All Items', 'hrm' ),
        'view_item'           => __( 'View Item', 'hrm' ),
        'add_new_item'        => __( 'Add New Item', 'hrm' ),
        'add_new'             => __( 'Add New', 'hrm' ),
        'edit_item'           => __( 'Edit Item', 'hrm' ),
        'update_item'         => __( 'Update Item', 'hrm' ),
        'search_items'        => __( 'Search Item', 'hrm' ),
        'not_found'           => __( 'Not found', 'hrm' ),
        'not_found_in_trash'  => __( 'Not found in Trash', 'hrm' ),
    );
    $rewrite = array(
        'slug'                => 'travel',
        'with_front'          => true,
        'pages'               => true,
        'feeds'               => true,
    );
    $args = array(
        'label'               => __( 'travel', 'hrm' ),
        'description'         => __( 'The travels', 'hrm' ),
        'labels'              => $labels,
        'supports'            => array( 'title', 'editor', 'excerpt', 'author', 'thumbnail', 'comments', 'revisions', 'custom-fields', 'page-attributes', 'post-formats', ),
        'taxonomies'          => array( 'category', 'post_tag' ),
        'menu_icon'           => 'dashicons-images-alt2',
        'hierarchical'        => false,
        'public'              => true,
        'show_ui'             => true,
        'show_in_menu'        => true,
        'show_in_nav_menus'   => true,
        'show_in_admin_bar'   => true,
        'menu_position'       => 5,
        'can_export'          => true,
        'has_archive'         => true,
        'exclude_from_search' => true,
        'publicly_queryable'  => true,
        'rewrite'             => $rewrite,
        'capability_type'     => 'post',
    );
    register_post_type( 'travel', $args );

}

// Hook into the 'init' action
add_action( 'init', 'hrm_post_travel', 0 );

Và đây là thành quả:

2. Thêm icon bằng plugin

Để đơn giản hoá hơn trong việc này ta có thể cài plugin, trước hết, bạn phải cài và kích hoạt plugin CPT Custom Icon.

Tại mục Setting / CPT Custom Icon Settings sẽ liệt kê danh sách các custom post type mà bạn đã tạo ra hoặc cài đặt vào website. Bạn chỉ việc click và Choose Icon và chọn icon mà bạn muốn rồi lưu lại. Thế là xong rồi đấy.

3. Tạo và quản lý Custom post type bằng plugin Custom Post Type UI

Với những Custom Post Type được tạo trước khi cài đặt plugin này bạn không thể tác động gì thêm từ plugin này được, nhưng nếu bạn muốn tạo mới và có thể thể chỉnh sửa về sau thì đây là lựa chọn không tồi.

Mục 1 là các Custom Post Type tạo ra từ plugin Custom Post Type UI.
Mục 2 là các Custom Post Type khác mà KHÔNG PHẢI Custom Post Type UI tạo ra

Tại mục CPT UI / Add New bạn sẽ nhập các thông tin để tạo mới một CPT, hãy click vào Advanced Options.
Trong ô Menu Icon bạn sẽ nhập class CSS của icons từ trang Dashicons hoặc đường dẫn ảnh giống mục 1.

Sau khi tuỳ chọn xong, hãy click vào Create Custom Post Type .Thế là xong rồi đấy

Hi vọng bài viết này giúp ich được cho bạn. Chúc bạn có những icon đẹp và hợp ý bạn.