Tại sao cần thêm CSS tùy chỉnh cho wp-admin?
Đôi lúc chúng ta muốn thay đổi giao diện của plugin hoặc một thành phần nào đó trong wp-admin. Việc tùy chỉnh CSS cho trang quản trị WordPress giúp bạn giải quyết nhiều vấn đề thực tế trong quá trình sử dụng và quản lý website.
Dưới đây là một số trường hợp phổ biến mà bạn cần thêm CSS tùy chỉnh cho wp-admin:
Ẩn banner quảng cáo của plugin: Nhiều plugin miễn phí hiển thị banner quảng cáo phiên bản pro trong wp-admin. Những banner này gây phiền toái và làm rối giao diện quản trị. Với CSS tùy chỉnh, bạn có thể ẩn chúng dễ dàng mà không cần nâng cấp lên bản trả phí.
Thu gọn giao diện cho người dùng: Nếu website có nhiều người dùng với vai trò khác nhau (Editor, Author, Contributor), việc ẩn các thành phần không cần thiết giúp giao diện admin đơn giản hơn, giảm bớt sự bỡ ngỡ cho người mới.
Brand wp-admin cho khách hàng: Nếu bạn làm dịch vụ thiết kế website, việc tùy chỉnh giao diện admin (thêm logo, đổi màu, ẩn menu không cần thiết) giúp trải nghiệm quản trị chuyên nghiệp hơn cho khách hàng.
Khắc phục lỗi hiển thị: Đôi khi theme hoặc plugin có CSS xung đột gây lỗi hiển thị trong wp-admin. Thay vì chờ bản cập nhật, bạn có thể dùng CSS tùy chỉnh để sửa nhanh.
Cách đơn giản: Thêm CSS inline qua hook admin_head
Phương pháp nhanh nhất là dùng hook admin_head để chèn CSS trực tiếp vào phần head của trang admin. Đoạn code bạn nhớ tùy chỉnh lại cho phù hợp nhu cầu nhé:
add_action('admin_head', 'bunnywp_myCustom_fonts');
function bunnywp_myCustom_fonts() {
echo '';
}Đoạn code này sử dụng hook admin_head của WordPress để chèn thẻ <style> vào phần head của mọi trang trong wp-admin. Các CSS rule bên trong sẽ áp dụng cho toàn bộ giao diện admin.
Giải thích code: Hàm add_action('admin_head', 'bunnywp_myCustom_fonts') đăng ký callback bunnywp_myCustom_fonts sẽ chạy mỗi khi trang admin được tải. Hàm callback này dùng echo để xuất thẻ style với các CSS rule tùy chỉnh. Trong ví dụ trên, 4 selector được ẩn là logo và banner quảng cáo của plugin Ninja Forms và SendWP.
Cách chuyên nghiệp: Enqueue file CSS riêng
Mặc dù phương pháp inline ở trên hoạt động tốt, nhưng nếu bạn có nhiều CSS cần thêm, tốt hơn nên tạo một file CSS riêng và enqueue nó bằng hook admin_enqueue_scripts:
add_action('admin_enqueue_scripts', 'my_custom_admin_css');
function my_custom_admin_css($hook) {
// Chỉ tai CSS tren trang chinh san pham
wp_enqueue_style(
'my-admin-custom-css',
get_stylesheet_directory_uri() . '/admin-custom.css',
array(),
'1.0.0'
);
}Phương pháp này có ưu điểm: CSS được tách riêng thành file, dễ quản lý và bảo trì. Hàm get_stylesheet_directory_uri() trả về URL của thư mục theme đang dùng (hoặc child theme nếu có). Bạn chỉ cần tạo file admin-custom.css trong thư mục gốc của theme và thêm các CSS rule vào đó.
Giới hạn CSS theo trang admin cụ thể
Tham số $hook trong callback của admin_enqueue_scripts cho phép bạn biết trang admin nào đang được hiển thị. Điều này hữu ích khi bạn chỉ muốn áp dụng CSS cho một trang cụ thể, tránh load CSS không cần thiết:
add_action('admin_enqueue_scripts', 'my_custom_admin_css_by_page');
function my_custom_admin_css_by_page($hook) {
// Chi ap dung cho trang chinh sua bai viet
if($hook == 'post.php' || $hook == 'post-new.php'){
wp_enqueue_style(
'my-admin-editor-css',
get_stylesheet_directory_uri() . '/admin-editor.css',
array(),
'1.0.0'
);
}
// Chi ap dung cho trang WooCommerce
if(strpos($hook, 'woocommerce') !== false){
wp_enqueue_style(
'my-admin-woo-css',
get_stylesheet_directory_uri() . '/admin-woo.css',
array(),
'1.0.0'
);
}
}Một số giá trị hook phổ biến trong wp-admin: index.php (Dashboard), post.php (chỉnh sửa bài viết), post-new.php (tạo bài mới), edit.php (danh sách bài viết), plugins.php (trang quản lý plugin).
Thêm CSS cho vai trò người dùng cụ thể
Bạn có thể kết hợp CSS tùy chỉnh với kiểm tra vai trò người dùng để tạo trải nghiệm admin khác nhau cho từng loại user:
add_action('admin_head', 'my_admin_css_by_role');
function my_admin_css_by_role() {
// Chi ap dung cho Editor va Author
if(!current_user_can('manage_options')){
echo '';
}
}Đoạn code này kiểm tra bằng current_user_can('manage_options'). Nếu người dùng không phải Admin (không có quyền manage_options), các CSS rule sẽ được áp dụng để ẩn menu Appearance, Settings, và thông báo cập nhật. Lưu ý rằng CSS chỉ ẩn visually chứ không xóa chức năng. Để bảo mật thực sự, bạn cần dùng thêm capability management plugin.
Cách tìm CSS selector trong wp-admin
Để biết selector CSS của phần tử nào đó trong wp-admin, bạn cần dùng Developer Tools của trình duyệt:
Bước 1: Mở trang wp-admin mà bạn muốn tùy chỉnh trong Chrome, Firefox, hoặc Edge.
Bước 2: Chuột phải vào phần tử muốn ẩn hoặc thay đổi, chọn “Inspect” (Kiểm tra). Chrome DevTools sẽ mở ra với phần tử được highlight.
Bước 3: Nhìn vào panel Elements, tìm ID hoặc class của phần tử. Ví dụ, banner quảng cáo thường có class như .notice, .promo-banner, hoặc ID như #some-plugin-promo.
Bước 4: Thử CSS rule trong DevTools trước bằng cách vào tab Styles, thêm rule mới. Nếu selector đúng, phần tử sẽ bị ẩn hoặc thay đổi ngay lập tức.
Bước 5: Copy selector đã xác nhận và thêm vào code PHP của bạn.
Một số CSS snippet hữu ích cho wp-admin
Dưới đây là các CSS snippet phổ biến mà bạn có thể sử dụng ngay:
Ẩn thông báo cập nhật WordPress: .update-nag { display: none !important; } – Hữu ích khi bạn muốn cập nhật vào thời điểm chủ động, không bị làm phiền bởi thông báo liên tục.
Ẩn widget Welcome: #welcome-panel { display: none !important; } – Trang Dashboard của WordPress có widget Welcome panel hiển thị cho người dùng mới. Ẩn nó đi nếu bạn đã quen với giao diện.
Ẩn các widget Dashboard không cần thiết: #dashboard_quick_press, #dashboard_recent_drafts, #dashboard_primary { display: none !important; } – Giúp trang Dashboard gọn gàng hơn.
Ẩn footer WordPress: #wpfooter { display: none !important; } – Ẩn thanh footer chứa thông tin phiên bản WordPress (thông tin này có thể bị lợi dụng để khai thác lỗi bảo mật nếu version cũ).
Thu gọn menu sidebar: #adminmenu { font-size: 13px !important; } #adminmenu .wp-submenu { font-size: 12px !important; } – Giảm kích thước font menu giúp hiển thị nhiều menu hơn khi sidebar dài.
Plugin thay thế cho việc thêm CSS admin
Nếu bạn không muốn chạm vào code, một số plugin sau cung cấp giao diện dễ dùng để thêm CSS tùy chỉnh cho wp-admin:
Admin CSS Injector: Plugin cho phép bạn nhập CSS tùy chỉnh qua giao diện admin mà không cần chỉnh sửa file theme. Giao diện đơn giản, có sẵn một editor CSS với syntax highlighting.
WPCode (tên cũ Code Snippets): Plugin phổ biến cho phép quản lý nhiều đoạn code PHP, CSS, và JavaScript. Bạn có thể tạo snippet chứa CSS admin và bật/tắt bất cứ lúc nào.
Simple Custom CSS and JS: Plugin cho phép thêm CSS và JavaScript tùy chỉnh cho cả frontend và admin. Có giao diện editor tích hợp và hỗ trợ responsive preview.
Lưu ý quan trọng khi thêm CSS cho wp-admin
CSS chỉ ẩn visually, không bảo mật: Phương pháp CSS chỉ ẩn phần tử khỏi giao diện hiển thị, nhưng phần tử vẫn tồn tại trong DOM và có thể truy cập được qua Developer Tools. Nếu bạn cần bảo mật thực sự (chặn truy cập chức năng), hãy dùng capability management plugin hoặc thêm kiểm tra quyền trong code PHP.
Dùng !important cẩn thận: Trong wp-admin, nhiều CSS rule có specificity cao. Bạn thường cần thêm !important để override, nhưng hãy hạn chế dùng quá nhiều vì gây khó debug.
Kiểm tra sau cập nhật WordPress: Các phiên bản WordPress mới có thể thay đổi class và ID của các phần tử trong admin. Sau khi cập nhật, hãy kiểm tra xem CSS tùy chỉnh của bạn vẫn hoạt động đúng không.
Backup trước khi thay đổi: Luôn sao lưu file functions.php trước khi thêm code mới. Nếu code có lỗi PHP cú pháp, website có thể bị trắng trang. Hãy bật WP_DEBUG để dễ dàng phát hiện lỗi.
Tổng kết
Thêm CSS tùy chỉnh cho wp-admin là một kỹ năng hữu ích cho bất kỳ ai quản lý website WordPress. Chỉ với vài dòng code, bạn có thể ẩn các thành phần gây phiền, tối ưu hóa giao diện quản trị, và tạo trải nghiệm admin tốt hơn cho cả mình lẫn người dùng khác.
Phương pháp inline với hook admin_head phù hợp cho những thay đổi nhỏ, nhanh chóng. Trong khi đó, phương pháp enqueue file CSS riêng với admin_enqueue_scripts phù hợp cho những dự án lớn cần quản lý nhiều CSS rule. Dù chọn phương pháp nào, hãy luôn kiểm tra kỹ trên các trình duyệt khác nhau và sau mỗi lần cập nhật WordPress để đảm bảo code vẫn hoạt động đúng.
Mình viết bài này cũng như bao bài khác trên blog – chủ yếu để ghi lại những lúc vấp váp với WordPress, plugin, hosting… Nên chắc chắn không phải dân làm web chuyên nghiệp. Nếu bạn đang cần một website đàng hoàng, có thể liên hệ TaigaWeb – mình quen từ lâu, họ xử lý gọn hơn mình nhiều.
