Tạo bài viết liên quan cho website không cần plugin WordPress

Code WordPress 25/07/2022 27/09/2023 In trang này

Bài viết liên quan thường nằm cuối mỗi bài viết con, nó có tác dụng rất lớn giúp giữ chân độc giả ở lại website của bạn, chức năng này giúp giảm tỷ lệ thoát trên website rất tốt mà bất kỳ website nào cũng cần tới. Trong bài viết này Vũ Trụ Số sẽ hướng dẫn bạn cách để thêm bài viết liên quan vào website một cách đơn giản mà không cần dùng tới plugin.

Tạo bài viết liên quan cho website

Giờ bạn hãy vào thư mục chứa theme bạn đang sử dụng tạo 1 thư mục parts sau đó tạo 1 file có tên là relatedposts.php

Giờ bạn hãy mở file single.php lên vào include file relatedposts.php vào bằng get_template_part (Bạn có thể tùy chọn vị trí mà bài viết liên quan sẽ hiện thị nhé.)

<?php get_template_part('parts/relatedposts'); ?>

Giờ bạn chỉ cần code ở file relatedposts.php là ở phần cuối bài viết sẽ hiển thị ra tự động mà thôi.

Tiếp theo bạn có thể hình dung style bài viết liên quan sẽ như thế này.

Bạn cần chuẩn bị sẵn nguyên liệu:

1. Code html tĩnh

Tắt email thông báo “Đã có một lỗi nghiêm trọng trên trang web của bạn”

Cài đặt link ảnh mặc định hay “Liên kết tới” là “Tệp tin đa phương tiện”

Lấy danh mục sản phẩm hiện tại trong WooCommerce

<div class="related-posts-grid">

    <div class="grid-item">

        <a href="http://example.com/example-post">
            <img src="https://via.placeholder.com/310x140" alt="Example alt texr"/>
        </a>

        <h5>
            <a href="http://example.com/example-post">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
        </h5>

    </div>

    <div class="grid-item">

        <a href="http://example.com/example-post">
            <img src="https://via.placeholder.com/310x140" alt="Example alt texr"/>
        </a>

        <h5>
            <a href="http://example.com/example-post">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
        </h5>

    </div>

    <div class="grid-item">

        <a href="http://example.com/example-post">
            <img src="https://via.placeholder.com/310x140" alt="Example alt texr"/>
        </a>

        <h5>
            <a href="http://example.com/example-post">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
        </h5>

    </div>

</div>

2. Code css

.related-posts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 40px;
    max-width: 1000px;
    margin: 60px auto;
}
.related-posts-grid img {
    width: 100%;
    height: auto;
    margin: 0 0 10px 0;
}
.related-posts-grid h5 {
    margin: 0;
}
.related-posts-grid h5 a {
    text-decoration: none;
}

3. Viết câu lệnh với WP_Query để lấy các bài viết cùng chuyên mục và cho hiển thị ra.

<?php
$related_query = new WP_Query(array(
    'post_type' => 'post',
    'category__in' => wp_get_post_categories(get_the_ID()), //lấy các bài viết cùng chuyên mục với bài viết hiện tại
    'post__not_in' => array(get_the_ID()),
    'posts_per_page' => 3, //số bài viết bạn cần hiển thị
    'orderby' => 'date',
));
?>

Giải thích các tham số

post_type: là loại bài viết (post, product …)
category__in: Danh sách các danh mục mà bài viết hiện tại đang nằm trong đó. Sử dụng hàm wp_get_post_categories kết hợp với hàm get_the_ID để lấy một mảng các danh mục được gán cho bài viết hiện tại.
post__not__in: Một mảng các bài đăng để loại trừ khỏi kết quả. Trường hợp này mình sẽ loại bài viết mình đang truy cập khỏi truy vấn
posts_per_page: Số lượng bài viết sẽ hiển thị.
orderby: Cách sắp xếp các bài viết, các bài viết mới nhất sẽ được hiển thị

Giờ bạn có thể ráp phần code tĩnh html và code php có chứa vòng lặp để lấy ra các kết quả như mong muốn.

Truy vấn vòng lặp cơ bản sẽ có có dạng như sau:

<?php if ($related_query->have_posts()) { ?>

    <div class="related-posts-grid">

        <?php while ($related_query->have_posts()) { ?>

            <?php $related_query->the_post(); ?>

            // Vị trí lặp lại

        <?php } ?>

    </div>

    <?php wp_reset_postdata(); ?>

<?php } ?>

Nếu bạn chưa hiểu về vòng lặp trong WordPress bạn có thể đọc tài liệu tại đây

Đoạn code đầy đủ để tạo bài viết liên quan phía dưới đây.

<?php 
$related_query = new WP_Query(array(
	'post_type' => 'post',
	'category__in' => wp_get_post_categories(get_the_ID()),
	'post__not_in' => array(get_the_ID()),
	'posts_per_page' => 3,
	'orderby' => 'date',
));

if ($related_query->have_posts()) { ?>

<div class="related-posts-grid">

	<?php while ($related_query->have_posts()) { ?>

	<?php $related_query->the_post(); ?>

	<div class="grid-item">

		<a href="<?php the_permalink(); ?>">
			<?php the_post_thumbnail('medium'); ?>
		</a>

		<h5>
			<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
		</h5>

	</div>

	<?php } ?>

</div>

<?php wp_reset_postdata(); ?>

<?php } ?>

Đoạn code css bạn hãy cho chùng vào file style.css hoặc cho vào phần tùy biến > css nhé.

Như vậy bạn đã tạo ra danh sách bài viết liên quan cho website WordPress xong rồi, hy vọng bài viết sẽ giúp ích được cho nhiều người, Cảm ơn đã đọc bài viết.