Bài viết này hướng dẫn cách thêm CSS tùy chỉnh vào Dashboard WordPress bằng cách chỉnh sửa file functions.php của theme.
Cảnh báo quan trọng:
- Sao lưu website: Trước khi chỉnh sửa bất kỳ file nào, đặc biệt là functions.php, hãy sao lưu toàn bộ website.
- Child theme: Nên sử dụng child theme để tránh mất tùy chỉnh khi theme được cập nhật.
Các bước thực hiện:
1. Truy cập functions.php:
- Dashboard: Giao diện (Appearance) → Sửa giao diện (Theme Editor). Tìm và chọn file functions.php.
- FTP/File Manager: Truy cập thư mục theme của bạn (/wp-content/themes/tên-theme/) và mở functions.php.
2. Thêm code CSS:
Dán đoạn code sau vào cuối file functions.php (trước ?> nếu có):
// Thêm css trong Dashboard admin //
add_action('admin_head', 'hanh_custom_css');
function hanh_custom_css() {
echo '<style>
//Thêm CSS cho khu vực admin ở đây//
</style>';
}3. Giải thích code:
- custom_admin_css(): Tên function (có thể thay đổi).
- <style type=”text/css”>: Khai báo CSS.
- /* Bắt đầu/Kết thúc CSS tùy chỉnh */: Vùng để thêm CSS của bạn.
- #adminmenu, .wrap h2: Selector CSS (xác định phần tử cần chỉnh sửa).
- background-color, color: Thuộc tính CSS (kiểu dáng cần thay đổi).
- #0073aa, #333: Giá trị CSS (giá trị của thuộc tính).
- add_action(‘admin_head’, ‘custom_admin_css’);: Gọi function vào hook admin_head (đảm bảo CSS được áp dụng trong <head>).
4. Thêm CSS tùy chỉnh:
Thay thế các ví dụ trong phần comment bằng CSS bạn muốn.
5. Lưu file:
- Dashboard: Nhấn Cập nhật tập tin.
- FTP/File Manager: Lưu và tải file lên server.
Khắc phục sự cố:
- Kiểm tra cú pháp CSS: Lỗi chính tả, thiếu dấu ngoặc, v.v.
- Kiểm tra lỗi PHP: Xem thông báo lỗi PHP (nếu có).
- Khôi phục sao lưu: Nếu gặp sự cố nghiêm trọng, hãy khôi phục lại website từ bản sao lưu.
Lời khuyên:
- Sử dụng DevTools của trình duyệt để kiểm tra và viết CSS chính xác.
- Tìm hiểu về CSS selectors để nhắm mục tiêu chính xác.
- Tóm lại: Cách này cho phép bạn tùy chỉnh mạnh mẽ giao diện Dashboard. Hãy cẩn thận và luôn sao lưu trước khi chỉnh sửa code.
