Code bài viết liên quan wordpress (related post without plugin)

Mình dùng blogger nhiều, thấy blogger có rất nhiều style code related post đẹp nhưng wordpress thì hầu như rất ít, do đó mình quyết định sưu tầm các đoạn code bài viết liên quan wordpress và sửa lại một chút cho đẹp và dễ nhìn, cố gắng tối ưu để dùng sau này.

Hiện tại cho rất nhiều giao diện wordpress đẹp miễn phí, tuy nhiên chúng hầu như không có tiện ích bài viết liên quan, chính vì thế mà mình chia sẻ một số code related post without plugin dùng tốt và được mình css lại khá đẹp cho các bạn tiện dùng.

code related post wordpress

Các code wordpress bài viết liên quan (PHP) được viết bởi các tác giả khác nhau, mình chỉ CSS lại theo ý mình mà thôi.

Code related post wordpress không có thumbnail

Nếu bạn tìm code hiển thị bài viết liên quan trong wordpress thì chắc chắn không thể không biết đến các đoạn code của levantoan. Dưới đây là bài viết Related Posts không có thumbnail được chia sẻ bởi anh ấy, mình chỉ css thêm.

Code related post wordpress này khá cơ bản nhưng được rất nhiều người sử dụng.

hiển thị bài viết liên quan trong wordpress không có hình ảnh
Ảnh minh họa khi hoàn thành
<?php
/*
 * Code hiển thị bài viết liên quan trong cùng 1 category
 * Code by levantoan.com
 */
$categories = get_the_category(get_the_ID());
if ($categories){
    echo '<div class="relatedcat">';
    $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' => 5, // So bai viet dc hien thi
    );
    $my_query = new wp_query($args);
    if( $my_query->have_posts() ):
        echo '<h3>Các tin khác</h3><ul>';
        while ($my_query->have_posts()):$my_query->the_post();
            ?>
            <li><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>
            <?php
        endwhile;
        echo '</ul>';
    endif; wp_reset_query();
    echo '</div>';
}
?>

Code css

.relatedcat {
    margin: 20px 0 0;
    background: #fff;
    border: 1px solid #bce8f1;
    border-radius: 4px;
    padding: 10px;
}
.relatedcat h3 {
    color: #fff;
    margin: -10px -10px 10px;
    font-size: 21px;
    background: #5d86dc;
    padding: 10px;
    font-weight: 500;
    line-height: normal;
}
.relatedcat ul {
    margin-left: 0;
}
.relatedcat ul li {
    list-style-type: none;
    color: #222;
    font-size: 16px;
    line-height: 24px;
    overflow: hidden;
    border-bottom: 1px dashed #ccc;
    padding: 6px 0;
}
.relatedcat ul li a {
    color: #222;
}

Chèn bài viết liên quan cực đẹp kèm thumbnail

Dạng 3 cột và 2 hàng

Đây là code được mình edit 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 website dạng 4 cột 2 hàng (bị lỗi css ở mobile) , tuy nhiên mình không thích nên chỉnh lại 3 cột và 2 hàng, code ở bên dưới mình đã sửa luôn lỗi css ở mobile rồi.
Các bạn tìm file single.php rồi chèn đoạn code sau vào nhé:

<?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>';
}
?>

Các bạn xem các kiểu style bài viết liên quan nào thì copy đoạn CSS cho vào theme là xong.

code bài viết liên quan wordpress hạng 3 hàng
Hiển thị bài viết liên quan trong wordpress kèm ảnh thumbnail

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;
}
  }
}
related post wordpress without plugin 2 hàng

Ngoài ra mình cũng tùy biến thêm css hiển thị bài viết liên quan trong wordpress kiểu 2 cột ,3 hàng cho bạn nào thích:

.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;
}
  }
}

Một kiểu hiển thị bài related post tiêu đề bài viết đề lên hình ảnh. Với kiểu bài viết này các bạn chỉ nên để hiện kiểu 1 hàng và 3 cột sẽ đẹp nhất. Tìm ‘posts_per_page’ => 6 và sửa số 6 thành số 3 và tận hưởng.

hiển thị bài related post tiêu đề bài viết đề lên hình ảnh
Hiển thị bài kiểu bài viết liên quan tiêu đề bài viết đề lên hình ảnh
.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;
    color: graytext;
    margin: 6px 6px 6px;
    float: left;
    width: 31.32%;
    position: relative;
}
.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 {
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 12px;
    line-height: 21px;
    overflow: hidden;
    width: 90%;
    bottom: 0;
    padding: 0px 0 10px;
    text-align: left;
    position: absolute;
}
@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: 100px;
}
  }
}

@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: 100px;
}
  }
}

Cám ơn các tác giả đã share những đoạn code related post without plugin tuyệt vời. Nhờ những code bài viết liên quan wordpress này mà blog/website được làm từ core thêm đẹp hơn.

Xem thêm: các tips wordpress blog.

Việc tìm hiểu trước thông tin về doanh nghiệp hay sản phẩm, dịch vụ cần mua sẽ giúp bạn có được lựa chọn tối ưu trong giao dịch. Danh bạ Top 10 công ty uy tín tại Việt Nam 2021. Các công ty chất lượng và uy tín được đánh giá và xếp hạng theo tỉnh thành giúp quý đối tác tìm kiếm công ty mình cần dễ dàng và nhanh chóng. Đánh giá, xếp hạng hàng ngàn công ty, sản phẩm và dịch vụ tốt nhất Việt Nam trên trang Top Ten VietNam chẳng hạn như review cong ty chung khoan kis viet nam, review khoa hoc tieng anh online monkey junior rất nhiều bài hay và thông tin hữu ích về doanh nghiệp và sản phẩm giúp bạn có được lựa chọn đúng trong kinh doanh và tiêu dùng.

DMCA.com Protection Status