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

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài 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 mang tên Dashicons tính từ lúc WordPress 3.8. Các biểu tượng phông chữ này trông khá bắt mắt trên tất cả thiết bị. Bạn cũng có thể có thể tận dụng các biểu tượng này để gán các tượng trư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 phải 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 tượng trư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 dòng 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 phải 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 trưng trong bản kê sẽ hiển thị phiên bản lớn hơn của tượng trưng phía 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ể có thể tự tạo một biểu tượng hình ảnh và tải nó lên bằng phương pháp 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 trư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 trưng , sao chép CSS class. Sau đó thêm nữa 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ể 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 nên một loại bài đăng tùy chỉnh (sản phẩm) có biểu trư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 đơn giản tạo icon mới cho mọi kiểu dữ liệu trong WordPress.

Nếu bạn thích bài viết này, hãy ủng hộ chúng tôi bằng phương pháp đăng ký nhận bài viết mới ở bên dưới và đừng quên chia sẻ kiến thức này với bạn bè của bạn nhé. Bạn cũng cũng đều có thể theo dấu blog này trên Twitter và Facebook

Bài viết Thêm icon cho menu Post tùy chỉnh WordPress được tổng hợp và biên tập bởi: dinhthuanit.com. Mọi ý kiến đóng góp và phản hồi vui lòng gửi Liên Hệ cho dinhthuanit.com để điều chỉnh. dinhthuanit.com xin cảm ơn.

Bài Viết Liên Quan


Bài Viết Khác


Quảng cáo
Ads_ngang