Hiển Thị Bài Viết Liên Quan Bằng Slider

Để bài viết liên quan bằng Slider trong WordPress, bạn có thể sử dụng các phương pháp sau đây. Dưới đây là một cách cơ bản sử dụng HTML, CSS, JS kết hợp với PHP trong WordPress.

Hiển thị bài viết liên quan bằng Slider

Sử dụng Query để lấy bài viết liên quan

Trong WordPress, bạn có thể sử dụng WP_Query để lấy bài viết liên quan dựa trên taxonomy (chẳng hạn như danh mục, thẻ, hoặc custom field).

Thêm đoạn code sau vào file template của bạn (ví dụ: single.php hoặc file template riêng).

<?php
// Lấy danh mục hoặc tag của bài viết hiện tại
$current_tags = wp_get_post_tags(get_the_ID());
$current_categories = get_the_category(get_the_ID());
$tag_ids = array();
$category_ids = array();

if ($current_tags) {
    foreach ($current_tags as $tag) {
        $tag_ids[] = $tag->term_id;
    }
}

if ($current_categories) {
    foreach ($current_categories as $category) {
        $category_ids[] = $category->term_id;
    }
}

// Truy vấn các bài viết liên quan
$args = array(
    'post_type' => 'post',
    'posts_per_page' => 12, // Số bài viết liên quan
    'post__not_in' => array(get_the_ID()), // Loại trừ bài viết hiện tại
    'tag__in' => $tag_ids, // Ưu tiên theo tag
    'category__in' => $category_ids, // Nếu không có tag thì theo category
);

$related_posts = new WP_Query($args);

if ($related_posts->have_posts()) : ?>
<div class="row row-post-relate">
	<div class="large-12 col">
		<h2>Bài viết liên quan</h2>
	    <div class="related-posts-slider">
	        <div class="slider-container">
	            <?php while ($related_posts->have_posts()) : $related_posts->the_post(); ?>
	                <div class="slider-item">
	                    <a href="<?php the_permalink(); ?>">
	                        <?php if (has_post_thumbnail()) : ?>
	                            <div class="thumbnail">
	                                <?php the_post_thumbnail('medium'); ?>
	                            </div>
	                        <?php endif; ?>
	                        <div class="box-text">
	                        	<div class="box-text-top">
	                        		<div class="post-category is-xxsmall op-7 uppercase">
	                        			<?php
											$categories = get_the_category();

											if (!empty($categories)) {
											    foreach ($categories as $category) {
											        echo '<span class="lable-cat">' . esc_html($category->name) . '</span>';
											    }
											} else {
											    echo 'Bài viết không có danh mục nào.';
											}
										?>
	                        		</div>
	                        		<div class="post-meta is-small op-8">
										<?php the_time('M j, Y') ?>
									</div>
	                        	</div>
	                        	<h3 class="related-title"><?php the_title(); ?></h3>
	                        </div>
	                    </a>
	                </div>
	            <?php endwhile; ?>
	        </div>
	        <div class="button-slider">
	        	<button class="button-prev"><i class="fa-solid fa-chevron-left"></i></button>
	        	<button class="button-next"><i class="fa-solid fa-chevron-right"></i></button>
	        </div>
	    </div>
	</div>
</div>
<?php endif; wp_reset_postdata(); ?>

<?php

// Lấy danh mục hoặc tag của bài viết hiện tại

$current_tags = wp_get_post_tags(get_the_ID());

$current_categories = get_the_category(get_the_ID());

$tag_ids = array();

$category_ids = array();

