Làm thế nào để Thêm Icons cho Custom Post Types trong WordPress

Bao giờ tự hỏi làm thế nào bạn có thể thêm các biểu tượng tùy chỉnh cho các loại bài đăng tuỳ chỉnh của bạn trong WordPress? Nếu vậy, thì bạn đang ở đúng nơi. Trong bài này, chúng tôi sẽ chỉ cho bạn cách thêm các biểu tượng cho các loại bài đăng tùy chỉnh trong WordPress.

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

Thêm biểu tượng loại bài đăng tùy chỉnh bằ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. Khi kích hoạt, chỉ cần đi đến Cài đặt »Cài đặt Biểu tượng CPT Tùy chỉnh nơi bạn sẽ thấy các loại bài đăng tùy chỉnh được liệt kê. Tiếp theo, nhấp vào nút ‘Chọn biểu tượng’ bên cạnh một loại bài đăng tùy chỉnh và sau đó chọn một phông chữ từ trình đơn.

Chọn phông chữ cho loại bài đăng tùy chỉnh của bạn bằng cách sử dụng plugin

Thêm các biểu tượng bằng cách sử dụng Plugin Giao diện Người dùng Tuỳ chỉnh

Nếu bạn là người mới đăng ký một loại bài đăng tùy chỉnh, chúng tôi khuyên bạn nên sử dụng plugin Giao diện Người dùng Tuỳ chỉnh để tạo và quản lý các loại đăng tuỳ chỉnh và phân loại.

Thêm biểu tượng vào một loại bài đăng tùy chỉnh được tạo bằng plugin CPT UI rất đơn giản. Nó hỗ trợ Dashicons theo mặc định, vì vậy đầu 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 bạn.

Sao chép một lớp biểu tượng từ trang web Dashicons

Nhấp vào biểu tượng trong danh sách sẽ hiển thị một biểu tượng lớn hơn của biểu tượng ở trên cùng. Bên cạnh đó, bạn sẽ thấy lớp CSS của biểu tượng. Nó sẽ giống như các nhóm dashicons, dashicons-calendar, dashicons-cart, vv Bạn cần sao chép lớp CSS và chỉnh sửa kiểu đăng bài tùy chỉnh bạn muốn chỉnh sửa trong giao diện CPT. Tất cả bạn cần làm là nhấp vào Tùy chọn Nâng cao liên kết và cuộn xuống phần Menu Icon, sau đó dán lớp CSS và lưu các thay đổi của bạn.

Thêm biểu tượng phông chữ trong plugin UI đăng bài tùy chỉnh

Bạn cũng có thể tự tạo một biểu tượng hình ảnh và tải lên bằng cách nhấp vào Phương tiện truyền thông »Thêm Mới . Sau khi tải lên, hãy nhấp vào liên kết Chỉnh sửa và sao chép URL tệp hình ảnh. Bây giờ, chỉ cần dán URL này vào trường biểu tượng trình đơn trong cài đặt Giao diện CPT.

Thêm biểu tượng bằng tay vào một loại 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 plugin cụ thể trang web hoặc tệp functions.php, thì bạn có thể thêm 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 vào trang web Dashicons để chọn một biểu tượng và sao chép lớp CSS. Sau khi thêm nó vào mã đăng bài tùy chỉnh của bạn như sau:

'menu_icon' => 'dashicons-cart', 

Bạn cũng có thể thêm URL đầy đủ của tệp hình ảnh bạn muốn hiển thị dưới dạng 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 đủ tạo ra một loại bài đăng tùy chỉnh được gọi là các sản phẩm có biểu tượng trình đơn:

/ / Đăng ký loại bài đăng tùy chỉnh
 chức năng custom_post_type () {

 $ nhãn = mảng (
 'tên' => _x ('sản phẩm', 'Post Type General Name', 'text_domain'),
 'singular_name' => _x ('Product', 'Post Type Singular Name', 'text_domain'),
 'menu_name' => __ ('Sản phẩm', 'text_domain'),
 'parent_item_colon' => __ ('Parent Item:', 'text_domain'),
 'all_items' => __ ('Tất cả các mục', 'text_domain'),
 'view_item' => __ ('View Item', 'text_domain'),
 'add_new_item' => __ ('Thêm mục mới', 'text_domain'),
 'add_new' => __ ('Thêm mới', 'text_domain'),
 'edit_item' => __ ('Chỉnh sửa mục', 'text_domain'),
 'update_item' => __ ('Cập nhật mục', 'text_domain'),
 'search_items' => __ ('Tìm kiếm mục', 'text_domain'),
 'not_found' => __ ('Không tìm thấy', 'text_domain'),
 'not_found_in_trash' => __ ('Không tìm thấy trong Thùng rác', 'text_domain'),
 );
 $ args = mảng (
 'nhãn' => __ ('Sản phẩm', 'text_domain'),
 'description' => __ ('Post Type Description', 'text_domain'),
 'labels' => $ nhãn,
 'hỗ trợ' => mảng (),
 'taxonomies' => mảng ('category', 'post_tag'),
 'hierarchical' => sai,
 'công khai' => đúng,
 'show_ui' => đúng,
 'show_in_menu' => đúng,
 'show_in_nav_menus' => đúng,
 'show_in_admin_bar' => đúng,
 'menu_position' => 5,
 'menu_icon' => 'dashicons-cart',
 'can_export' => đúng,
 'has_archive' => đúng,
 'exclude_from_search' => sai,
 'publicly_queryable' => đúng,
 'capability_type' => 'trang',
 );
 register_post_type ('Sản phẩm', $ args);

 }

 // Hook vào hành động 'init'
 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 biểu tượng cho các loại bài đăng tùy chỉnh của bạn trong WordPress. Bạn cũng có thể muốn kiểm tra cách sử dụng phông chữ biểu trưng trong trình soạn thảo bài viết WordPress.