Thêm icons cho custom post types WordPress

3 giờ ago, Hướng dẫn WordPress, Views

Thêm Icons cho Custom Post Types WordPress: Hướng dẫn chi tiết

Custom Post Types (CPTs) là một tính năng mạnh mẽ của WordPress cho phép bạn tạo ra các loại nội dung khác nhau ngoài các bài viết (posts) và trang (pages) mặc định. Ví dụ, bạn có thể tạo CPT cho sản phẩm, dịch vụ, dự án, sự kiện, hoặc bất kỳ loại nội dung nào khác phù hợp với nhu cầu của website của bạn. Khi bạn tạo một CPT, WordPress sẽ tự động gán cho nó một icon mặc định. Tuy nhiên, icon này thường không phù hợp với loại nội dung mà CPT đại diện. May mắn thay, WordPress cho phép bạn dễ dàng thay đổi icon này để tạo ra một trải nghiệm quản trị tốt hơn và dễ nhận biết hơn.

Bài viết này sẽ hướng dẫn bạn từng bước cách thêm icons cho Custom Post Types WordPress, giúp bạn tạo ra một giao diện quản trị trực quan và chuyên nghiệp.

Tại sao nên tùy chỉnh Icons cho Custom Post Types?

Việc tùy chỉnh icons cho Custom Post Types mang lại nhiều lợi ích:

Dễ nhận biết: Icons giúp bạn dễ dàng phân biệt giữa các loại nội dung khác nhau trong khu vực quản trị WordPress.
Trải nghiệm người dùng tốt hơn: Giao diện trực quan hơn giúp người dùng dễ dàng tìm kiếm và quản lý nội dung.
Tính chuyên nghiệp: Một giao diện được thiết kế tốt thể hiện sự chuyên nghiệp và tăng độ tin cậy cho website của bạn.

Các phương pháp thêm Icons cho Custom Post Types

Có nhiều phương pháp để thêm icons cho Custom Post Types, bao gồm:

Sử dụng Dashicons tích hợp: Dashicons là một thư viện icons được tích hợp sẵn trong WordPress. Bạn có thể sử dụng chúng để gán cho CPT của bạn.
Sử dụng Font Awesome: Font Awesome là một thư viện icons phổ biến với nhiều lựa chọn hơn Dashicons. Bạn cần tích hợp Font Awesome vào theme của bạn trước khi sử dụng.
Sử dụng ảnh SVG tùy chỉnh: Nếu bạn muốn một icon độc đáo, bạn có thể tạo một ảnh SVG tùy chỉnh và sử dụng nó cho CPT của bạn.

Thêm Icons sử dụng Dashicons

Dashicons là cách đơn giản nhất để thêm icons cho CPT. Bạn có thể tìm thấy danh sách đầy đủ các Dashicons tại trang chủ WordPress Dashicons.

Xác định Dashicon bạn muốn sử dụng: Duyệt qua danh sách Dashicons và chọn icon phù hợp nhất với CPT của bạn. Ghi lại tên của icon (ví dụ: `dashicons-products`).
Chỉnh sửa code đăng ký CPT: Mở file chứa code đăng ký CPT của bạn (thường là `functions.php` trong theme của bạn hoặc một plugin tùy chỉnh).
Thêm tham số ‘menu_icon’: Tìm hàm `register_post_type()` và thêm tham số `’menu_icon’` với giá trị là tên của Dashicon bạn đã chọn. Ví dụ:

“`php


function register_product_post_type() {
    $args = array(
        'labels' => array(
            'name' => 'Sản phẩm',
            'singular_name' => 'Sản phẩm',
        ),
        'public' => true,
        'has_archive' => true,
        'menu_icon' => 'dashicons-products', // Thêm dòng này
        'supports' => array('title', 'editor', 'thumbnail'),
    );
    register_post_type('product', $args);
}
add_action('init', 'register_product_post_type');

“`

