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

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;
}
  }
}
tao bai viet lien quan kem anh thumbnail cho wordpress 1
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;
}
  }
}
tao bai viet lien quan kem anh thumbnail cho wordpress 1 1

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.

Bài Viết Cùng Chuyên Mục
Game & Apk Mod Acapella Việt Template BLogspot Liên Kết URL
Mẹo nhỏ: Để tìm kiếm chính xác thủ thuật của f4vnn.com, hãy search trên Google với cú pháp: "Từ khóa" + "f4vnn". (Ví dụ: code đóng khung html f4vnn). Tìm kiếm ngay

Welcome to f4vnn.com: là một web/blog cá nhân, chủ yếu chia sẻ kiến thức về máy tính, internet, công nghệ và thủ thuật WordPress, Blogger... Mình hi vọng một điều là: Tại đây, các bạn có thể học thêm được rất nhiều kinh nghiệm và thủ thuật khi sử dụng máy tính ^_^ !

ĐỪNG QUÊN ĐĂNG KÝ FANPAGE ĐỂ NHẬN THỦ THUẬT MỚI NHẤT NHÉ!

Blog Tips f4vnn

Là người yêu thích công nghệ và công việc cũng làm làm trong ngành công nghệ, nên mình muốn chia sẻ những gì mà mình biết và từng tìm hiểu qua muốn chia sẻ cho mọi người cùng sở thích.

  Bài viết cùng chuyên mục

  • Thêm box search trên menu cho WordPress không cần Plugin
  • SoraSoft giao diện chia sẻ phần mềm cho Blogger
  • Hướng dẫn cách cài đặt WordPress trên Fastpanel
  • 3 cách thêm CSS tùy chỉnh vào trang web WordPress
  • ChickPro Blogger Template giao diện blogger thời trang