Hướng dẫn chèn CSS vào từng trang hoặc bài viết riêng biệt trong WordPress.
Thông thường, khi bạn tùy biến CSS của website WordPress thông qua việc chỉnh sửa trực tiếp trong file theme hay bổ sung thêm code vào mục Addtional CSS trong Customizer thì những tùy biến đó sẽ được áp dụng cho tất cả các trang có trên website. Sẽ thế nào nếu bạn chỉ muốn chèn code CSS vào từng trang hoặc bài viết nhất định. Đây là lúc bạn cần đến sự trợ giúp của các plugin chuyên dụng. Và plugin mà tôi muốn giới thiệu đến các bạn trong bài viết hôm nay là WP Add Custom CSS.
Tham khảo thêm:
- Top 5 plugin miễn phí giúp chỉnh sửa CSS trong WordPress
- Loại bỏ các file CSS mặc định của WooCommerce
Tại sao bạn nên chọn WP Add Custom CSS?
- Hoàn toàn miễn phí.
- Dễ dàng cài đặt và sử dụng.
- Hỗ trợ cả bài viết, trang và các dạng bài viết tùy chỉnh (Custom Post Types).
- Hỗ trợ syntax highlighter giúp bạn chỉnh sửa code một cách trực quan và dễ dàng hơn.
Chèn CSS vào từng trang trong WordPress
1. Để làm được điều này, trước tiên các bạn cần phải cài đặt và kích hoạt plugin WP Add Custom CSS (download).
2. Tiếp theo, truy cập vào Add Custom CSS. Tại đây, các bạn sẽ nhìn thấy một số thiết lập như hình bên dưới.
Trong đó:
- Main CSS: cho phép bạn chèn code CSS để hiển thị trên toàn bộ các trang của website.
- Post Types: cho phép tùy chọn hiển thị tính năng chèn code CSS trên các loại bài viết tùy chỉnh.
- Advanced editor: bật tính năng syntax highlighter. Nếu bạn cảm thấy tính năng này không quá cần thiết thì nên tắt đi cho nhẹ.
Click vào nút Save để lưu lại sau khi thiết lập xong.
3. Mở trình soạn thảo trang hoặc bài viết của bạn lên. Kéo xuống dưới, các bạn sẽ thấy xuất hiện thêm một khung có tên là Custom CSS. Hãy chèn code CSS của bạn vào khung này.
Sau khi bạn xuất bản hoặc cập nhật bài viết/ trang. CSS sẽ tự động được áp dụng cho bài viết/ trang mà bạn vừa chèn code. Thật đơn giản phải không nào? Chúc các bạn thành công!
Bạn biết cách khác đơn giản và hiệu quả hơn giúp chèn CSS vào từng trang hoặc bài viết riêng biệt trong WordPress? Đừng quên chia sẻ nó với chúng tôi thông qua khung bình luận bên dưới.
Nếu bạn thích bài viết này, hãy theo dõi blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất nhé. Cảm ơn rất nhiều. :)
Plugin rất thú vị, mình cài xong nhưng có lẽ không đúng ý mình. Bạn biết plugin nào chỉnh sủa css cho các bài viết nhất định không nhỉ? Mình có khá nhiều bài cần chèn css giống nhau nhưng mỗi lần đổi theme hay chỉnh sửa css thì vẫn làm thủ công từng bài, mất nhiều thời gian.
Bạn thử plugin WP Add Custom CSS xem sao nhé.
Mình cài rồi, hạn chế lắm, chả tùy chỉnh được bài cụ thể nào. Mình mới được 1 bạn trên fb gợi ý plugin Header Footer Code Manager rất đúng ý mình, đơn giản nhưng đầy đủ chức năng cần thiết.
Chỉnh giao diện của web chèn CSS có sao không ad? Mình không rành code nên chỉ chèn CSS được thôi, có sợ bị chồng chéo không ạ?
Bạn chèn CSS tùy biến bằng cách nào nhỉ? Nếu chèn bằng tính năng Additional CSS (CSS bổ sung) trong Customizer hoặc chèn bằng plugin thì nó sẽ ghi đè lên CSS của theme, không lo xung đột nhé.
Mình chỉnh trong phần “CSS bổ sung” của theme bạn ạ. Như vậy có ổn không nhỉ?
Ổn bạn nhé.
em toàn dùng tiện ích HTML trong bài viết rồi thêm vào cặp thẻ style. ko biết có an toàn không bác nhỉ?
An toàn chứ có gì đâu mà không an toàn hả bạn? Nhưng cách đó thường chỉ dùng để định dạng nội dung của bài viết thôi. :)
em cứ tưởng ko chuẩn seo, hihi
Mình nghĩ không vấn đề gì. Ví dụ lúc bạn thêm màu cho chữ thì nó cũng sử dụng thẻ style mà. :P
Mình dùng tinymce để soạn classic. Mình muốn tạo nền màu cho một đoạn text. Nhưng tìm mãi ko thấy nó đâu. Có thể dùng plugin này tạo nền cho đoạn văn bản ko Hiếu? Hay làm thế nào nhỉ
TinyMCE Advanced có tính năng đổ màu nền cho văn bản mà bạn. Bạn vào Settings => Advanced Editor Tools (TinyMCE Advanced) => chọn tab Classic Editor (TinyMCE) => kéo nút Background color trong phần Unused Buttons thả vào thanh công cụ bên trên => Save Changes.
Để mình thử xem. Mình có thấy 2 cái. Một là chuyển màu chữ. Hai là bôi màu lên chữ. Ko thấy chỗ nào chuyển màu cho 1 khung
Tham khảo bài viết này đi bạn. Phải thêm CSS vào sau đó sử dụng thẻ để đóng khung văn bản nhé.
Không biết có hiểu đúng ý bạn không nhưng phần Bảng (Table) có đầy đủ tính năng khung, nền cho văn bản nằm trong khung đấy.