Bạn có từng gặp trang web nào có phong cách khác nhau cho từng bài viết trên blog của họ không? Một số trang web có các bài viết quan trọng được làm nổi bật với nền tảng tùy chỉnh trong khi các bài viết trong mỗi danh mục khác nhau có phong cách riêng biệt. Nếu bạn muốn học cách tạo phong cách riêng cho từng bài viết trong WordPress, thì bạn đang đến đúng nơi. Trong bài viết này, Vietnix sẽ hướng dẫn bạn cách tạo phong cách riêng cho từng bài viết trong WordPress.
Tạo phong cách riêng cho từng bài viết trong WordPress
Lưu ý: Hướng dẫn này yêu cầu bạn thêm CSS tùy chỉnh vào WordPress. Bạn cũng cần phải sử dụng công cụ Kiểm tra – Inspect tool. Một số kiến thức cơ bản về CSS và HTML cũng được yêu cầu.
WordPress thêm các lớp CSS mặc định vào các phần tử khác nhau trên trang web của bạn. Một chủ đề WordPress tiêu chuẩn phải có mã yêu cầu của WordPress để thêm lớp CSS mặc định cho nội dung, bài viết, trang, tiện ích , menu và nhiều thứ khác nữa.
Một function cốt lõi của WordPress được gọi là post_class() được các theme sử dụng để cho WordPress biết nơi thêm các lớp CSS mặc định cho các bài viết.
Nếu bạn truy cập trang web của mình và sử dụng công cụ Kiểm tra (Inspect tool) trong trình duyệt của bạn, bạn sẽ có thể thấy các lớp đó được thêm vào cho từng bài viết.
Dưới đây là các lớp CSS được thêm mặc định dựa trên trang mà người dùng đang xem.
- .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
Ví dụ về đầu ra sẽ như sau:
<article id="post-412" class="post-412 post type-post status-publish format-standard hentry category-news">Bạn có thể tạo phong cách riêng cho mỗi bài viết WordPress bằng cách sử dụng các lớp CSS tương ứng.
Ví dụ, nếu bạn muốn tạo phong cách riêng cho một bài viết cụ thể, bạn có thể sử dụng lớp post-id trong CSS tùy chỉnh của bạn.
.post-412 {
background-color: #FF0303;
color:#FFFFFF;
} Đừng quên thay đổi ID bài viết để phù hợp với bài viết của bạn.
Hãy xem ví dụ khác.
Lần này, chúng ta sẽ tạo phong cách cho tất cả các bài viết thuộc một danh mục cụ thể được gọi là “tin tức”.
Chúng ta có thể làm điều này bằng cách thêm CSS tùy chỉnh sau vào theme của mình:
.category-news {
font-size: 18px;
font-style: italic;
} CSS này sẽ ảnh hưởng đến tất cả các bài viết thuộc danh mục “news”.
Nếu bạn đang tìm kiếm một giải pháp lưu trữ chất lượng cho website WordPress của mình thì hãy tham khảo dịch vụ WordPress Hosting của Vietnix. Được thiết kế chuyên biệt và tối ưu cho nền tảng WordPress, đây là một lựa chọn không thể bỏ qua.
Sử dụng dịch vụ WordPress Hosting, bạn sẽ được tận hưởng nhiều tính năng hấp dẫn, bao gồm cài đặt WordPress chỉ với 1 click, tốc độ tải trang nhanh chóng dưới 1 giây, khu vực thử nghiệm website không giới hạn và hệ thống backup tự động 4 lần mỗi ngày.
Ngoài ra, Vietnix còn cung cấp các dịch vụ hỗ trợ chuyên nghiệp như bảo mật dữ liệu web với SSL, tên miền và email hosting, Firewall anti DDoS,… để giúp cho website của bạn hoạt động hiệu quả và đạt được mục tiêu kinh doanh của mình. Với WordPress Hosting Vietnix, bạn có thể yên tâm về sự ổn định và hiệu suất của website của mình để tập trung vào việc phát triển nội dung hay kinh doanh trên internet. Hãy đăng ký dịch vụ của Vietnix ngay hôm nay để trải nghiệm sự khác biệt.
Chương trình khuyến mãi Mua Hosting Rinh Tên Miền
Hàm Post Class
Nhà phát triển theme sử dụng function post_class để cho WordPress biết nơi để thêm các lớp bài viết. Thông thường, điều này sẽ là trong thẻ <article>.
function post class không chỉ tải các lớp CSS được tạo ra bởi WordPress mặc định, nó còn cho phép bạn thêm các lớp của riêng bạn.
Tùy thuộc vào theme của bạn, bạn sẽ tìm thấy function post_class trong file single.php hoặc trong các file mẫu nội dung. Thông thường, đoạn code sẽ có dạng như sau:
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>Bạn có thể thêm lớp CSS tùy chỉnh của riêng bạn bằng thuộc tính như sau:
<article id="post-<?php the_ID(); ?>" <?php post_class('longform-article'); ?>>Hàm post_class sẽ in ra các lớp CSS mặc định tương ứng cùng với lớp CSS tùy chỉnh của bạn.
Nếu bạn muốn thêm nhiều lớp CSS, bạn có thể xác định chúng dưới dạng một mảng và sau đó gọi chúng trong hàm post_class.
<?php
$custom_classes = array(
'longform-article',
'featured-story',
'interactive',
);
?>
<article id="post-<?php the_ID(); ?>" <?php post_class( $custom_classes ); ?>>Phong cách các bài viết khác nhau dựa trên tác giả
Các lớp CSS mặc định được tạo ra bởi hàm the_posts không bao gồm tên tác giả là một lớp CSS.
Nếu bạn muốn tùy chỉnh phong cách của mỗi bài viết dựa trên tác giả, bạn cần đầu tiên thêm tên tác giả như là một lớp CSS.
Bạn có thể làm điều này bằng cách sử dụng đoạn code sau đây:
<?php $author = get_the_author_meta('user_nicename'); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class( $author ); ?>>Code này sẽ thêm tên thân thiện với URL của người dùng làm một lớp CSS. Tên thân thiện với URL là một tên thân thiện với URL được sử dụng bởi WordPress. Nó không có khoảng trắng, và tất cả các ký tự đều viết thường, điều này làm cho nó hoàn hảo để sử dụng làm một lớp CSS.
Đoạn code trên sẽ cho bạn đầu ra như sau:
<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 CSS tùy chỉnh của bạn để làm cho tất cả các bài viết của tác giả cụ thể này trông khác biệt.
.peter {
background-color:#EEE;
border:1px solid #CCC;
}Phong cách các bài viết dựa trên độ phổ biến sử dụng Comment Count – Tổng số bình luận
Bạn có thể đã thấy các trang web có tiện ích bài viết phổ biến mà đôi khi dựa trên số lượng bình luận. Trong ví dụ này, Vietnix sẽ chỉ cho bạn cách tạo phong cách riêng cho từng bài viết trong WordPress bằng cách sử dụng số lượng bình luận.
Đầu tiên, chúng ta cần lấy số lượng bình luận và gán một lớp (class) cho nó.
Để lấy số lượng bình luận, bạn cần thêm đoạn code sau vào file theme của mình. Đoạn code này nằm trong vòng lặp WordPress, vì vậy bạn có thể thêm nó ngay trước thẻ <article> cũng được.
<?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 code này kiểm tra số lượng bình luận cho bài viết đang hiển thị và gán cho chúng giá trị dựa trên số lượng. Ví dụ, bài viết có ít hơn 10 bình luận sẽ nhận một lớp được gọi là new, nhỏ hơn 20 được gọi là emerging, và bất kỳ bài viết nào có trên 20 bình luận được gọi là popular.
Tiếp theo, bạn cần thêm lớp CSS bình luận vào function post_class.
<article id="post-<?php the_ID(); ?>" <?php post_class( $my_comment_count ); ?>>Điều này sẽ thêm các lớp CSS 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 của mỗi bài viết.
Bạn có thể thêm CSS tùy chỉnh để phong cách các bài viết dựa trên độ phổ biến:
.new {border: 1px solid #FFFF00;}
.emerging {border: 1px dashed #FF9933;}
.popular {border: 1px dashed #CC0000;}Vietnix chỉ đang thêm viền, bạn có thể thêm bất kỳ quy tắc CSS nào bạn muốn.
Phong cách các bài viết dựa trên custom fields
Đặt các lớp CSS cứng vào file theme của bạn giới hạn bạn chỉ có những lớp CSS cụ thể. Nếu bạn muốn quyết định chọn lớp CSS nào sẽ được thêm vào một bài viết khi bạn viết nó, thì với custom fields, bạn có thể thêm các lớp CSS khi bạn viết.
Trước tiên, bạn cần thêm custom fields cho một bài viết, để bạn có thể thử nghiệm. Chỉnh sửa một bài viết và cuộn xuống phần custom fields.
Thêm post-class là tên custom fields, và bất cứ điều gì bạn muốn sử dụng làm lớp CSS vào trường giá trị.
Đừng quên nhấp vào nút “Add custom field” để lưu nó và sau đó lưu bài viết của bạn.
Tiếp theo, chỉnh sửa các file theme của bạn để hiển thị custom fields của bạn dưới dạng lớp bài viết.
<?php $custom_values = get_post_meta($post->ID, 'post-class'); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class( $custom_values ); ?>>Nó sẽ hiển thị code HTML sau đây:
<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 CSS tùy chỉnh để phong cách lớp post_class bạn đã thêm bằng custom fields.
.trending{
background-color:##ff0000;
}Custom fields có thể có nhiều giá trị, vì vậy bạn có thể thêm nhiều lớp CSS bằng cùng một tên.
Có nhiều cách khác nhau để phong cách các bài viết WordPress một cách riêng biệt. Khi kỹ năng của bạn ngày càng phát triển, bạn sẽ tiếp tục khám phá ra cách mới để phong cách các bài viết sử dụng các điều kiện khác nhau.
Để bắt đầu quá trình tối ưu website nhằm đạt hiệu quả chuyển đổi doanh số cao nhất, bạn có thể sử dụng các dịch vụ Hosting WordPress của Vietnix để được hỗ trợ. Khi đăng ký bất cứ gói WordPress Hosting nào, đội ngũ chuyên gia của Vietnix sẽ tư vấn và hỗ trợ bạn trong quá trình tối ưu tốc độ, hiệu suất và giải quyết các vấn đề mà website WordPress đang gặp phải. Vietnix hiểu rằng khách hàng đang tìm kiếm một giải pháp toàn diện và Vietnix đảm bảo rằng bạn sẽ nhận được sự hỗ trợ tốt nhất trong quá trình sử dụng dịch vụ.
Vietnix là một nhà cung cấp giải pháp lưu trữ số và điện toán đám mây hàng đầu tại Việt Nam. Với hơn 11 năm kinh nghiệm, Vietnix đã hỗ trợ hơn 50.000 khách hàng cá nhân, doanh nghiệp và kích hoạt hơn 100.000 dịch vụ. Vietnix tập trung vào phát triển tốc độ, tính ổn định của hạ tầng cùng chất lượng hỗ trợ vượt trội để đảm bảo rằng khách hàng luôn hài lòng trong quá trình sử dụng.
Vì vậy, nếu bạn đang tìm kiếm một giải pháp toàn diện để tối ưu hóa website của mình, hãy đăng ký sử dụng các dịch vụ của Vietnix ngay hôm nay để được hỗ trợ và tư vấn tốt nhất từ đội ngũ chuyên gia. Mọi vấn đề thắc mắc cần tư vấn, quý khách vui lòng liên hệ:
- Địa chỉ: 265 Hồng Lạc, Phường 10, Quận Tân Bình, Thành Phố Hồ Chí Minh.
- Hotline: 1800 1093.
- Email: sales@vietnix.com.vn.
Lời kết
Vietnix hy vọng bài viết này đã giúp bạn tìm hiểu cách phong cách mỗi bài viết WordPress một cách khác biệt. Bạn cũng có thể muốn xem danh sách cách sửa lỗi WordPress cho người mới bắt đầu.
