Home
WordPress
Blog
Support
Tiện ích
By Trang quản trị WordPress (/wp-admin) mặc định khá đơn giản và dễ gây nhàm chán khi sử dụng lâu dài. Tin vui là bạn hoàn toàn có thể thay đổi giao diện admin bằng CSS theo cách an toàn – đúng chuẩn, không chỉnh sửa core WordPress.
Trong bài viết này, mình sẽ hướng dẫn bạn enqueue CSS riêng cho admin WordPress và áp dụng style màu chủ đạo #4f79b1 để giao diện quản trị trông hiện đại, khác lạ nhưng vẫn dễ sử dụng.
Thêm đoạn này vào functions.php (theme hoặc child theme)
1 2 3 4 5 6 7 8 9 10 | // Custom Admin Style add_action('admin_enqueue_scripts', 'custom_admin_style_az9'); function custom_admin_style_az9() { wp_enqueue_style( 'custom-admin-css', get_stylesheet_directory_uri() . '/admin-style.css', [], '1.0' ); } |
Tạo file admin-style.css trong thư mục theme
📁 wp-content/themes/your-theme/admin-style.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | /* ===== ADMIN COLOR THEME ===== */ :root { --main-color: #4f79b1; --main-dark: #3f6596; --main-light: #e8eff8; } /* Background tổng */ body.wp-admin { background: #f4f6fb; } /* Thanh menu trái */ #adminmenu, #adminmenu .wp-submenu, #adminmenuback, #adminmenuwrap { background: var(--main-color); } /* Text menu */ #adminmenu a { color: #fff; } /* Hover menu */ #adminmenu li.menu-top:hover, #adminmenu li.opensub > a { background: var(--main-dark); } /* Menu đang active */ #adminmenu .wp-has-current-submenu > a, #adminmenu .current a.menu-top { background: #fff; color: var(--main-color); font-weight: 600; } /* Submenu */ #adminmenu .wp-submenu a { color: #dbe6f5; } #adminmenu .wp-submenu a:hover { color: #fff; } /* Top bar */ #wpadminbar { background: var(--main-dark); } /* Nút primary */ .wp-core-ui .button-primary { background: var(--main-color); border-color: var(--main-color); } .wp-core-ui .button-primary:hover { background: var(--main-dark); border-color: var(--main-dark); } /* Card box */ .wrap .card, .postbox { border-radius: 10px; border: none; box-shadow: 0 6px 20px rgba(0,0,0,.06); } /* Tiêu đề */ .wrap h1 { color: var(--main-color); } /* Table */ .wp-list-table thead th { background: var(--main-light); } /* Scroll bar (Chrome) */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-thumb { background: var(--main-color); border-radius: 10px; } |
Vì sao nên CSS lại trang quản trị WordPress?
cá nhân hóa giao diện admin theo thương hiệu
Giảm mỏi mắt khi làm việc lâu
Tăng trải nghiệm quản trị website
Không ảnh hưởng giao diện frontend
Không bị mất khi cập nhật WordPress
KẾT QUẢ
✔ Admin nhìn hiện đại – dịu mắt
✔ Màu chủ đạo #4f79b1 xuyên suốt
✔ Không ảnh hưởng frontend
✔ Dễ chỉnh thêm theo ý
Xem thêm: Giới thiệu về Plugin Posts Like Dislike
Theo dỗi tên trên Fanpage và Youtube của mình nhé.
4 
0