if ($current_tags) {

foreach ($current_tags as $tag) {

$tag_ids[] = $tag->term_id;

}

if ($current_categories) {

foreach ($current_categories as $category) {

$category_ids[] = $category->term_id;

}

// Truy vấn các bài viết liên quan

$args = array(

'post_type' => 'post',

'posts_per_page' => 12, // Số bài viết liên quan

'post__not_in' => array(get_the_ID()), // Loại trừ bài viết hiện tại

'tag__in' => $tag_ids, // Ưu tiên theo tag

'category__in' => $category_ids, // Nếu không có tag thì theo category

);

$related_posts = new WP_Query($args);

if ($related_posts->have_posts()) : ?>

<?php while ($related_posts->have_posts()) : $related_posts->the_post(); ?>

<?php if (has_post_thumbnail()) : ?>

<?php the_post_thumbnail('medium'); ?>

</div>

<?php endif; ?>

<?php

$categories = get_the_category();

if (!empty($categories)) {

foreach ($categories as $category) {

echo '<span class="lable-cat">' . esc_html($category->name) . '</span>';

}

} else {

echo 'Bài viết không có danh mục nào.';

}

</div>

<?php the_time('M j, Y') ?>

</div>

</div>

</a>

</div>

<?php endwhile; ?>

</div>

</div>

<?php endif; wp_reset_postdata(); ?>

Thêm CSS để định dạng slider

Thêm đoạn CSS dưới đây vào file style.css trong theme của bạn:

.related-posts-slider {
	    position: relative;
	    max-width: 1160px;
	    margin: 20px auto;
	    overflow: hidden;
	}

	.slider-container {
	    display: flex;
	    transition: transform 0.5s ease-in-out;
	}

	.slider-item {
	    min-width: 33.33%; /* Hiển thị 3 bài viết mỗi lần */
	    box-sizing: border-box;
	    padding: 10px;
	    text-align: center;
	}

	.slider-item img {
	    width: 100%;
	    height: auto;
	    border-radius: 8px;
	}

	.related-title {
	    margin-top: 10px;
	    font-size: 16px;
	    color: #333;
	}
	.button-slider {
	    text-align: center;
	}
	.button-slider button {
	    position: relative;
	    bottom: 0;
	    transform: translateY(-50%);
	    background-color: rgba(0, 0, 0, 0.5);
	    color: #fff;
	    border: none;
	    cursor: pointer;
	    font-size: 16px;
	    z-index: 10;
	    margin: 0;
	    padding: 0;
	    height: 40px;
	    width: 40px;
	    border-radius: 8px;
	}
	.button-slider button:hover {
	    background-color: rgba(0, 0, 0, 0.7);
	}
	.post-category span.lable-cat {
	    display: none;
	}
	.post-category span.lable-cat:first-child {
	    display: block !important;
	    background: blue;
	    padding: 4px 10px;
	    border-radius: 4px;
	    color: white;
	}
	.box-text-top {
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    margin-bottom: 10px;
	}
	h3.related-title {
	    text-align: left;
	}
	.row-post-relate h2 {
	    border-left: 3px solid;
	    padding-left: 10px;
	}
	.row-post-relate{
		margin-top: 30px;
	}
	@media only screen and (max-width: 48em) {
		.slider-item {
		    min-width: 100%; /* Hiển thị 3 bài viết mỗi lần */
		}
	}

.related-posts-slider {

position: relative;

max-width: 1160px;

margin: 20px auto;

overflow: hidden;

}

.slider-container {

display: flex;

transition: transform 0.5s ease-in-out;

}

.slider-item {

min-width: 33.33%; /* Hiển thị 3 bài viết mỗi lần */

box-sizing: border-box;

padding: 10px;

text-align: center;

}

.slider-item img {

width: 100%;

height: auto;

border-radius: 8px;

}

.related-title {

margin-top: 10px;

font-size: 16px;

color: #333;

}

.button-slider {

text-align: center;

}

.button-slider button {

position: relative;

bottom: 0;

transform: translateY(-50%);

background-color: rgba(0, 0, 0, 0.5);

color: #fff;

border: none;

cursor: pointer;

font-size: 16px;

z-index: 10;

margin: 0;

padding: 0;

height: 40px;

width: 40px;

border-radius: 8px;

}

.button-slider button:hover {

background-color: rgba(0, 0, 0, 0.7);

}

.post-category span.lable-cat {

display: none;

}

.post-category span.lable-cat:first-child {

display: block !important;

background: blue;

padding: 4px 10px;

border-radius: 4px;

color: white;

}

.box-text-top {

display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 10px;

}

h3.related-title {

text-align: left;

}

.row-post-relate h2 {

border-left: 3px solid;

padding-left: 10px;

}

.row-post-relate{

margin-top: 30px;

}

@media only screen and (max-width: 48em) {

.slider-item {

min-width: 100%; /* Hiển thị 3 bài viết mỗi lần */

}

Thêm JavaScript để điều khiển slider

Bạn có thể thêm đoạn JavaScript sau vào file script.js trong theme của bạn hoặc sử dụng wp_enqueue_script để nhúng script:

document.addEventListener("DOMContentLoaded", function () {
    const prevButton = document.querySelector(".button-prev");
    const nextButton = document.querySelector(".button-next");
    const sliderContainer = document.querySelector(".slider-container");
    const sliderItems = document.querySelectorAll(".slider-item");

    let currentIndex = 0;
    let itemsToShow = 3; // Mặc định hiển thị 3 bài viết
    const totalItems = sliderItems.length;

    // Hàm cập nhật số lượng bài viết hiển thị dựa trên kích thước màn hình
    function updateItemsToShow() {
        if (window.innerWidth <= 768) {
            itemsToShow = 1; // Hiển thị 1 bài viết trên mobile
        } else {
            itemsToShow = 3; // Hiển thị 3 bài viết trên desktop
        }
    }

    // Hàm cập nhật vị trí slider
    function updateSlider() {
        const translateX = -currentIndex * (100 / itemsToShow);
        sliderContainer.style.transform = `translateX(${translateX}%)`;
    }

    // Nút Next
    nextButton.addEventListener("click", function () {
        if (currentIndex < totalItems - itemsToShow) {
            currentIndex++;
        } else {
            currentIndex = 0; // Quay lại đầu
        }
        updateSlider();
    });

    // Nút Prev
    prevButton.addEventListener("click", function () {
        if (currentIndex > 0) {
            currentIndex--;
        } else {
            currentIndex = totalItems - itemsToShow; // Quay lại cuối
        }
        updateSlider();
    });

    // Lắng nghe sự thay đổi kích thước màn hình
    window.addEventListener("resize", function () {
        const prevItemsToShow = itemsToShow; // Lưu lại giá trị cũ
        updateItemsToShow();

        // Nếu số lượng bài viết hiển thị thay đổi, reset vị trí slider
        if (itemsToShow !== prevItemsToShow) {
            currentIndex = 0; // Reset index
        }
        updateSlider();
    });

    // Cập nhật ban đầu
    updateItemsToShow();
    updateSlider();
});

document.addEventListener("DOMContentLoaded", function () {

const prevButton = document.querySelector(".button-prev");

const nextButton = document.querySelector(".button-next");

const sliderContainer = document.querySelector(".slider-container");

const sliderItems = document.querySelectorAll(".slider-item");

let currentIndex = 0;

let itemsToShow = 3; // Mặc định hiển thị 3 bài viết

const totalItems = sliderItems.length;

// Hàm cập nhật số lượng bài viết hiển thị dựa trên kích thước màn hình

function updateItemsToShow() {

if (window.innerWidth <= 768) {

itemsToShow = 1; // Hiển thị 1 bài viết trên mobile

} else {

itemsToShow = 3; // Hiển thị 3 bài viết trên desktop

}

// Hàm cập nhật vị trí slider

function updateSlider() {

const translateX = -currentIndex * (100 / itemsToShow);

sliderContainer.style.transform = `translateX(${translateX}%)`;

}

// Nút Next

nextButton.addEventListener("click", function () {

if (currentIndex < totalItems - itemsToShow) {

currentIndex++;

} else {

currentIndex = 0; // Quay lại đầu

}

updateSlider();

});

// Nút Prev

prevButton.addEventListener("click", function () {

if (currentIndex > 0) {

currentIndex--;

} else {

currentIndex = totalItems - itemsToShow; // Quay lại cuối

}

updateSlider();

});

// Lắng nghe sự thay đổi kích thước màn hình

window.addEventListener("resize", function () {

const prevItemsToShow = itemsToShow; // Lưu lại giá trị cũ

updateItemsToShow();

// Nếu số lượng bài viết hiển thị thay đổi, reset vị trí slider

if (itemsToShow !== prevItemsToShow) {

currentIndex = 0; // Reset index

}

updateSlider();

});

// Cập nhật ban đầu

updateItemsToShow();

updateSlider();

});

Xem thêm bài viết khác

Kết quả

Xem thêm: Hiển thị người dùng và bài viết ngẫu nhiên

Khi bạn truy cập vào bài viết, slider bài viết liên quan sẽ xuất hiện với hai nút bấm “Trượt trái” và “Trượt phải” để di chuyển giữa các bài viết.

Bạn có thể tinh chỉnh thêm CSS, JS để phù hợp với giao diện của mình. Nếu cần tích hợp plugin hỗ trợ slider (như Slick Slider hoặc Swiper), mình cũng có thể hướng dẫn!

Theo dỗi tên trên Fanpage và Youtube của mình nhé.

Chúc bạn thành công! Nếu cần thêm tùy chỉnh nào, cứ yêu cầu nhé!