Đã bao giờ bạn tự hỏi làm thế nào để thêm các custom icon cho custom post type của bạn trong WordPress? Nếu đã từng như vậy thì bạn đang ở đúng nơi bạn cần đến. Trong bài viết này, chúng tôi sẽ giúp bạn biết làm thế nào để thêm các icon cho các custom post type trong WordPress.

WordPress bắt đầu sử dụng một font icon được gọi là Dashicons kể từ phiên bản WordPress 3.8. Những font icon trông tuyệt vời trên bất kỳ thiết bị hoặc kích thước màn hình nào. Vâng, bạn có thể tận dụng các biểu tượng này để gán các custom icon cho custom post type của bạn.

Thêm các icon cho Custom Post Type bằng việc sử dụng plugin

Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin CPT Custom Icon. Sau khi kích hoạt, chỉ cần vào Settings »CPT Custom Icon Settings, nơi bạn sẽ thấy nhiều custom post type của bạn được liệt kê. Tiếp theo, nhấn vào nút ‘Choose icon’ bên cạnh custom post type và sau đó chọn một font từ menu.

Thêm các icon bằng việc sử dụng Plugin Custom Post Type UI

Nếu bạn là một người mới đăng ký một custom post type thì chúng tôi khuyên bạn nên sử dụng plugin Custom Post Type UI để tạo lập và quản lý các custom post type và các taxonomies.

Thêm biểu tượng vào custom post type được tạo lập bằng plugin CPT UI là một điều rất đơn giản. theo mặc định nó hỗ trợ Dashicons, vì vậy đầu tiên là bạn cần truy cập vào trang web Dashicons và chọn icon mà bạn muốn sử dụng cho post type của bạn.

Kích chuột vào một icon trong danh sách nó sẽ hiển thị một phiên bản lớn hơn của các icon ở phía trên cùng. Bên cạnh đó, bạn sẽ thấy icon’s CSS class. Nó sẽ giống như dashicons – groups, dashicons –calendar, dashicons-cart. Bạn cần phải sao chép CSS class và chỉnh sửa custom post type bạn muốn chỉnh sửa trong CPT UI. Tất cả bạn cần làm là nhấn vào link Advanced Options và di chuyển xuống phần Menu Icon, sau đó dán CSS class và lưu các thay đổi của bạn.

Bạn cũng có thể tự tay tạo ra một icon hình ảnh và tải nó lên bằng cách nhấn Media »Add New. Sau khi tải lên, kích chuột vào link Edit và sao chép URL của tập tin hình ảnh. Bây giờ chỉ cần dán URL này vào các khu menu icon trong CPT UI settings.

Thêm Icon cho custom post type bằng cách thủ công

Nếu bạn đã tạo ra một custom post type bằng cách đặt một code vào trong plugin site- specific hoặc đặt vào file functions.php của bạn thì bạn có thể thêm các icon thủ công. Một lần nữa chỉ cần truy cập vào trang web Dashicons để chọn một biểu tượng và sao chép CSS class. Sau đó thêm nó vào code custom post type của bạn như sau:

 'menu_icon'           => 'dashicons-cart', 

Bạn cũng có thể thêm URL đầy đủ của một tập tin hình ảnh mà bạn muốn hiển thị như là một biểu tượng, như sau:

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

Dưới đây là một đoạn mã đầy đủ có thể tạo ra một custom post type được gọi là những sản phẩm với một icon 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 );

Chúng tôi hy vọng bài viết này giúp bạn thêm các icon cho csc custom post type của bạn trong WordPress. Bạn nghĩ sao về phương pháp này? Bạn có phương án nào tốt hơn nữa không? Chúng tôi rất mong chờ ý kiến của bạn về vấn đề này. Hãy để lại bình luận ở phía cuối bài viết để chia sẻ ý nghĩ của bạn. Bạn cũng có thể muốn xem làm thế nào để thêm link nofollow trong menu wordpress.