Sau khi lưu thay đổi và tải lại trang quản trị WordPress, bạn sẽ thấy icon mới cho CPT của bạn.

Thêm Icons sử dụng Font Awesome

Font Awesome cung cấp một bộ sưu tập icons phong phú hơn so với Dashicons. Để sử dụng Font Awesome, bạn cần tích hợp nó vào theme của bạn trước.

Tích hợp Font Awesome vào Theme

Có nhiều cách để tích hợp Font Awesome vào theme WordPress của bạn:

Sử dụng CDN: Cách đơn giản nhất là sử dụng một Content Delivery Network (CDN) để tải Font Awesome. Thêm đoạn code sau vào phần “ của file `header.php` trong theme của bạn:

“`html


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="SHA512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

“`

Cài đặt Plugin: Có nhiều plugin miễn phí cho phép bạn dễ dàng tích hợp Font Awesome vào WordPress. Ví dụ: “Font Awesome” plugin.
Tải và cài đặt thủ công: Bạn có thể tải Font Awesome từ trang chủ (fontawesome.com) và thêm các file CSS và fonts vào theme của bạn. Sau đó, bạn cần enqueue các file này trong file `functions.php` của theme.

Sử dụng Font Awesome Icons trong CPT

Sau khi tích hợp Font Awesome, bạn có thể sử dụng nó để gán icons cho CPT.

Xác định Font Awesome icon bạn muốn sử dụng: Truy cập trang chủ Font Awesome và tìm icon phù hợp. Ghi lại tên class của icon (ví dụ: `fas fa-box`).
Chỉnh sửa code đăng ký CPT: Mở file chứa code đăng ký CPT của bạn.
Thêm tham số ‘menu_icon’: Thêm tham số `’menu_icon’` với giá trị là `data:image/svg+xml;base64,` theo sau là SVG code của Font Awesome icon. Điều này yêu cầu bạn phải tìm SVG code tương ứng với icon bạn chọn. Một cách khác là sử dụng class CSS của icon. Ví dụ:

“`php


function register_product_post_type() {
    $args = array(
        'labels' => array(
            'name' => 'Sản phẩm',
            'singular_name' => 'Sản phẩm',
        ),
        'public' => true,
        'has_archive' => true,
        'menu_icon' => 'fas fa-box', // Thêm dòng này
        'supports' => array('title', 'editor', 'thumbnail'),
    );
    register_post_type('product', $args);
}
add_action('init', 'register_product_post_type');

function add_fontawesome_to_admin() {
    wp_enqueue_style( 'fontawesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css' );
}
add_action( 'admin_enqueue_scripts', 'add_fontawesome_to_admin' );

“`

Lưu ý quan trọng: Cách sử dụng `fas fa-box` trực tiếp trong `’menu_icon’` có thể không hoạt động trong một số trường hợp. Giải pháp đáng tin cậy hơn là sử dụng SVG code hoặc dùng CSS để thêm icon sau khi CPT đã được đăng ký. Ví dụ:

“`php


function register_product_post_type() {
    $args = array(
        'labels' => array(
            'name' => 'Sản phẩm',
            'singular_name' => 'Sản phẩm',
        ),
        'public' => true,
        'has_archive' => true,
        'menu_icon' => 'dashicons-products', // Sử dụng Dashicon tạm thời
        'supports' => array('title', 'editor', 'thumbnail'),
    );
    register_post_type('product', $args);
}
add_action('init', 'register_product_post_type');

function custom_menu_icons_css() {
    ?>
    
    <?php
}
add_action( 'admin_head', 'custom_menu_icons_css' );

“`

Trong ví dụ trên, bạn cần thay thế `f01c` bằng mã Unicode của icon Font Awesome bạn muốn sử dụng. Bạn có thể tìm thấy mã Unicode này trên trang chủ Font Awesome.

Thêm Icons sử dụng ảnh SVG tùy chỉnh

