Tạo bài viết cùng chuyên mục trong WordPress

WordPress là nền tảng mã nguồn mở để thiết kế web rất thông dụng hiện nay, có nhiều plugin giúp cho người phát triển web thuận tiện hơn trong việc thiết kế. Bên cạnh đó, với những người có kiến thức, kỹ năng và kinh nghiệm lập trình (ngôn ngữ PHP) có thể tùy biến để website được hiệu quả hơn. Một trong những tình huống hay gặp, đó là tạo bài viết liên quan, bài viết cùng chuyên mục trong WordPress.

Hôm nay, xin hướng dẫn cách đơn giản để thực hiện tạo danh mục các bài viết cùng chuyên mục với bài viết đang theo dõi.

Ví dụ cách hiển thị Bài cùng chuyên mục trong moitruongso.com như hình dưới đây:

Để thực hiện, chúng ta sẽ thêm một vài dòng code vào hàm functions.php của child-theme. Cùng với đó là trang trí hiển thị các bài viết bằng việc thêm một số đoạn mã css trong file style.css của child-theme.

Đầu tiên, vào phần quản trị, chọn Giao diện –> Sửa giao diện

Thêm hàm lấy các bài viết cùng chuyên mục vào hàm functions.php

Trước tiên, để ý chọn giao diện để chỉnh sửa là child-theme, cụ thể trong ví dụ này là Flatsome-Child. Tiếp theo chọn “Chức năng của Giao diện” để mở file functions.php

Sau đó, thêm đoạn mã sau vào file functions.php

function BaiVietCungDanhMuc() {
    $output = '';
    if (is_single()) {
      global $post;
      $categories = get_the_category($post->ID);
      if ($categories) {
        $category_ids = array();
        foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
        $args=array(
          'category__in' => $category_ids,
          'post__not_in' => array($post->ID),
          'posts_per_page'=>6,
          'caller_get_posts'=>1
        );
        
        $my_query = new wp_query( $args );
        if( $my_query->have_posts() ):
            $output .= '<div class="relatedcat">';
                $output .= '<h3>Bài cùng chuyên mục:</h3><div class="row related-post">';
                    while ($my_query->have_posts()):$my_query->the_post();
                    $output .= 
                        '<div class="col large-4">
                            <a href="'.get_the_permalink().'" title="'.get_the_title().'">
                                <div class="feature">
                                    <div class="image" style="background-image:url('. get_the_post_thumbnail_url() .');"></div>
                                </div>                            
                            </a>
                            <div class="related-title"><a href="'.get_the_permalink().'" title="'.get_the_title().'">'.get_the_title().'</a></div>
							
                        </div>';
                    endwhile;
                $output .= '</div>';
            $output .= '</div>';
        endif;   //End if.
      wp_reset_query();
    }
    return $output;
  }
}
add_shortcode('BaiVietCungDanhMuc','BaiVietCungDanhMuc');

Sau đó, chọn Cập nhật tập tin để hoàn tất.

Bước tiếp theo, trang trí hiển thị cho phần bài viết liên quan

Để trang trí phần hiển thị bài viết, chúng ta mở file style.css cũng của child-theme và nhập vào đoạn mã sau:

/* tin liên quan */
.feature {
    position: relative;
    overflow: hidden;
	border-radius: 5px;
	border: 1px solid #dedede;
}
.feature::before {
    content: "";
    display: block;
    padding-top: 56.25%;
}
.feature .image {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: 3px;
    background-size: cover;
    background-position: center;
    max-height: 165px;
	border-radius: 5px;
}

.relatedcat h3 {
	border-left: 4px solid #0092ff;
    padding-left: 10px;
    color: black;
}

Ok, chúng ta lưu lại để hoàn tất.

Bước cuối cùng, là phần chèn shortcode vào bài viết để hiển thị danh mục bài viết liên quan.

Các bạn vào Giao diện –> Tùy biến –> Blog –> Blog Single Post.

Tại đây, cuộn thanh scrollbar xuống gần cuối, chèn đoạn shortcode vào phần HTML after blog posts như hình sau:

Clear cache để xem kết quả nhé. Chúc các bạn thành công.