Cheat sheet CSS mặc định WordPress cho người mới

Tổng Quan về CSS Mặc Định của WordPress cho Người Mới Bắt Đầu

WordPress, một hệ quản trị nội dung (CMS) phổ biến, đi kèm với một bộ CSS mặc định nhằm cung cấp một nền tảng trực quan cho giao diện của trang web. Hiểu rõ về các lớp (class) và định dạng (style) CSS mặc định này sẽ giúp bạn tùy chỉnh giao diện website một cách hiệu quả hơn, đặc biệt khi mới làm quen với WordPress. Bài viết này sẽ cung cấp một cheat sheet CSS mặc định hữu ích, tập trung vào những yếu tố quan trọng nhất mà người mới bắt đầu cần biết.

Các Lớp CSS Thường Gặp trong WordPress

WordPress sử dụng một hệ thống phân lớp (class) CSS chặt chẽ để kiểm soát bố cục và định dạng của nội dung. Dưới đây là một số lớp CSS phổ biến mà bạn sẽ thường xuyên gặp phải:

• `body` class: Thường có các lớp như `home`, `blog`, `page`, `single` để chỉ trang chủ, trang blog, trang đơn, hoặc bài viết đơn. Ngoài ra, còn có các lớp như `logged-in` khi người dùng đã đăng nhập.
• `.site` hoặc `#page`: Container chính chứa toàn bộ nội dung trang web.
• `.site-header`, `.site-content`, `.site-footer`: Các phần header, content, và footer của trang web.
• `.entry-title`, `.entry-content`, `.entry-meta`: Các thành phần tiêu đề, nội dung, và meta (thông tin bài viết) của một bài viết.
• `.widget`: Container cho các widget trong sidebar.
• `.comment-list`, `.comment`: Các lớp liên quan đến hiển thị bình luận.
• `.menu`: Container cho menu điều hướng.

CSS cho Bố Cục (Layout) Cơ Bản

WordPress sử dụng CSS để tạo ra bố cục trang web. Dưới đây là một số phần tử CSS quan trọng liên quan đến bố cục:

• `width`: Xác định chiều rộng của một phần tử. Thường được sử dụng để kiểm soát chiều rộng của container chính, sidebar, và các phần tử khác.
• `margin`: Tạo khoảng cách xung quanh một phần tử. `margin-top`, `margin-bottom`, `margin-left`, `margin-right` cho phép kiểm soát khoảng cách ở mỗi phía.
• `padding`: Tạo khoảng cách bên trong một phần tử. `padding-top`, `padding-bottom`, `padding-left`, `padding-right` cho phép kiểm soát khoảng cách ở mỗi phía.
• `float`: Sử dụng để tạo bố cục cột (column layout). `float: left` và `float: right` được sử dụng để đặt các phần tử bên cạnh nhau.
• `display`: Xác định cách phần tử được hiển thị. `display: block`, `display: inline`, `display: inline-block` là những giá trị phổ biến.
• `position`: Xác định vị trí của một phần tử. `position: relative`, `position: absolute`, `position: fixed` là những giá trị phổ biến.

CSS cho Typography (Kiểu Chữ)

Typography là một phần quan trọng của thiết kế web. WordPress cung cấp các lớp CSS mặc định để định dạng kiểu chữ:

• `font-family`: Xác định font chữ được sử dụng.
• `font-size`: Xác định kích thước font chữ.
• `font-weight`: Xác định độ đậm của font chữ. `font-weight: bold` làm cho chữ đậm.
• `line-height`: Xác định khoảng cách giữa các dòng chữ.
• `color`: Xác định màu chữ.
• `text-align`: Xác định căn lề chữ. `text-align: left`, `text-align: right`, `text-align: center`, `text-align: justify`.
• `text-decoration`: Thêm hoặc loại bỏ trang trí cho chữ. `text-decoration: underline` gạch chân chữ, `text-decoration: none` loại bỏ gạch chân (thường dùng cho liên kết).

CSS cho Màu Sắc và Hình Nền

Màu sắc và hình nền đóng vai trò quan trọng trong việc tạo ra một giao diện hấp dẫn. WordPress sử dụng CSS để kiểm soát màu sắc và hình nền:

• `color`: Xác định màu chữ, viền, và các phần tử khác.
• `background-color`: Xác định màu nền.
• `background-image`: Xác định hình nền.
• `background-repeat`: Xác định cách hình nền được lặp lại. `background-repeat: repeat`, `background-repeat: no-repeat`, `background-repeat: repeat-x`, `background-repeat: repeat-y`.
• `background-position`: Xác định vị trí của hình nền.
• `background-size`: Xác định kích thước của hình nền. `background-size: cover`, `background-size: contain`.

CSS cho Biểu Mẫu (Forms)

Nếu trang web của bạn có biểu mẫu liên hệ hoặc biểu mẫu đăng ký, bạn cần hiểu cách CSS được sử dụng để định dạng chúng.