Sử dụng ảnh SVG tùy chỉnh cho phép bạn tạo ra các icon độc đáo và phù hợp hoàn toàn với thương hiệu của bạn.

Tạo ảnh SVG: Sử dụng phần mềm đồ họa vector (ví dụ: Adobe Illustrator, Inkscape) để tạo ảnh SVG bạn muốn sử dụng làm icon. Đảm bảo rằng ảnh có kích thước phù hợp (ví dụ: 20×20 pixels) và được tối ưu hóa để có dung lượng nhỏ.
Mã hóa ảnh SVG thành Base64: Sử dụng một công cụ trực tuyến để mã hóa ảnh SVG thành chuỗi Base64. Có nhiều công cụ miễn phí có sẵn trực tuyến, bạn có thể dễ dàng tìm kiếm bằng Google.
Chỉnh sửa code đăng ký CPT: Mở file chứa code đăng ký CPT của bạn.
Thêm tham số ‘menu_icon’: Thêm tham số `’menu_icon’` với giá trị là `data:image/svg+xml;base64,` theo sau là chuỗi Base64 bạn đã tạo. Ví dụ:

“`php


function register_product_post_type() {
    $args = array(
        'labels' => array(
            'name' => 'Sản phẩm',
            'singular_name' => 'Sản phẩm',
        ),
        'public' => true,
        'has_archive' => true,
        'menu_icon' => 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48cGF0aCBkPSJNMTkuNCAzLjYgMi4xIDMuNkEyLjEgMi4xIDAgMCAwIDAgNS43djEwLjRhMi4xIDIuMSAwIDAgMCAyLjEgMi4xaDE3LjNhMi4xIDIuMSAwIDAgMCAyLjEtMi4xVjUuN2EyLjEgMi4xIDAgMCAwLTIuMS0yLjF6TTQuMiAxNi40YS44LjggMCAxIDEtMS42IDAgLjggLjggMCAwIDEgMS42IDBaTTE2LjQgMTYuNGEuOC44IDAgMSAxLTEuNiAwIC44IC44IDAgMCAxIDEuNiAwWiIvPjwvc3ZnPg==', // Thay chuỗi Base64 bằng chuỗi của bạn
        'supports' => array('title', 'editor', 'thumbnail'),
    );
    register_post_type('product', $args);
}
add_action('init', 'register_product_post_type');

“`

Lời khuyên và lưu ý

Kiểm tra tính tương thích: Đảm bảo rằng icon bạn chọn hoặc tạo tương thích với các trình duyệt và thiết bị khác nhau.
Tối ưu hóa hiệu suất: Sử dụng các kỹ thuật tối ưu hóa hình ảnh để giảm dung lượng file và cải thiện tốc độ tải trang.
Thử nghiệm và điều chỉnh: Thử nghiệm các loại icons khác nhau để tìm ra giải pháp tốt nhất cho website của bạn.

Kết luận

Việc thêm icons cho Custom Post Types WordPress là một cách đơn giản nhưng hiệu quả để cải thiện giao diện quản trị và tạo ra một trải nghiệm người dùng tốt hơn. Bằng cách sử dụng Dashicons, Font Awesome hoặc ảnh SVG tùy chỉnh, bạn có thể tạo ra một giao diện trực quan và chuyên nghiệp hơn cho website của bạn.

#ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active::before { background-color: #ededed; } aa

Thêm icons cho custom post types WordPress

Thêm Icons cho Custom Post Types WordPress: Hướng dẫn chi tiết

Tại sao nên tùy chỉnh Icons cho Custom Post Types?

Các phương pháp thêm Icons cho Custom Post Types

Thêm Icons sử dụng Dashicons

Thêm Icons sử dụng Font Awesome

Tích hợp Font Awesome vào Theme

Sử dụng Font Awesome Icons trong CPT

Thêm Icons sử dụng ảnh SVG tùy chỉnh

Lời khuyên và lưu ý

Kết luận

aa