Bạn đã bao giờ gặp một trang web có mỗi bài viết được định dạng theo một phong cách khác nhau chưa? Một số website có các bài viết được thiết kế với hình nền riêng. Trong khi đó, một số khác lại có cách bố cục khác nhau với các bài viết trong category khác nhau. Nếu bạn muốn tìm hiểu họ làm điều đó như thế nào, bạn đã đến đúng nơi rồi. Trong bài viết này, chúng tôi sẽ hướng dẫn cho bạn cách tạo bố cục riêng cho từng bài viết trên WordPress.
Lưu ý: Hướng dẫn này yêu cầu bạn có một số kiến thức để có thể chèn CSS vào WordPress, đồng thời bạn cũng cần có một số kiến thức cơ bản về CSS, HTML và biết cách sử dụng công cụ Inspect của Chrome.
Tạo bố cục cho các bài viết riêng lẻ trong WordPress
WordPress chèn thêm các CSS class mặc định vào các thành phần trên website của bạn. Một theme WordPress tuân thủ tiêu chuẩn phải được lập trình đúng theo yêu cầu của WordPress với các CSS class bắt buộc cho phần body, widget, menu,….
Một tính năng cốt lõi của WordPress được gọi post_class() được sử dụng bởi các theme để cho WordPress vị trí các CSS class trong bài viết.
Nếu bạn truy cập website của mình và sử dụng công cụ Inspect, bạn sẽ thấy các class mặc định đó được gán vào thân của mỗi post.
Sau đây là danh sách các CSS class được WordPress mặc định chèn thêm
- .post-id
- .post
- .attachment
- .sticky
- .hentry (hAtom microformat pages)
- .category-ID
- .category-name
- .tag-name
- .format-{format-name}
- .type-{post-type-name}
- .has-post-thumbnail
- .post-password-required
- .post-password-protected
Một ví dụ như sau :
<article id="post-412" class="post-412 post type-post status-publish format-standard hentry category-news">
Bạn có thể định dạng cho mỗi bài viết WordPress khác nhau bằng cách sử dụng các CSS class khác nhau.
Ví dụ: nếu bạn muốn định dạng cho một bài viết lẻ, thì bạn có thể sử dụng lớp post-id trong CSS của mình.
.post-412 {
background-color: #FF0303;
color:#FFFFFF;
}
Đừng quên thay đổi post-xxx bằng ID bài viết của bạn.
Hãy xem một ví dụ khác.
Lần này chúng ta sẽ định dạng cho tất cả các bài viết trong một category có tên là news.
Chúng ta có thể làm điều này bằng cách thêm đoạn mã CSS sau vào theme.
.category-news {
font-size: 18px;
font-style: italic;
}
CSS này sẽ có tác dụng với tất cả các bài viết trong category có tên là news
Hàm Post Class
Thông thường các nhà phát triển theme dùng hàm post_class để cho WordPress biết nơi mà nó cần chèn các class dành riêng cho post. Thường thì nó nằm trong thẻ <article>.
Hàm post class không chỉ hỗ trợ các CSS class mặc định của WordPress, nó còn có thể cho phép bạn chèn các class của riêng bạn.
Tùy thuộc vào theme bạn đang dùng, bạn sẽ tìm thấy hàm post_class trong file single.php hoặc trong file content template. Thông thường, đoạn mã sẽ có dạng như sau :
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
Bạn có thể chèn thêm CSS class của riêng mình bằng cách viết lại như sau :
<article id="post-<?php the_ID(); ?>" <?php post_class('longform-article'); ?>>
Nếu bạn muốn chèn thêm nhiều CSS class hơn nữa, bạn có thể gom chúng thành một array và gọi bằng hàm post_class như sau :
<?php
$custom_classes = array(
'longform-article',
'featured-story',
'interactive',
);
?>
<article id="post-<?php the_ID(); ?>" <?php post_class( $custom_classes ); ?>>
Định dạng bài viết khác nhau dựa trên tên người viết
Các CSS class mặc định tạo ra bởi hàm the_posts không bao gồm tên người viết bài.
Nếu ban muốn định dạng các bài viết khác nhau dựa trên tên người viết, bạn sẽ cần chèn tên người viết bài vào phần nội dung dưới dạng một CSS class.
Bạn có thể làm điều này bằng cách sử dụng đoạn mã sau:
<?php $author = get_the_author_meta('user_nicename'); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class( $author ); ?>>
Đoạn mã này sẽ thêm nicename của người viết bài vào CSS class. Nicename là một cái tên được tạo tự động bởi WordPress nhằm mục đích sử dụng trong các URL. Nó không có khoảng trắng, và tất cả các ký tự đều không được viết hoa, rất phù hợp với các quy chuẩn của một CSS class.
Đoạn mã trên sẽ đem lại kết quả như thế này:
<article id="post-412" class="peter post-412 post type-post status-publish format-standard hentry category-news">
Bây giờ bạn có thể sử dụng .peter trong các mã custom CSS của mình để định dạng cho tất cả các bài viết của người viết bài có tên nicename là peter. Ví dụ :
.peter {
background-color:#EEE;
border:1px solid #CCC;
}
Định dạng bài viết dựa trên mức độ phổ biến bằng cách sử dụng bộ đếm comment
Bạn có thể đã từng thấy một số website sử dụng các widget hiển thị các bài viết được ưa thích, đôi khi dựa trên số lượng comment. Trong ví dụ này, chúng tôi sẽ hướng dẫn bạn cách định dạng các bài viết có số lượng comment khác nhau một cách khác nhau.
Đầu tiên chúng ta cần lấy được số lượng bình luận và chèn một class tương ứng với nó.
Để lấy được số lượng comment, bạn cần sử dụng đoạn mã sau trong theme của mình. Đoạn mã này nằm trong WordPress lôp, chính vì vậy bạn có thể chèn nó vào trước thẻ <article>.
<?php
$postid = get_the_ID();
$total_comment_count = wp_count_comments($postid);
$my_comment_count = $total_comment_count->approved;
if ($my_comment_count <10) {
$my_comment_count = 'new';
} elseif ($my_comment_count >= 10 && $my_comment_count <20) {
$my_comment_count = 'emerging';
} elseif ($my_comment_count >= 20) {
$my_comment_count = 'popular';
}
?>
Đoạn mã này sẽ làm nhiệm vụ kiểm tra số lượng comment trong bài viết đang được hiển thị vào gán chúng với một giá trị dựa trên bộ đếm đó. Ví dụ, các bài viết có ít hơn 10 bình luận nhận được một lớp được gọi là new, dưới 20 bình luận được gọi là emerging và trên 20 bình luận đều trở thành popular.
Tiếp theo, bạn cần chèn CSS class này vào hàm post_class.
<article id="post-<?php the_ID(); ?>" <?php post_class( $my_comment_count ); ?>>
Đoạn mã này sẽ chèn thêm các class new, emerging và popular vào tất cả các bài viết dựa trên số lượng bình luận mỗi bài viết có được.
Bạn có thể chèn thêm custom CSS để định dạng từng bài viết dựa trên các class vừa thêm, ví dụ :
.new {border: 1px solid #FFFF00;}
.emerging {border: 1px dashed #FF9933;}
.popular {border: 1px dashed #CC0000;}
Ở đây chúng tôi chỉ định dạng lại đường viền, bạn có thể sử dụng các cách trang trí khác tùy ý.
Định dạng bài viết dựa trên Custom Field
Việc gắn cố định các CSS class trong mã nguồn theme khiến khả năng tùy biến của bạn bị giới hạn. Trong trường hợp bạn muốn mỗi bài post lại có một CSS class khác nhau thì sao?
Với custom field, vấn đề này sẽ được giải quyết.
Trước tiên, bạn cần thêm một custom field vào một bài viết, để bạn có thể test thử cách mà nó hoạt động. Hãy chỉnh sửa một bài viết và cuộn xuống phần custom field.
Hãy điền post-class làm tên custom field và tên của CSS class bạn muốn vào phần Value.
Đừng quên nhấp vào nút Add custom field để thêm custom field và sau đó lưu lại bài viết.
Tiếp theo, tiến hành chỉnh sửa các file mã nguồn theme để hiển thị custom field của bạn dưới dạng post class.
<?php $custom_values = get_post_meta($post->ID, 'post-class'); ?> <article id="post-<?php the_ID(); ?>" <?php post_class( $custom_values ); ?>>
Mã HTML được xuất ra có dạng
<article id="post-412" class="trending post-412 post type-post status-publish format-standard hentry category-uncategorized">
Bây giờ bạn có thể thêm custom CSS để định dạng cho post_class bạn thêm vào bằng custom field :
.trending{
background-color:##ff0000;
}
Các custom field có thể chứa nhiều giá trị. Vì vậy, bạn có thể đồng thời thêm nhiều CSS class vào một custom field.
Có rất nhiều cách để định dạng cho từng bài viết WordPress. Khi có thêm các kỹ năng, bạn sẽ khám phá ra những cách khác để định dạng bài viết dưới các điều kiện khác nhau.
Chúng tôi hy vọng bài viết này đã giúp bạn học được cách định dạng cho từng bài viết khác nhau trên WordPress. Bạn cũng có thể tham khảo thêm danh sách các tips, tricks và hacks hay nhất cho WordPress.
Nếu thích bài viết này, bạn vui lòng đăng ký Kênh YouTube của chúng tôi để xem video hướng dẫn. Bạn cũng có thể tìm thấy chúng tôi trên Twitter và Facebook.