- 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
Ngày hôm nay, sharecodeweb sẽ mang đến cho các bạn loạt bài về cách customize trang admin của wordpress. Hy vọng nó cũng sẽ giúp bạn nắm được một vài kiến thức để tham gia thiết kế theme cho wordpress nhé. Bài ngày hôm nay chúng ta sẽ cùng tìm hiểu về cách customize trang login.
Xem trước demo
Các bạn xem trước demo sau khi chúng ta hoàn thành bài học để giúp bạn có cái nhìn hình dung sau cả quá trình học.
Trong bài ngày hôm nay, sharecodeweb sẽ hướng dẫn bạn cách thay đổi logo của wordpress thành logo của bạn, và style một số link, button sao cho hợp ý bạn nhất thông qua cách tạo riêng một plugin giúp chúng ta làm việc này.
Nguyên liệu cần cho bài học
Cũng giống như nấu ăn, chúng ta cần có “nguyên liệu” như sau:
- Bộ cài wordpress
- Có quyền truy cập vào folder của site cũng như quyền thêm một số plugin
- Có text editor để tạo plugin
Cài đặt một plugin mới
Chúng ta thêm đoạn sau vào phần đầu tiên của file plugin. Đây là những thông tin khai báo cho wordpress biết là file này là file plugin. Cũng như thông tin khai báo khi bạn thiết kế theme cho wordpress vậy.
|
1 2 3 4 5 6 7 8 9 |
/* Plugin Name: Customize the Admin Part 1 - Login Screen Plugin URI: https://sharecodeweb.net Description: This plugin supports the tutorial in sharecodeweb. It customizes the WordPress login screen. Version: 1.0 Author: Sharecodeweb Author URI: https://sharecodeweb.net/project License: GPLv2 */ |
Custome logo
- Đầu tiên, tạo folder plugin tên media bên trong folder plugin của bạn, và upload logo lên đó.
- Trong file plugin (hoặc file function) chúng ta thêm hàm login_enqueue_scripts vào hook
|
1 2 3 4 5 6 7 8 9 10 |
// add a new logo to the login page function wptutsplus_login_logo() { ?> <style type="text/css"> .login #login h1 a { background-image: url( <?php echo plugins_url( 'media/cd-logo-directing-fullcol.png' , __FILE__ ); ?> ); } </style> <?php } add_action( 'login_enqueue_scripts', 'wptutsplus_login_logo' ); ?> |
Style Logo
Theo đoạn code trên, bạn có thể thêm các thuộc tính để quy định kích thước, vị trí của logo như height, width, cũng như margin hay padding vào bên trong thẻ style như sau:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// add a new logo to the login page function wptutsplus_login_logo() { ?> <style type="text/css"> .login #login h1 a { background-image: url( <?php echo plugins_url( 'media/cd-logo-directing-fullcol.png' , __FILE__ ); ?> ); background-size: 300px auto; height: 70px; } </style> <?php } add_action( 'login_enqueue_scripts', 'wptutsplus_login_logo' ); ?> |
Tương tự như vậy, bạn có thể vận dụng khả năng css của mình để style trong hàm trên là ok. Như mẫu bên dưới minh style như sau:
|
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 |
// add a new logo to the login page function wptutsplus_login_logo() { ?> <style type="text/css"> .login #login h1 a { background-image: url( <?php echo plugins_url( 'media/cd-logo-directing-fullcol.png' , __FILE__ ); ?> ); background-size: 300px auto; height: 70px; } .login #nav a, .login #backtoblog a { color: #27adab !important; } .login #nav a:hover, .login #backtoblog a:hover { color: #d228bc !important; } .login .button-primary { background: #27adab; /* Old browsers */ background: -moz-linear-gradient(top, #27adab 0%, #135655 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#27adab), color-stop(100%,#135655)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #27adab 0%,#135655 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #27adab 0%,#135655 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #27adab 0%,#135655 100%); /* IE10+ */ background: linear-gradient(to bottom, #27adab 0%,#135655 100%); /* W3C */ } .login .button-primary:hover { background: #85aaaa; /* Old browsers */ background: -moz-linear-gradient(top, #85aaaa 0%, #208e8c 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#85aaaa), color-stop(100%,#208e8c)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #85aaaa 0%,#208e8c 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #85aaaa 0%,#208e8c 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #85aaaa 0%,#208e8c 100%); /* IE10+ */ background: linear-gradient(to bottom, #85aaaa 0%,#208e8c 100%); /* W3C */ } </style> <?php } add_action( 'login_enqueue_scripts', 'wptutsplus_login_logo' ); ?> |
OK, lúc này bạn thử vào trang login và refresh lại xem sự thay đổi ra sao nhé.
Download Code
Việc style trang login mà không cần động vào core của wordpress giúp chúng ta gặp ít lỗi hơn, linh động hơn, và đối với một số người không chuyên về code của wordpress thì sẽ dễ dàng tiếp cận hơn rất nhiều.
Các bạn có thể download code bên dưới về tham khảo nếu như học theo bài không thành công.
