Thêm icon cho menu Post tùy chỉnh WordPress

WordPress bắt đầu sử dụng một phông chữ biểu tượng có tên Dashicons kể từ WordPress 3.8. Các biểu tượng phông chữ này trông khá bắt mắt trên mọi thiết bị. Bạn có thể tận dụng các biểu tượng này để gán các biểu tượng cho các loại bài đăng tùy chỉnh của mình.

Thêm biểu tượng cho dữ liệu tùy chỉnh bằng plugin

Đầu tiên bạn cần cài đặt và kích hoạt plugin CPT Custom Icon. Sau khi kích hoạt, truy cập Settings » CPT Custom Icon Settings nơi bạn sẽ thấy các loại bài đăng tùy chỉnh của mình được liệt kê. Tiếp theo, nhấp vào nút ‘Choose icon’ bên cạnh loại bài đăng tùy chỉnh và sau đó chọn một phông chữ từ menu.

Thêm biểu tượng icon bằng plugin Custom Post Type UI

Nếu bạn mới đăng ký một loại bài đăng tùy chỉnh, thì chúng tôi khuyên bạn nên sử dụng Custom Post Type UI để tạo và quản lý các loại bài đăng và danh mục.

Thêm một biểu tượng vào loại bài đăng tùy chỉnh được tạo bằng plugin này rất đơn giản. Mặc định nó hỗ trợ Dashicons, vì vậy trước tiên bạn cần truy cập trang web Dashicons và chọn biểu tượng bạn muốn sử dụng cho loại bài đăng của mình.

Nhấp vào biểu tượng trong danh sách sẽ hiển thị phiên bản lớn hơn của biểu tượng ở trên cùng. Bên cạnh nó, bạn sẽ thấy class CSS. VD như dashicons-calendar, dashicons-cart, v.v. Bạn cần sao chép class CSS và chỉnh sửa loại bài đăng mà bạn muốn chỉnh sửa trong CPT UI. Tất cả những gì bạn cần làm là nhấp vào liên kết Advanced Options và cuộn xuống phần Menu Icon, sau đó dán class CSS và lưu lại.

Bạn cũng có thể tự tạo một biểu tượng hình ảnh và tải nó lên bằng cách nhấp vào Media » Add New. Sau khi tải lên, nhấp vào liên kết Edit và sao chép URL của tệp hình ảnh. Bây giờ chỉ cần dán URL này vào trường biểu tượng menu trong cài đặt plugin.

Thêm thủ công icon cho bài đăng tùy chỉnh

Nếu bạn đã tạo một loại bài đăng tùy chỉnh bằng cách đặt mã trong tệp plugin hoặc tệp functions.php, thì bạn có thể thêm các biểu tượng trình đơn theo cách thủ công. Một lần nữa chỉ cần truy cập trang web Dashicons và chọn một biểu tượng , sao chép CSS class. Sau đó thêm vào mã tạo loại bài đăng tùy chỉnh của bạn như thế này:

'menu_icon' => 'dashicons-cart',

Bạn cũng có thể thêm URL đến tệp hình ảnh bạn muốn hiển thị dưới dạng biểu tượng, như thế này:

'menu_icon' => 'http://www.example.com/wp-content/uploads/2014/11/your-cpt-icon.png',

Dưới đây là đoạn mã đầy đủ tạo ra một loại bài đăng tùy chỉnh (sản phẩm) có biểu tượng trên menu:

// Register Custom Post Type
function custom_post_type() {
 
    $labels = array(
        'name'                => _x( 'products', 'Post Type General Name', 'text_domain' ),
        'singular_name'       => _x( 'Product', 'Post Type Singular Name', 'text_domain' ),
        'menu_name'           => __( 'Products', 'text_domain' ),
        'parent_item_colon'   => __( 'Parent Item:', 'text_domain' ),
        'all_items'           => __( 'All Items', 'text_domain' ),
        'view_item'           => __( 'View Item', 'text_domain' ),
        'add_new_item'        => __( 'Add New Item', 'text_domain' ),
        'add_new'             => __( 'Add New', 'text_domain' ),
        'edit_item'           => __( 'Edit Item', 'text_domain' ),
        'update_item'         => __( 'Update Item', 'text_domain' ),
        'search_items'        => __( 'Search Item', 'text_domain' ),
        'not_found'           => __( 'Not found', 'text_domain' ),
        'not_found_in_trash'  => __( 'Not found in Trash', 'text_domain' ),
    );
    $args = array(
        'label'               => __( 'Products', 'text_domain' ),
        'description'         => __( 'Post Type Description', 'text_domain' ),
        'labels'              => $labels,
        'supports'            => array( ),
        'taxonomies'          => array( 'category', 'post_tag' ),
        'hierarchical'        => false,
        'public'              => true,
        'show_ui'             => true,
        'show_in_menu'        => true,
        'show_in_nav_menus'   => true,
        'show_in_admin_bar'   => true,
        'menu_position'       => 5,
        'menu_icon'           => 'dashicons-cart',
        'can_export'          => true,
        'has_archive'         => true,
        'exclude_from_search' => false,
        'publicly_queryable'  => true,
        'capability_type'     => 'page',
    );
    register_post_type( 'Products', $args );
 
}
 
// Hook into the 'init' action
add_action( 'init', 'custom_post_type', 0 );

Hy vọng với bài hướng dẫn cách thêm biểu tượng menu cho bài đăng tùy chỉnh trong WordPress sẽ giúp bạn dễ dàng tạo icon mới cho mọi kiểu dữ liệu trong WordPress.

Nếu bạn thấy bài viết này hữu ích, hãy chia sẻ với bạn bè bằng cách nhấn nút chia sẻ ở bên dưới. Theo dõi chúng tôi trên Twitter và Facebook