Giới thiệu về tùy chỉnh style cho từng bài viết WordPress

WordPress là một nền tảng quản lý nội dung (CMS) phổ biến, cho phép bạn tạo và quản lý trang web một cách dễ dàng. Mặc dù WordPress cung cấp nhiều chủ đề (themes) đẹp mắt và tùy chỉnh được, đôi khi bạn có thể muốn tùy chỉnh style cho từng bài viết riêng lẻ để tạo sự khác biệt và thu hút người đọc. Bài viết này sẽ hướng dẫn bạn các phương pháp khác nhau để tùy chỉnh style cho từng bài viết trong WordPress một cách chi tiết.

Các phương pháp tùy chỉnh style cho từng bài viết

Có nhiều cách để tùy chỉnh style cho từng bài viết WordPress. Dưới đây là một số phương pháp phổ biến:

• Sử dụng trình chỉnh sửa Gutenberg với các khối (blocks) và tùy chỉnh CSS
• Sử dụng plugin hỗ trợ tùy chỉnh CSS cho từng bài viết
• Chỉnh sửa trực tiếp file template của theme (phương pháp nâng cao)

Sử dụng trình chỉnh sửa Gutenberg và CSS

Gutenberg là trình chỉnh sửa mặc định của WordPress, cho phép bạn tạo bài viết bằng cách sử dụng các khối (blocks). Mỗi khối đại diện cho một phần của nội dung, như đoạn văn, hình ảnh, tiêu đề, v.v. Bạn có thể tùy chỉnh style của từng khối bằng cách sử dụng các tùy chọn có sẵn trong trình chỉnh sửa, hoặc bằng cách thêm CSS tùy chỉnh.

Tùy chỉnh style bằng các tùy chọn của khối

Mỗi khối trong Gutenberg đều có các tùy chọn style riêng. Ví dụ, bạn có thể thay đổi màu sắc, kích thước, font chữ của đoạn văn, hoặc thêm border cho hình ảnh. Để truy cập các tùy chọn này, hãy chọn khối mà bạn muốn tùy chỉnh, và sau đó tìm các tùy chọn trong thanh bên bên phải.

Thêm CSS tùy chỉnh vào khối

Nếu các tùy chọn mặc định không đủ đáp ứng nhu cầu của bạn, bạn có thể thêm CSS tùy chỉnh vào khối. Để làm điều này, hãy chọn khối, mở tab “Nâng cao” trong thanh bên, và nhập CSS của bạn vào ô “CSS class(es) bổ sung”. Sau đó, bạn có thể định nghĩa các style cho class này trong file CSS của theme hoặc trong phần “Tùy chỉnh” của WordPress.

Ví dụ, nếu bạn muốn tạo một đoạn văn có màu xanh lá cây và font chữ lớn hơn, bạn có thể thêm class “custom-paragraph” vào khối đoạn văn và sau đó thêm CSS sau vào file CSS của theme:

.custom-paragraph {
  color: green;
  font-size: 18px;
}
  

Sử dụng plugin hỗ trợ tùy chỉnh CSS cho từng bài viết

Có nhiều plugin cho phép bạn thêm CSS tùy chỉnh vào từng bài viết WordPress. Các plugin này thường cung cấp một ô nhập liệu CSS trong trang chỉnh sửa bài viết, cho phép bạn viết CSS và xem kết quả ngay lập tức. Một số plugin phổ biến bao gồm:

• Simple Custom CSS
• CSS Hero
• Yellow Pencil Visual CSS Style Editor

Ưu điểm của việc sử dụng plugin là bạn không cần phải chỉnh sửa file CSS của theme, điều này giúp bạn tránh làm hỏng trang web nếu bạn mắc lỗi. Ngoài ra, các plugin thường cung cấp giao diện trực quan và dễ sử dụng, giúp bạn dễ dàng tùy chỉnh style cho bài viết.

Ví dụ sử dụng plugin Simple Custom CSS

Sau khi cài đặt và kích hoạt plugin Simple Custom CSS, bạn sẽ thấy một ô nhập liệu CSS mới trong trang chỉnh sửa bài viết. Bạn có thể viết CSS trực tiếp vào ô này và xem kết quả ngay lập tức.

Ví dụ, nếu bạn muốn thay đổi màu nền của bài viết hiện tại, bạn có thể thêm CSS sau vào ô nhập liệu:

body.postid-123 { /* Thay 123 bằng ID của bài viết */
  background-color: #f0f0f0;
}
  

Lưu ý rằng bạn cần phải thay thế “123” bằng ID của bài viết mà bạn muốn tùy chỉnh.

Chỉnh sửa trực tiếp file template của theme

Đây là phương pháp nâng cao, đòi hỏi bạn phải có kiến thức về HTML, CSS và PHP. Phương pháp này cho phép bạn tùy chỉnh style của bài viết một cách linh hoạt nhất, nhưng cũng tiềm ẩn nhiều rủi ro nếu bạn không cẩn thận.

Xác định file template của bài viết

Trước khi bạn có thể chỉnh sửa file template của bài viết, bạn cần phải xác định file nào chịu trách nhiệm hiển thị bài viết. Thông thường, file này là `single.php` hoặc `content.php` trong thư mục theme của bạn. Bạn có thể sử dụng công cụ dành cho nhà phát triển trong trình duyệt để xác định file template được sử dụng.

Thêm CSS inline vào file template

Bạn có thể thêm CSS inline trực tiếp vào file template của bài viết. Ví dụ, nếu bạn muốn thay đổi màu nền của tiêu đề bài viết, bạn có thể thêm style inline vào thẻ `

` như sau:

<h1 style="background-color: #f0f0f0;"></h1>
  

Tuy nhiên, việc sử dụng CSS inline không được khuyến khích vì nó làm cho code của bạn khó đọc và khó bảo trì. Thay vào đó, bạn nên sử dụng class CSS và định nghĩa style cho class đó trong file CSS của theme.

Thêm class CSS dựa trên ID của bài viết

Một cách tốt hơn để tùy chỉnh style cho từng bài viết là thêm class CSS dựa trên ID của bài viết. Điều này cho phép bạn định nghĩa style riêng cho từng bài viết trong file CSS của theme.

Để làm điều này, bạn có thể sử dụng hàm `post_class()` trong file template của bài viết:

<article id="post-" ></article>
  

Hàm `post_class()` sẽ tự động thêm class `postid-123` vào thẻ `

.postid-123 .entry-title {
  color: red;
}