Shortcode bài viết liên quan theo chuyên mục trong WordPress

Có thể bạn biết shortcode là 1 mã ngắn nên bạn copy chúng và có thể sử dụng ở nhiều nơi rất tiện lợi. Trong bài viết này Vũ Trụ Số có chia sẽ 1 đoạn code ngắn để lấy các bài viết liên quan, hay các bài viết cùng 1 chuyên mục để hiển thị.

Shortcode bài viết liên quan trong WordPress

Để tạo shortcode bài viết liên quan theo chuyên mục WordPress bạn có thể thêm đoạn bên dưới vào file functions.php.

function vutruso_related_posts_shortcode() {
    $args = array(
        'post_type' => 'post',
        'posts_per_page' => '10',
        'post__not_in' => array(get_the_ID()),
        'orderby' => 'rand'
    );
    $i=0;
    $related_posts = new WP_Query($args);
    if ($related_posts->have_posts()) :
        $output = '<ul class="list-top related-posts">';
        while ($related_posts->have_posts()) : $related_posts->the_post();
            $i++;
            $output .= '<li class="related-post"><span class="number">' . $i . '</span>';
            $output .= '<a href="' . get_permalink() . '">' . get_the_title() . '</a>';
            $output .= '</li>';
        endwhile;
        $output .= '</ul>';
        wp_reset_postdata();
    else :
        $output = '';
    endif;
    return $output;
}
add_shortcode('vutruso_related_posts', 'vutruso_related_posts_shortcode');

Giải thích sơ qua đoạn code bên trên

  • post_type Loại bài viết
  • posts_per_page số bài viết cần hiển thị
  • post__not_in loại bài viết hiện tại ra khỏi danh sách bài viết liên quan
  • orderby hiển thị ngẫu nhiên, bạn có thể đặt date để lấy các bài cùng chuyên mục mới đăng

Sau khi thêm code trên vào file functions.php bạn có thể sử dụng shorcode [vutruso_related_posts] để hiện vào nơi cần hiển thị các bài viết liên quan.

Hoặc sử dụng code php dưới đây để cho vào template.

<?php echo do_shorcode('[vutruso_related_posts]'); ?>

Bạn nên css để làm đẹp bài viết liên quan nhé, có thể sử dụng code css dưới đây để style chẳng hạn.

.list-top li{position:relative;padding:10px 0;height:50px;list-style:none}
.list-top span{font-size:18px;color:#fff;background-color:#ccc;width:35px;height:35px;border-radius:100%;text-align:center;line-height:35px;position:absolute;top:50%;transform:translateY(-50%);}
.list-top li:nth-child(2) span{background-color:#d0b07a;}
.list-top li:nth-child(1) span{background-color:#f25630;}
.list-top li:nth-child(3) span{background-color:#decbac;}
.list-top a{font-size:inherit;margin-left:45px;display:block;line-height:23px;text-decoration:none}

Đây là thành quả sau khi bạn thêm code.

Tuỳ theo web của bạn mà có thể chỉnh code lại cho phù hợp nhé, ở code này mình code css cho phù hợp khi đặt ở sidebar, nếu bạn muốn đặt ở cuối bài viết thì css lại để nó hiển thị ngang sẽ đẹp và phù hợp hơn.

Ngoài code thì bạn cũng có thể lên kho plugin của WordPress và tìm kiếm từ khoá như: Related Post để tìm những plugin giúp hiện các bài viết liên quan theo cat hoặc tag được code sẵn.

Cảm ơn đã đọc bài viết.

daotiendung

Tiến Dũng Đào chuyên quản lý, vận hành các dịch vụ website. Anh có nhiều năm kinh nghiệm về VPS, Hosting, technical SEO, CMS. Đặc biệt yêu thích WordPress với hơn 5 năm phát triển theme và plugin. Sở thích của anh là đọc, viết blog, đi du lịch, tập võ và chia sẻ các kiến thức cho mọi người.

Bài viết liên quan