Đối với các themes mặc định hoặc miễn phí thường sẽ hiếm khi có chức năng hiện các bài viết theo chuyên mục (post by category). Thường chỉ có các bài viết mới nhất (recent posts) được hiển thị ngoài trang chính.
Để làm được điều này mà ko cần phải bỏ tiền ra để mua theme. Chúng ta cũng ko nhất thiết phải dùng plugin đối với những chức năng cơ bản như này.
Trong phạm vi bài viết này chúng ta sẽ cùng nhau tạo chức năng bài viết mới theo chuyên mục bằng phương pháp thủ công.
1 Tạo file template hiện danh sách bài viết
Trước tiên vào theme đang sử dụng, tạo một file .php để dễ chỉnh sửa và quản lý sau này. Ví dụ ở đây mình đặt tên là postbycategory.php.
Sau đó copy 2 phần sau theo đúng thứ tự vào file và lưu lại.
Tiêu đề của mỗi phần chuyên mục
<h3 class=""> <a href="<?php echo get_category_link( ID của category ); ?>"><?php echo get_cat_name( ID của category );?></a></h3>Phần này là phần sẽ hiển thị danh sách các bài viết
<?php
$postbycat = new WP_Query(array(
'post_type'=>'post',
'post_status'=>'publish',
'cat' => ID của category,
'orderby' => 'ID',
'order' => 'DESC',
'posts_per_page'=> 5
));
?>
<?php while ($postbycat->have_posts()) : $postbycat->the_post(); ?>
<div class="related-post">
<div class="related-thumb">
<?php if ( has_post_thumbnail() ): ?>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( 'medium_large', [ 'class' => 'related-thumb' ] ); ?></a>
<?php elseif ( get_theme_mod('placeholder') != 'off' ): ?>
<img class="related-thumb" src="<?php echo esc_url( get_template_directory_uri() ); ?>/img/thumb-medium.png" alt="<?php the_title_attribute(); ?>" />
<?php endif; ?>
</div>
<div class="related-category">
<?php
if ( has_category() ) { the_category( ', ' ); }
?>
</div>
<div class="related-inner">
<div class="related-title">
<a href="<?php the_permalink();?>"><?php echo wp_trim_words( get_the_title() , 15 ) ?></a>
</div>
<div class="related-excerpt"><?php echo wp_trim_words( get_the_excerpt() , 40 ) ?></div>
</div>
</div>
<?php endwhile ; wp_reset_query() ;?>Với các đoạn code trên ta cần lưu ý một vài thông số:
- ID của category: số ID của chuyên mục mình cần hiển thị.
Để xem số này ta vào phần Admin CP > chọn Chuyên mục > bấm vào chỉnh sửa sẽ xuất hiện ID trên thanh địa chỉ trình duyệt. Hoặc bạn chỉ cần rê chuột vào chữ Chỉnh sửa, ID sẽ xuất hiện trong link dưới trình duyệt. - ‘posts_per_page’=> 5: Số 5 chính là số bài viết sẽ hiển thị.
get_the_title(): con số phía sau là số từ sẽ hiển thị của tiêu đề, nếu tiêu đề dài hơn sẽ bị ẩn.
get_the_excerpt(): con số phía sau chính là số từ sẽ hiển thị của nội dung xem trước. Tất nhiên bạn nên sửa cho phù hợp với design của mình.
2 Liên kết file đã tạo với trang chính
Bước này sẽ gọi template mình đã tạo bởi file php ở bước 1. Bằng cách mở file index.php trong themes bạn đang sử dụng và chép đoạn code bên dưới vào. Vị trí chèn code thường là đầu trang hoặc bên dưới, sau phần các bài viết mới (recent post).
<?php get_template_part('postbycategory') ?>Lưu ý các file index.php và file postbycategory.php cần phải đặt ngang hàng. Nếu khác thư mục bạn phải sửa đường dẫn của file postbycategory.
3 Viết CSS cho các bài viết
Đây là phần làm đẹp cho danh sách bài viết. Ở đây mình sẽ cung cấp cho các bạn code mẫu của canxem.com. Bạn có thể tùy biến nó như thế nào tùy thích.
Cho PC:
.related-post {position: relative; display:flex; margin-top:20px; border:1px solid rgba(38, 50, 56, 0.3); padding: 20px 30px}
.related-thumb {width:300px;}
.related-inner {margin-left:320px;position: absolute;top:0; min-height:200px;}
.related-title {padding:15px 20px 10px 0; font-size:20px; }
.related-title a {color: #0f161a; font-weight:600;}
.related-title a:hover {color: #088A08}
.related-excerpt {padding:0px 20px 10px 0; margin-top:0px; font-size: 16px}
.related-category {position: absolute; top:10px; left:10px; width: auto; height: auto; padding: 5px 10px 3px 10px;
border-bottom: 1px solid #333; background: #fff; border-radius:3px;
text-transform: uppercase; font-size: 13px; font-weight: 600;}Cho mobile:
@media only screen and (max-width: 820px) {
.related-post{position: relative; display:block; border: 0px; border-bottom: 1px solid #ddd; padding:0px;}
.related-thumb{border-radius: 0px; width:120px; margin-bottom:15px;}
.related-inner{position: absolute; display:block; top:0; margin-left:130px;}
.related-title{padding: 0px; margin-top:-5px; font-size: 17px; font-weight: 400}
.related-excerpt{display:none;}
.related-category{display:none;}
}Do phần css này mình dùng chung với chức năng “các bài viết liên quan” nên tên css có tên related nhé.
4 Tùy biến bài viết đầu tiên khác kiểu với các bài viết còn lại
Để thêm phần “chuyên nghiệp” và đẹp mắt cho blog, ta nên trình bày bài viết đầu (mới nhất) của chuyên mục khác kiểu so với các bài còn lại.
Để làm điều này tên thêm một phần biến i vào để xác định bài viết đầu, nếu i=1 thì sẽ chọn làm bài đầu tiên và gán các CSS riêng cho nó.
Bên dưới là code cho file php ở bước 1, bạn hãy copy tất cả vào file thay thế nội dung cũ là xong.
<h3 class=""> <a href="<?php echo get_category_link( ID của category ); ?>"><?php echo get_cat_name( ID của category );?></a></h3>
<?php
$postbycat = new WP_Query(array(
'post_type'=>'post',
'post_status'=>'publish',
'cat' => ID của category,
'orderby' => 'ID',
'order' => 'DESC',
'posts_per_page'=> 5));
?>
<?php $i=1; while ($postbycat->have_posts()) : $postbycat->the_post(); ?>
<?php if($i==1){ ?>
<div class="related-post-f">
<div class="related-thumb-f">
<?php if ( has_post_thumbnail() ): ?>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( 'medium_large', [ 'class' => 'related-thumb-f' ] ); ?></a>
<?php elseif ( get_theme_mod('placeholder') != 'off' ): ?>
<img class="related-thumb-f" src="<?php echo esc_url( get_template_directory_uri() ); ?>/img/thumb-medium.png" alt="<?php the_title_attribute(); ?>" />
<?php endif; ?>
</div>
<div class="related-category-f">
<?php
if ( has_category() ) { the_category( ', ' ); }
?>
</div>
<div class="related-inner-f">
<div class="related-title-f">
<a href="<?php the_permalink();?>"><?php echo wp_trim_words( get_the_title() , 15 ) ?></a>
</div>
<div class="related-excerpt-f"><?php echo wp_trim_words( get_the_excerpt() , 50 ) ?></div>
</div>
</div>
<?php } else { ?>
<div class="related-post">
<div class="related-thumb">
<?php if ( has_post_thumbnail() ): ?>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( 'medium_large', [ 'class' => 'related-thumb' ] ); ?></a>
<?php elseif ( get_theme_mod('placeholder') != 'off' ): ?>
<img class="related-thumb" src="<?php echo esc_url( get_template_directory_uri() ); ?>/img/thumb-medium.png" alt="<?php the_title_attribute(); ?>" />
<?php endif; ?>
</div>
<div class="related-category">
<?php
if ( has_category() ) { the_category( ', ' ); }
?>
</div>
<div class="related-inner">
<div class="related-title">
<a href="<?php the_permalink();?>"><?php echo wp_trim_words( get_the_title() , 15 ) ?></a>
</div>
<div class="related-excerpt"><?php echo wp_trim_words( get_the_excerpt() , 40 ) ?></div>
</div>
</div>
<?php } ?>
<?php $i++; endwhile ; wp_reset_query() ;?>Vì có thêm trình bày kiểu khác cho bài đầu tiên nên ta cũng phải tạo một phần CSS riêng cho nó. Bên dưới là code mẫu của mình.
.related-post-f {position: relative; display:flex; margin-top:20px; padding: 0px}
.related-thumb-f {width:500px; }
.related-inner-f {margin-left:520px;position: absolute;top:0;}
.related-title-f {font-size:24px; position: absolute; top:0px; left:-520px; width:500px; padding: 5px 15px; background:#000; opacity: 0.7;}
.related-title-f a {color: #fff; font-weight:600;}
.related-title-f a:hover {color: #088A08}
.related-excerpt-f { margin-top:0px; font-size: 17px}
.related-category-f {display:none;}
@media only screen and (max-width: 820px) {
.related-post-f {position: relative; display:flex; margin-top:20px; padding: 0px}
.related-thumb-f {width:500px; }
.related-inner-f {margin-left:520px;position: absolute;top:0;}
.related-title-f {font-size:24px; position: absolute; top:0px; left:-520px; width:500px; padding: 5px 15px; background:#000; opacity: 0.7;}
.related-title-f a {color: #fff; font-weight:600;}
.related-title-f a:hover {color: #088A08}
.related-excerpt-f { margin-top:0px; font-size: 17px}
.related-category-f {display:none;}
}Và cuối cùng là thưởng thức thành quả thôi nào.
Các bạn có gặp trở ngại gì khi thực hiện, hãy để lại bình luận bên dưới.
