Hướng dẫn code function Thêm bài viết liên quan tự động dưới mỗi bài viết (post)

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');

/*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;
}
/*--------*/