Bài viết liên quan kèm ảnh không cần Plugin cho WordPress

Bài viết liên quan kèm ảnh không cần Plugin cho WordPress: Trong bài viết Cách thêm bài viết liên quan cho WordPress không cần Plugin hôm trước mình đã chia sẻ cho các bạn một đoạn code chia sẻ bài viết liên quan, nhưng trong đó nó không kèm ảnh thumbnail.

Trong bài viết hôm nay mình sẽ chia sẻ cho bạn code bài viết liên quan kèm ảnh không cần Plugin cho Worpdress, để các bạn cài đặt trên Blog của mình nhé.

Bài viết liên quan kèm ảnh không cần Plugin cho WordPress

Đây là mã được chỉnh sửa lại từ giuseart. Ở bài viết gốc, tác giả giới thiệu chèn bài viết liên quan cực đẹp cho trang web dạng 4 cột 2 hàng (css error at mobile).

1. Code PHP cho bài viết liên quan

Với đoạn code php bên dưới các bạn sao chép và dán nó vào single.php nhé, tại đây các bạn tìm nơi mà bạn muốn nó hiển thị nhé. Thông thường người ta thường chèn ở cuối bài viết.

<?php
/*
 * Code hiển thị bài viết liên quan trong cùng 1 category
 */
$categories = get_the_category(get_the_ID());
if ($categories){
    echo '<div class="bai-viet-lien-quan">';
    $category_ids = array();
    foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
    $args=array(
        'category__in' => $category_ids,
        'post__not_in' => array(get_the_ID()),
        'posts_per_page' => 6, // So bai viet dc hien thi
    );
    $my_query = new wp_query($args);
    if( $my_query->have_posts() ):
        echo '<h3>Bài viết cùng chủ đề:</h3>
        <ul class="list-bai-viet">';
        while ($my_query->have_posts()):$my_query->the_post();
            ?>
            <li>
           
            <div class="box-image">
                 <a href="<?php the_permalink() ?>"><?php the_post_thumbnail('large'); ?></a>
            </div>
             <a href="<?php the_permalink() ?>"><h4 class="tieu-de-bai-viet"><?php the_title(); ?></h4>
                        </a>
            </li>
            <?php
        endwhile;
        echo '</ul>';
    endif; wp_reset_query();
    echo '</div>';
}
?>

2. CSS làm đẹp cho bài viết liên quan

Sau khi bạn đã thêm đoạn code kia vào single.php sau đó bạn vào CSS bổ sung và chèn đoạn mã CSS để cho nó thêm đẹp nhé.

A. Code css hiển thị dạng bài viết liên quan cho wordpress 3 cột và 2 hàng:

.bai-viet-lien-quan {
   margin-top: 2em;
	  border-top: 1px solid #EEE;
}
.bai-viet-lien-quan h3 {
    font-size: 19px;
    color: black;
	margin: 20px auto;
    position: relative;
}
.bai-viet-lien-quan ul {
       display: inline-block;
  	margin: 0;
    width: 100%;
}
.bai-viet-lien-quan ul li {
    list-style: none;
    width: 33%;
    color: graytext;
    float: left;
    padding-left: 4px;
    padding-right: 5px;
}
.bai-viet-lien-quan ul li .box-image img {
    height: 120px;
    border-radius: 4px;
    object-fit: cover;
    object-position: center;
}
.bai-viet-lien-quan h4 {
    font-size: 15px;
    color: black;
    line-height: 19px;
    padding-top: 7px;
    height: 64px;
    overflow: hidden;
}
@media only screen and (max-width: 600px) {
  .bai-viet-lien-quan ul li {
    width: 50%;
}
.bai-viet-lien-quan ul li .box-image img {
    height: 90px;
}
  }
}

B. Code css hiển thị bài viết liên quan trong wordpress kiểu 2 cột 3 hàng

.bai-viet-lien-quan {
   margin-top: 2em;
	  border-top: 1px solid #EEE;
}
.bai-viet-lien-quan h3 {
    font-size: 19px;
    color: black;
	margin: 20px auto;
    position: relative;
}
.bai-viet-lien-quan ul {
       display: inline-block;
  	margin: 0;
    width: 100%;
}

.bai-viet-lien-quan ul li {
    color: graytext;
    padding-left: 4px;
    padding-right: 5px;
    list-style: none;
    margin: 0 auto 15px;
    display: block;
    width: 50%;
    position: relative;
    overflow: hidden;
    float: left;
}
.bai-viet-lien-quan ul li .box-image img {
    object-fit: cover;
    object-position: center;
    width: 72px;
    height: 72px;
    padding: 0;
    margin: 0 15px 0 0;
    overflow: hidden;
    float: left;
    display: flex;
    border-radius: 3px;
    align-items: center;
    justify-content: center;
}
.bai-viet-lien-quan h4 {
    font-size: 15px;
    color: black;
    line-height: 19px;
    padding-top: 7px;
    height: 64px;
    overflow: hidden;
}

@media only screen and (max-width: 600px) {
  .bai-viet-lien-quan ul li {
    width: 100%;
}
.bai-viet-lien-quan ul li .box-image img {
    height: 90px;
}
  }
}

Hy vọng với cách tạo bài viết liên quan kèm ảnh không cần Plugin cho WordPress mà BLog thủ thuật máy tính f4vnn vừa chia sẻ sẽ có ích với bạn. Chúc bạn thành công.