• `input[type=”text”]`, `input[type=”email”]`, `textarea`: Các selector CSS này được sử dụng để định dạng các trường nhập liệu văn bản, email và textarea.
• `button`, `input[type=”submit”]`: Các selector CSS này được sử dụng để định dạng các nút.
• `border`: Xác định đường viền xung quanh các trường nhập liệu và nút.
• `border-radius`: Tạo các góc bo tròn cho các trường nhập liệu và nút.
• `padding`: Tạo khoảng cách giữa nội dung và đường viền của các trường nhập liệu và nút.

CSS cho Menu Điều Hướng

Menu điều hướng là một phần quan trọng của trải nghiệm người dùng. WordPress sử dụng CSS để định dạng menu điều hướng:

• `.menu`, `.main-navigation`: Các lớp CSS này được sử dụng để container chứa menu.
• `ul`, `li`, `a`: Các phần tử HTML này được sử dụng để tạo cấu trúc menu.
• `display: inline-block`: Được sử dụng để hiển thị các mục menu trên cùng một hàng.
• `padding`: Tạo khoảng cách xung quanh các mục menu.
• `text-decoration: none`: Loại bỏ gạch chân khỏi các liên kết menu.

Sử Dụng DevTools của Trình Duyệt để Kiểm Tra CSS

Một trong những công cụ hữu ích nhất để tìm hiểu CSS mặc định của WordPress là DevTools (Công cụ dành cho nhà phát triển) của trình duyệt web. Bạn có thể sử dụng DevTools để:

• Kiểm tra các phần tử HTML và xem CSS nào đang được áp dụng cho chúng.
• Chỉnh sửa CSS trực tiếp trong trình duyệt và xem các thay đổi được áp dụng ngay lập tức.
• Tìm các lớp CSS được sử dụng bởi WordPress.

Cách Ghi Đè CSS Mặc Định của WordPress

Có một số cách để ghi đè (override) CSS mặc định của WordPress:

1. Sử dụng Child Theme: Đây là cách được khuyến nghị. Tạo một child theme (theme con) cho theme hiện tại của bạn và ghi đè các CSS trong file `style.css` của child theme. Điều này giúp bạn bảo toàn các tùy chỉnh của mình khi theme gốc được cập nhật.
2. Sử dụng Custom CSS trong Theme Customizer: Hầu hết các theme WordPress đều cung cấp một khu vực “Custom CSS” trong Theme Customizer (Tùy biến giao diện). Bạn có thể thêm CSS của mình vào đây, nhưng cách này không được khuyến nghị nếu bạn có nhiều CSS cần tùy chỉnh.
3. Sử dụng Plugin CSS: Có nhiều plugin CSS cho phép bạn thêm CSS vào trang web của mình. Tuy nhiên, việc sử dụng quá nhiều plugin có thể làm chậm trang web của bạn.

Ví Dụ Cụ Thể về Thay Đổi CSS Mặc Định

Giả sử bạn muốn thay đổi màu nền của trang web. Bạn có thể thêm CSS sau vào file `style.css` của child theme:

“`css
body {
background-color: #f0f0f0; /* Màu xám nhạt */
}
“`

Hoặc, nếu bạn muốn thay đổi màu chữ của tiêu đề bài viết, bạn có thể thêm CSS sau:

“`css
.entry-title {
color: #333; /* Màu xám đậm */
}
“`

Những Lưu Ý Quan Trọng Khi Tùy Chỉnh CSS WordPress

* Sử dụng Child Theme: Luôn luôn sử dụng child theme để tránh mất các tùy chỉnh khi theme gốc được cập nhật.
* Hiểu Rõ Selector CSS: Đảm bảo bạn hiểu rõ về các selector CSS (như `.class`, `#id`, `element`) để áp dụng CSS đúng cho các phần tử mong muốn.
* Ưu Tiên CSS: CSS được định nghĩa sau sẽ ghi đè CSS được định nghĩa trước. CSS trong child theme sẽ ghi đè CSS trong theme gốc. CSS inline (trong HTML) có độ ưu tiên cao nhất.
* Sử Dụng DevTools: DevTools là công cụ vô giá để kiểm tra và chỉnh sửa CSS.
* Tối Ưu Hóa CSS: Giữ cho CSS của bạn gọn gàng và tối ưu hóa để cải thiện hiệu suất trang web.
* Kiểm Tra Tính Đáp Ứng (Responsiveness): Đảm bảo rằng các tùy chỉnh CSS của bạn không phá vỡ tính đáp ứng của trang web trên các thiết bị khác nhau.

Kết Luận

Hiểu rõ về CSS mặc định của WordPress là chìa khóa để tùy chỉnh giao diện trang web của bạn một cách hiệu quả. Bằng cách sử dụng cheat sheet này và các công cụ như DevTools, bạn có thể dễ dàng thay đổi bố cục, kiểu chữ, màu sắc và các yếu tố khác của trang web để tạo ra một giao diện độc đáo và chuyên nghiệp. Hãy nhớ sử dụng child theme và kiểm tra kỹ lưỡng các tùy chỉnh của bạn để đảm bảo rằng chúng không gây ra bất kỳ vấn đề nào cho trang web của bạn. Chúc bạn thành công!