Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > Web Design > Wordpress Tips > Hướng dẫn chỉnh sửa WordPress Admin: Adding Styling
Hướng dẫn chỉnh sửa WordPress Admin: Adding Styling
Nguyễn Trung Hiếu
Share Code Web Company 2013

Hướng dẫn chỉnh sửa WordPress Admin: Adding Styling

This entry is part 6 of 6 in the series Customize Wordpress Admin

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

custome admin wordpress adding styling
Sau khi học xong bài này, chúng ta sẽ làm được

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

Loạt bài viết về Customize WordPress Admin

Khởi đầu khi cài đặt wordpress lên, bạn sẽ có giao diện admin như thế này
starting dashboard
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

Do đó, bạn cần đặt file style.css vào thư mục css của plugin.

Chỉnh sửa footer

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

Khi đó, chúng ta sẽ được như sau:
footer text wordpress
Nếu như icon của bạn hơi to, bạn có thể css lại như sau

Khi đó trông nó sẽ đẹp hơn
footer style

Styling admin menus

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

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 dashboard

Styling Button

Bạn có thể thêm đoạn code sau để style cho button

button color
Và khi hover hoặc click thì chuyển màu như sau
button hover color
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é

Series Navigation<< Hướng dẫn chỉnh sửa WordPress Admin: Listing Screen

Related Posts

Tác giả: Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com

Leave a comment

Bạn phải Đăng nhập để tham gia bình luận.

https://sharecodeweb.net/?s={search_term_string}

Blog Stats

  • 6.173 hits
%d bloggers like this: