Cách tạo giao diện khác nhau cho từng category trong WordPress

Đã bao giờ bạn vào một website WordPress và thấy các bài viết ở các chuyên mục (category) khác nhau lại có màu nền, phông chữ, màu chữ, … khác nhau chưa? Ví dụ như trong một trang blog về âm nhạc, các bài viết ở category “Blue” sẽ có màu nền tím mộng mơ, còn các bài viết thuộc category “Rock” lại có một màu nền với sắc đen huyền bí. Đây là một điểm nhấn khá thú vị trong thiết kế, giúp cho website của bạn trở nên ấn tượng hơn trong mắt của người xem.

Hôm nay, mình sẽ hướng dẫn các bạn các bước đơn giản để thay đổi giao diện của bài viết theo category, cụ thể là màu nền nhé!

Cách thay đổi CSS cho từng category

Để thay đổi màu nền của bài viết theo category, chúng ta cần tạo một custom field cho category (để chọn màu), sau đó dùng code để hiển thị màu nền được chọn ra ngoài front end.

Cũng với phương pháp trên, bạn có thể thay đổi các thuộc tính CSS khác cho bất cứ category nào bạn muốn, ví dụ như:

  • Thêm một class vào thẻ body (thông qua filter body_class) để tùy biến CSS cho toàn trang tiện hơn
  • Thay đổi màu sắc tiêu đề bài viết
  • Thay đổi cỡ chữ
  • Thay đổi vị trí hoặc ẩn sidebar

Phương pháp này còn có rất nhiều ứng dụng khác nữa, tuỳ vào óc sáng tạo của bạn. Ý tưởng chính ở đây là tạo một settings cho category, sau đó lấy / sử dụng settings này cho các bài viết trong category đó.

Lưu ý: nếu bạn có sẵn nhiều layout khác nhau và muốn chọn một layout cho một bài viết hay một category riêng, bạn cũng dùng cách tương tự như trên. Tuy nhiên, thay vì dùng CSS thì bạn sẽ cần sử dụng code PHP và tạo một class để ghi nhận bài viết / category nào đang được chọn sử dụng layout nào.

Quay lại với việc thay đổi màu nền cho tất cả các bài viết trong một category, cách làm chi tiết như sau:

Chuẩn bị

Để thay đổi màu nền của bài viết theo category, bạn cần các plugin sau:

  • Core plugin Meta Box (miễn phí): một framework giúp bạn tạo custom field đơn giản và nhanh chóng hơn. Plugin này có sẵn trên wordpress.org.
  • Meta Box Builder (trả phí): là một extension của Meta Box, plugin này hỗ trợ bạn tạo custom field với giao diện trực quan ngay trong backend của website WordPress mà không cần code.
  • MB Term Meta (trả phí): cũng là một extension của Meta Box giúp bạn thêm custom field vào các taxonomy term như category và tag.

Sau khi đã cài đặt và kích hoạt tất cả các plugin kể trên, hãy làm theo các bước sau để thay đổi màu nền của bài viết theo category:

Bước 1: Tạo custom field cho category

Đầu tiên, vào Meta Box > Custom Fields > Add new để thêm một custom field mới:

Tạo custom field mới cho category.

Mình đã tạo một field Background Color với field type là Color Picker và các thông tin như sau:

Field type để tùy chỉnh màu sắc giao diện là Color Picker.

Tiếp theo, chúng ta cần hiển thị custom field này lên category bằng cách chuyển sang tab Settings và chọn LocationTaxonomy > Category:

Vào Settings, chọn Location để hiển thị custom field vừa tạo cho category mình cần.

Giờ hãy vào chỉnh sửa một category bất kỳ bằng cách vào Posts > Categories > Chọn category > Edit:

Chọn chỉnh sửa một category bất kỳ bạn muốn.

Kéo xuống dưới cùng, bạn sẽ thấy custom field Background Color mà chúng ta vừa tạo hiển thị ra như sau:

Trong phần chỉnh sửa category, bạn sẽ thấy custom field Background Color bạn vừa tạo và có thể bắt đầu tùy chỉnh được luôn.

Bước 2: Thay đổi màu nền cho bài viết

Để thay đổi màu nền cho category, hãy thêm đoạn code sau vào file functions.php của theme:

function estar_child_output_frontend() {
	If ( ! is_single() ) {
		return;
	}
	$categories       = get_the_category();
	$background_color = get_term_meta( $categories[0]->term_id, 'background_color_taxonomy', true );
	if ( ! $background_color ) {
		return;
	}
	echo '<style>
            .single-post {
                background-color: ' . $background_color . ';
            }
        <style>';
}
add_action( 'wp_head', 'estar_child_output_frontend' );

Trong đó:

  • eStar là theme mà mình đang sử dụng. Bạn có thể tải theme miễn phí này tại đây;
  • get_the_category(): hàm này sẽ trả về một mảng dữ liệu là danh sách tất cả các category mà bài viết đang có;
  • get_term_meta( $categories[0]->term_id, 'background_color_taxonomy', true ): dùng hàm get_term_meta() lấy giá trị của custom field ở trong các category được trả về ở hàm get_the_category(), với ID của custom field là 'background_color_taxonomy' (tạo ở bước 1);
  • 'wp_head': hook này sẽ in dữ liệu vào thẻ head ở front end của website WordPress.

Giờ là lúc chúng ta kiểm tra thành quả. Mình sẽ thử đổi màu nền bài viết trong một category là Breakfast:

Chọn category Breakfast để chỉnh sửa

Tiếp theo, chúng ta chỉ cần bấm Select Color trong phần Background Color, chọn một màu trông ưng ý nhất rồi bấm Update là xong:

Lựa chọn màu sắc mong muốn trong phần chọn màu của custom field

Đây là bài viết trong category Breakfast trước khi mình đổi màu nền:

Màu nền của bài viết trước khi được thay đổi

Còn đây là kết quả sau khi mình đổi màu nền:

Sau khi tùy chỉnh màu sắc background, bài viết của mình có diện mạo mới hoàn toàn.

Tada! Giờ thì thực khách đã có thể thưởng thức món ăn trên tông nền xanh thanh lịch rồi!

Lời cuối

Chỉ với vài thao tác đơn giản, kết hợp với một chút óc thẩm mỹ là bạn có thể hô biến các bài viết này trở nên nổi bật, hấp dẫn hơn hẳn các bài viết trong category khác trên website rồi đấy! Chắc chắn người đọc sẽ vô cùng ấn tượng với trang blog / website của bạn – quả một mẹo khá hay cho việc giúp blog trở nên thành công hơn, đúng không nào? Lưu ý là trong khi chọn màu sắc, font chữ cho từng category, hãy lựa chọn cẩn thận sao cho trang web đẹp và hài hòa nhé.

Để lại bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *