// Code tạo shortcode bài viết liên quan cho Webdy
function webdy_related_post($content) {
    if(is_singular('post')) {
        global $post;
        ob_start();
        $categories = get_the_category($post->ID);
        if ($categories) {
            $category_ids = array();
            foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
            $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() ) {?>
                <div class="relatedcat">
                    <div class="row related-post">
                        <?php while ($my_query->have_posts()):$my_query->the_post(); ?>
                            <div class="col large-4">
                                <a href="<?php echo get_the_permalink(); ?>" title="<?php echo get_the_title(); ?>">
                                    <div class="feature">
                                        <div class="image" style="background-image:url(<?php echo get_the_post_thumbnail_url();?>);"></div>
                                    </div>                            
                                </a>
<div class="related-title post-title">
<a href="<?php echo get_the_permalink(); ?>" title="<?php echo get_the_title(); ?>"><?php echo get_the_title(); ?></a>
</div>
<div class='cat-label'>
<?php $post = get_post();
$cats = array();
foreach (get_the_category($post_id) as $c) {
$cat = get_category($c);
array_push($cats, $cat->name);
}


if (sizeOf($cats) > 0) {
$post_categories = implode(', ', $cats);
}
echo $post_categories;
?>
</div>
                            </div>
                        <?php endwhile; ?>
                    </div>
                </div>
            <?php } // end if has post
        } // end if $categories
        $related_post = ob_get_contents();
        ob_end_clean();
        return $content.$related_post;
    } //end if is single post
    else return $content;
}
add_shortcode('webdy_related_post', 'webdy_related_post');

Trong trình soạn thảo bài viết, nơi bạn muốn hiển thị bài viết liên quan, chỉ cần thêm shortcode sau vào nội dung bài viết:

[webdy_related_post]

Thêm tí CSS cho đẹp

Thêm CSS vào WordPress:

• Cách 1: Thêm CSS vào style.css của theme.
  • Truy cập Giao diện > Chỉnh sửa mã > style.css và dán mã vào cuối tệp.
• Cách 2: Thêm CSS vào Tuỳ chỉnh > CSS bổ sung.
  • Truy cập Giao diện > Tuỳ chỉnh > CSS bổ sung và dán mã CSS vào đó. Sau đó nhấn Lưu thay đổi.

/* Style cho khung container bài viết liên quan */
.relatedcat {
    margin-top: 40px;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
}


/* Cấu trúc các bài viết liên quan */
.related-post {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}


/* Style cho mỗi bài viết liên quan */
.related-post .col {
    flex: 1 1 calc(33.333% - 20px); /* 3 bài viết mỗi hàng, có khoảng cách giữa các bài */
    margin-bottom: 20px;
}


/* Style cho hình ảnh của bài viết liên quan */
.related-post .col .image {
    background-size: cover;
    background-position: center;
    height: 200px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}


/* Hiệu ứng hover cho hình ảnh */
.related-post .col .image:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}


/* Style cho tiêu đề bài viết */
.related-post .related-title {
    margin-top: 10px;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    text-align: center;
}


.related-post .related-title a {
    text-decoration: none;
    color: #333;
    transition: color 0.3s ease;
}


/* Hiệu ứng hover cho tiêu đề bài viết */
.related-post .related-title a:hover {
    color: #0073e6;
}


/* Style cho nhãn danh mục (category) */
.related-post .cat-label {
    font-size: 14px;
    color: #777;
    text-align: center;
    margin-top: 5px;
}


/* Các bài viết liên quan cho màn hình nhỏ hơn (Responsive Design) */
@media (max-width: 768px) {
    .related-post .col {
        flex: 1 1 calc(50% - 20px); /* 2 bài viết mỗi hàng */
    }
}


@media (max-width: 480px) {
    .related-post .col {
        flex: 1 1 100%; /* 1 bài viết mỗi hàng */
    }
}