Thay đổi icon admin WordPress với 2 cách đơn giản
Thay Đổi Icon Admin WordPress với 2 Cách Đơn Giản
Giao diện quản trị WordPress mặc định đôi khi có thể trở nên nhàm chán. Một trong những cách để làm mới giao diện này là thay đổi icon mặc định của WordPress. Bài viết này sẽ hướng dẫn bạn 2 cách đơn giản để thực hiện điều đó, giúp bạn cá nhân hóa và làm cho trang quản trị WordPress của mình trở nên độc đáo hơn.
Tại Sao Nên Thay Đổi Icon Admin WordPress?
Thay đổi icon admin WordPress không chỉ là một thay đổi về mặt thẩm mỹ. Nó còn mang lại một số lợi ích sau:
- Cá nhân hóa giao diện: Tạo sự khác biệt và làm cho trang quản trị trở nên độc đáo hơn.
- Dễ dàng nhận diện: Nếu bạn quản lý nhiều trang WordPress, việc thay đổi icon giúp bạn dễ dàng phân biệt chúng.
- Tăng tính chuyên nghiệp: Một giao diện được tùy chỉnh có thể tạo ấn tượng tốt hơn với khách hàng hoặc người dùng.
Cách 1: Sử Dụng Plugin Thay Đổi Icon Admin WordPress
Đây là cách đơn giản và phổ biến nhất, phù hợp với những người không muốn chỉnh sửa code trực tiếp. Có rất nhiều plugin miễn phí và trả phí cho phép bạn thay đổi icon admin WordPress một cách dễ dàng. Một số plugin phổ biến bao gồm:
- Admin Menu Editor: Plugin này không chỉ cho phép bạn thay đổi icon mà còn có thể tùy chỉnh menu quản trị.
- White Label CMS: Plugin này cho phép bạn tùy chỉnh toàn bộ giao diện quản trị, bao gồm cả icon.
- Custom Admin Interface: Plugin này cung cấp nhiều tùy chọn để thay đổi giao diện quản trị, bao gồm cả icon.
Trong ví dụ này, chúng ta sẽ sử dụng plugin “Admin Menu Editor”.
Hướng Dẫn Sử Dụng Plugin Admin Menu Editor
- Cài đặt và kích hoạt plugin: Truy cập vào “Plugins” -> “Add New” trong trang quản trị WordPress của bạn. Tìm kiếm plugin “Admin Menu Editor” và cài đặt, sau đó kích hoạt plugin.
- Truy cập cài đặt plugin: Sau khi kích hoạt, bạn sẽ thấy một mục mới trong menu “Settings” hoặc “Appearance” (tùy thuộc vào phiên bản plugin). Nhấp vào đó để truy cập trang cài đặt của plugin.
- Chọn mục menu cần thay đổi icon: Trang cài đặt sẽ hiển thị danh sách các mục menu quản trị. Tìm mục mà bạn muốn thay đổi icon.
- Thay đổi icon: Hầu hết các plugin đều cung cấp một trình chọn icon hoặc cho phép bạn nhập URL của icon bạn muốn sử dụng. Bạn có thể sử dụng icon từ thư viện icon có sẵn hoặc tải lên icon của riêng bạn. Admin Menu Editor cho phép bạn dùng dashicons, thuộc thư viện icon của WordPress, hoặc dùng các icon custom theo URL ảnh.
- Lưu thay đổi: Sau khi chọn icon, hãy lưu lại các thay đổi của bạn.
- Kiểm tra kết quả: Refresh trang quản trị WordPress của bạn để xem icon mới.
Ví dụ:
Giả sử bạn muốn thay đổi icon của mục “Posts”. Sau khi cài đặt và kích hoạt Admin Menu Editor, bạn truy cập vào trang cài đặt của plugin, tìm mục “Posts”, và nhấp vào biểu tượng chỉnh sửa. Trong hộp thoại chỉnh sửa, bạn sẽ thấy một tùy chọn để thay đổi icon. Bạn có thể chọn một icon từ thư viện dashicons hoặc tải lên một icon tùy chỉnh. Sau khi chọn icon, bạn lưu lại các thay đổi và refresh trang quản trị để xem kết quả.
Cách 2: Thay Đổi Icon Admin WordPress Bằng Code
Cách này đòi hỏi bạn có kiến thức cơ bản về code và hiểu rõ cấu trúc file của WordPress. Nếu bạn không quen thuộc với code, bạn nên sử dụng plugin để tránh gây ra lỗi cho trang web của mình.
Chúng ta sẽ sử dụng hook admin_head để thêm CSS tùy chỉnh vào trang quản trị và thay đổi icon thông qua CSS.
Các Bước Thực Hiện
- Truy cập file
functions.phpcủa theme: Filefunctions.phpthường nằm trong thư mục theme của bạn. Bạn có thể truy cập file này thông qua trình quản lý file của hosting hoặc thông qua trình chỉnh sửa code trong trang quản trị WordPress (Appearance -> Theme Editor). Lưu ý: Bạn nên sử dụng child theme để tránh mất các thay đổi khi theme được cập nhật. - Thêm đoạn code sau vào file
functions.php:
function custom_admin_icon() {
echo '<style type="text/css">
#adminmenu #menu-posts div.wp-menu-image::before {
content: "\f109" !important; /* Thay đổi mã unicode này */
}
</style>';
}
add_action('admin_head', 'custom_admin_icon');
Giải thích đoạn code:
function custom_admin_icon() { ... }: Định nghĩa một hàm để thêm CSS tùy chỉnh vào trang quản trị.echo '<style type="text/css"> ... </style>';: Thêm đoạn CSS vào trang quản trị.#adminmenu #menu-posts div.wp-menu-image::before { ... }: Chọn phần tử chứa icon của mục “Posts” trong menu quản trị.content: "\f109" !important;: Thay đổi nội dung của phần tử::before, tức là thay đổi icon.f109là mã unicode của một icon trong thư viện dashicons.add_action('admin_head', 'custom_admin_icon');: Thêm hàmcustom_admin_iconvào hookadmin_head, đảm bảo rằng đoạn code được thực thi khi trang quản trị được tải.
- Thay đổi mã unicode: Thay thế
f109bằng mã unicode của icon bạn muốn sử dụng. Bạn có thể tìm thấy danh sách đầy đủ các icon dashicons tại trang chủ WordPress Developer Documentation. - Lưu file
functions.php: Sau khi thêm đoạn code, hãy lưu lại filefunctions.php. - Kiểm tra kết quả: Refresh trang quản trị WordPress của bạn để xem icon mới.
Ví dụ:
Để thay đổi icon của mục “Posts” thành một icon khác, ví dụ như icon “dashboard” (mã unicode là f22d), bạn sẽ thay đổi đoạn code trên thành:
function custom_admin_icon() {
echo '<style type="text/css">
#adminmenu #menu-posts div.wp-menu-image::before {
content: "\f22d" !important; /* Thay đổi mã unicode này */
}
</style>';
}
add_action('admin_head', 'custom_admin_icon');
Lưu Ý Quan Trọng Khi Sử Dụng Code
- Sử dụng child theme: Luôn sử dụng child theme để tránh mất các thay đổi khi theme được cập nhật.
- Sao lưu file
functions.php: Trước khi chỉnh sửa filefunctions.php, hãy sao lưu nó để có thể khôi phục lại nếu có lỗi xảy ra. - Kiểm tra kỹ code: Đảm bảo rằng bạn đã nhập đúng code và không có lỗi cú pháp. Một lỗi nhỏ trong file
functions.phpcó thể làm hỏng trang web của bạn.
Kết Luận
Thay đổi icon admin WordPress là một cách đơn giản để cá nhân hóa và làm mới giao diện quản trị của bạn. Bạn có thể sử dụng plugin để thực hiện điều này một cách dễ dàng, hoặc sử dụng code nếu bạn muốn có nhiều quyền kiểm soát hơn. Hãy chọn phương pháp phù hợp với trình độ và nhu cầu của bạn.
Chúc bạn thành công trong việc tùy chỉnh giao diện WordPress của mình!
