Dán code sau vào function.php
function webdy_related_post($content) {
if(is_singular('post')) {
global $post;
ob_start();
$categories = get_the_category($post->ID);
if ($categories) {
$category_ids = array_map(function($category) {
return $category->term_id;
}, $categories);
$args = array(
'category__in' => $category_ids,
'post__not_in' => array($post->ID),
'posts_per_page' => 6,
'ignore_sticky_posts' => 1,
);
$my_query = new WP_Query($args);
if($my_query->have_posts()) {
echo '<div class="relatedcat">';
echo '<h2>Bài viết liên quan</h2>'; // Thêm tiêu đề "Bài viết liên quan"
echo '<div class="row related-post">';
while ($my_query->have_posts()) {
$my_query->the_post();
$thumbnail = get_the_post_thumbnail_url() ?: 'path/to/default-image.jpg'; // Thay bằng ảnh mặc định nếu không có
echo '<div class="col large-4">';
echo '<a href="' . get_the_permalink() . '" title="' . get_the_title() . '">';
echo '<div class="feature"><div class="image" style="background-image:url(' . esc_url($thumbnail) . ');"></div></div>';
echo '</a>';
echo '<div class="related-title post-title"><a href="' . get_the_permalink() . '" title="' . get_the_title() . '">' . get_the_title() . '</a></div>';
echo '<div class="cat-label">' . implode(', ', wp_list_pluck(get_the_category(), 'name')) . '</div>';
echo '</div>';
}
echo '</div></div>';
} else {
echo '<p>No related posts found.</p>';
}
wp_reset_postdata();
}
$related_post = ob_get_clean();
return $content . $related_post;
}
return $content;
}
add_shortcode('webdy_related_post', 'webdy_related_post');
Để hiển thị bài viết liên quan dưới mỗi bài viết, bạn cần chèn đoạn shortcode webdy_related_post vào tệp single.php trong theme WordPress của bạn
<?php
if (function_exists('do_shortcode')) {
echo do_shortcode('[webdy_related_post]');
}
?>
CSS tí
/*CSS bai viet lien quan*/
/* Container chính */
.relatedcat {
margin-top: 40px;
padding: 20px;
background-color: #f9f9f9;
border: 1px solid #e0e0e0;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
/* Tiêu đề phần bài viết liên quan */
.relatedcat h2 {
font-size: 24px;
font-weight: bold;
color: #333;
margin-bottom: 20px;
text-align: center;
text-transform: uppercase;
}
/* Layout dạng lưới */
.related-post {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: space-between;
}
/* Mỗi bài viết */
.related-post .col {
flex: 0 1 calc(33.333% - 20px); /* 3 bài viết trên mỗi hàng */
max-width: calc(33.333% - 20px);
background: #fff;
border-radius: 8px;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.related-post .col:hover {
transform: translateY(-5px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
/* Hình ảnh bài viết */
.related-post .feature .image {
width: 100%;
height: 180px;
background-size: cover;
background-position: center;
}
/* Tiêu đề bài viết */
.related-title {
padding: 15px;
text-align: center;
}
.related-title a {
font-size: 16px;
font-weight: bold;
color: #333;
text-decoration: none;
transition: color 0.3s ease;
}
.related-title a:hover {
color: #0073aa; /* Màu xanh khi hover */
}
/* Danh mục bài viết */
.cat-label {
font-size: 14px;
text-align: center;
color: #666;
margin-bottom: 10px;
font-style: italic;
}
/*--------*/
Chào ! Bạn thấy nội dung này thế nào?





