- Hướng dẫn chỉnh sửa WordPress Admin : Trang login
- Hướng dẫn chỉnh sửa WordPress Admin : Dashboard admin
- Hướng dẫn chỉnh sửa WordPress Admin : Custom Admin Menus
- Hướng dẫn chỉnh sửa WordPress Admin : Help Text
- Hướng dẫn chỉnh sửa WordPress Admin: Listing Screen
- Hướng dẫn chỉnh sửa WordPress Admin: Adding Styling
Bài viết ngày hôm nay sẽ chia sẻ với các bạn về cách tự mình thay đổi style trong khu vực admin nhé
Demo ảnh
Sau khi học xong bài này, chúng ta sẽ làm được
- Chỉnh sửa lại phần footer
- style admin menus
- style links and buttons
Nguyên liệu cần cho bài học
Cũng như các bài trước, nguyên liệu cho bài học chúng ta cần như sau:
- Bộ cài wordpress
- Quyền truy cập vào folder plugin trên host của bạn
- Và một text editor để có thể code
Khởi đầu khi cài đặt wordpress lên, bạn sẽ có giao diện admin như thế này
Sau bài học này, chúng ta sẽ có một số sự thay đổi bất ngờ trong giao diện admin đấy.
Setting up stylesheet
Trước khi bắt tay làm mọi thứ, thì chúng ta phải làm bước này đầu tiên. Đó là cài đặt trong theme function một hàm để admin gọi đến file style.css của chúng ta.
Trong file plugin chúng ta thêm đoạn code sau
|
1 2 3 4 5 6 |
// let's start by enqueuing our styles correctly function wptutsplus_admin_styles() { wp_register_style( 'wptuts_admin_stylesheet', plugins_url( '/css/style.css', __FILE__ ) ); wp_enqueue_style( 'wptuts_admin_stylesheet' ); } add_action( 'admin_enqueue_scripts', 'wptutsplus_admin_styles' ); |
Do đó, bạn cần đặt file style.css vào thư mục css của plugin.
Mặc định footer của wordpress sẽ hiện dòng chữ “Thank you for creating with WordPress“. Và để thay đổi màu, cũng như thêm một icon ảnh thương hiệu của bạn, thì bạn có thể làm như sau
|
1 2 3 4 5 |
//change the footer text function wptutsplus_admin_footer_text () { echo '<img src="' . plugins_url( 'images/wptutsplus-icon.png' , __FILE__ ) . '">This tutorial is brought to you by <a href="http://wp.tutsplus.com">wptutsplus</a>.'; } add_filter( 'admin_footer_text', 'wptutsplus_admin_footer_text' ); |
Khi đó, chúng ta sẽ được như sau:
Nếu như icon của bạn hơi to, bạn có thể css lại như sau
|
1 2 3 4 5 6 |
/* styling for the footer */ #wpfooter #footer-left img { height: 1.2em; width: auto; margin-right: 0.5em; } |
Khi đó trông nó sẽ đẹp hơn
Phần tiếp theo của bài học sẽ giúp bạn style lại admin menus theo phong cách riêng của bạn
|
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 |
/* styling for admin menu */ /* background and text color */ #adminmenuback, #adminmenuwrap { background-color: #58595b; border-color: #fff; } #adminmenu li.menu-top:hover, #adminmenu li.opensub > a.menu-top, #adminmenu li > a.menu-top:focus { background-color: #58595b; color: #d54e21; text-shadow: 0 1px 0 rgba(255,255,255,0.4); } #adminmenu li.wp-menu-separator { background: #fff; border-color: #fff; } /* links in admin menu */ #adminmenu a, #adminmenu li.menu-top:hover, #adminmenu li.opensub > a.menu-top, #adminmenu li > a.menu-top:focus { color: #fff; } #adminmenu a:hover, #adminmenu a:active { color: #fff; text-decoration: underline; } #adminmenu .wp-submenu a { color: #58595b; } /* change color of arrow to submenus */ #adminmenu li.wp-not-current-submenu .wp-menu-arrow, #adminmenu li.wp-not-current-submenu .wp-menu-arrow div { background: #58595b; } /* active screen as seen in menu - change the background and arrow colour */ #adminmenu li.wp-has-current-submenu a.wp-has-current-submenu, #adminmenu li.current a.menu-top, .folded #adminmenu li.wp-has-current-submenu, .folded #adminmenu li.current.menu-top, #adminmenu .wp-menu-arrow, #adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head { background: #9e4059; } #adminmenu li.wp-has-current-submenu .wp-menu-arrow, #adminmenu li.wp-has-current-submenu .wp-menu-arrow div { background: #9e4059; } |
Trong đoạn css trên, tôi đã thực hiện thay đổi
- Màu nền chuyển sang đen sẫm
- Màu chữ ở menu con chuyển thành xám trắng
- Liên kết màu trắng
- Nền đỏ cho các page được chọn
Khi đó, ta sẽ có được một giao diện hoàn toàn mới, và tùy vào sức sáng tạo và khả năng design của bạn, bạn có thể làm cho nó đẹp hơn nữa.
Styling Button
Bạn có thể thêm đoạn code sau để style cho button
|
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 |
/* buttons */ .wp-core-ui .button-primary { background: #4b8938; background-image: -webkit-gradient(linear,left top,left bottom,from(#7ea367),to(#4b8938)); background-image: -webkit-linear-gradient(top,#7ea367,#4b8938); background-image: -moz-linear-gradient(top,#7ea367,#4b8938); background-image: -ms-linear-gradient(top,#7ea367,#4b8938); background-image: -o-linear-gradient(top,#7ea367,#4b8938); background-image: linear-gradient(to bottom,#7ea367,#4b8938); border-color: #4b8938; color: rgba(255,255,255,0.95); -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1); box-shadow: inset 0 1px 0 rgba(0,0,0,0.1); text-shadow: 0 1px 0 rgba(0,0,0,0.1); } .wp-core-ui .button-primary.active, .wp-core-ui .button-primary:hover, .wp-core-ui .button-primary:active { background: #9e4059; background-image: -webkit-gradient(linear,left top,left bottom,from(#ba7582),to(#9e4059)); background-image: -webkit-linear-gradient(top,#ba7582,#9e4059); background-image: -moz-linear-gradient(top,#ba7582,#9e4059); background-image: -ms-linear-gradient(top,#ba7582,#9e4059); background-image: -o-linear-gradient(top,#ba7582,#9e4059); background-image: linear-gradient(to bottom,#ba7582,#9e4059); border-color: #9e4059; color: rgba(255,255,255,0.95); -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1); box-shadow: inset 0 1px 0 rgba(0,0,0,0.1); text-shadow: 0 1px 0 rgba(0,0,0,0.1); } |
Và khi hover hoặc click thì chuyển màu như sau
Vậy là xong rồi đó, như mình vẫn nói, tùy vào khả năng style của bạn, mà bạn style cho khu vực admin của mình sao cho thật đẹp nhé.
Download code
Vậy là các bạn đã học xong cách style cơ bản dành cho khu vực admin rồi. Ở bài học này, các bạn chú ý tới một vài hàm hook và một số class cũng như id để phục vụ cho việc style mà thôi. Bài học tới đây kết thúc!
Nếu bạn nào còn không hiểu thì có thể download demo bên dưới về để tham khảo chi tiết hơn cách viết nhé
