Hôm nay mình sẽ hướng dẫn cho cách bạn cách để chèn một loạt các bài viết liên quan vào giữa bài viết hiện tại nhé.

Các bạn có thể follow theo để được như demo nhé, bạn nào thấy hay thì like bài viết giúp mình nhé. Ngoài ra bạn nào thấy hữu ích thì có thể donate ủng hỗ tinh thần của mình.

Lưu ý: Code dưới đây mình đều viết theo dạng function kể cả CSS, vì vậy các bạn chỉ cần copy vào functions.php là được. Nếu các bạn không thích, các bạn có thể bóc tách CSS và dán nó vào file CSS nhé.

Cách vào file function

Viết function hiển thị các bài viết liên quan

Đầu tiên chúng ta sẽ viết 1 function để có thể hiển thị được các bài viết cùng category với bài viết hiện tại nhé, để có thể viết được function này. Các bạn tìm hiểu giúp mình về WP query.

Đầu tiên sẽ tạo 1 shortcode có tên gọi là [post_pttuan]

function recent_post_by_pttuan(){
    ob_start();
    $cats = wp_get_post_categories( get_the_ID(), array( 'fields' => 'ids' ) );
        $the_query = new WP_Query( array(
            'post_type' => 'post',
            'posts_per_page' => '5',
            'post__not_in' => array(get_the_ID()),
            'tax_query' => array(
                array (
                    'taxonomy' => 'category',
                    'field' => 'term_id',
                    'terms' => $cats,
                )
            ),
        ) );
        if($the_query->have_posts()){
            echo '<div class="pttuan_post_recent_main">';
            echo '<h3 class="pttuan_post_recent_main_title text-center">Bài viết liên quan</h3>';
            echo '<div class="pttuan_post_recent_container">';
            while ( $the_query->have_posts() ):$the_query->the_post();?>
            <div class="pttuan_post_recent_item">
                <a href="<?php echo get_the_permalink();?>">
                <div class="pttuan_post_recent_thumbnail">
                    <?php echo get_the_post_thumbnail();?>
                </div>
                <div class="pttuan_post_recent_title">
                    <?php echo get_the_title();?>
                </div>
                </a>
            </div>
            <?php endwhile;
            echo '</div></div>';
        };
        wp_reset_postdata();
    $list_post = ob_get_contents();
    ob_end_clean();
    return $list_post;
}
add_shortcode('post_pttuan','recent_post_by_pttuan');

Các bạn có thể dán shortcode vào bất kì đâu để nó hiển thị các bài viết liên quan đến bài viết hiện tại.

thật ra thì các bài viết hiển thị ở đây sẽ cùng category, nếu bài viết nhiều category thì nó sẽ lấy nhiều category.

Các bạn chú ý đến cái dòng ‘posts_per_page’ => ‘5’, Các bạn muốn hiển thị mấy bài viết thì sửa số 5 thành bất kì nhé.

Hiển thị bài viết liên quan vào giữa bài post 1 cách tự động

Để chèn ký tự hoặc 1 đoạn văn vào giữa bài post 1 cách tự động thì các bạn sẽ phải can thiệp vào filter của wordpress. Mình đã có viết bài, các bạn có thể tham khảo bài viết này https://pttuan410.com/mot-so-hook-co-ban-cua-theme-flatsome-p-2/ để biết thêm chi tiết.

Để chèn được vào giữa bài viết, cụ thể là mình sẽ chèn vào đoạn thứ 2 của bái viết (Enter 1 lần sẽ là 1 đoạn).

add_filter('the_content', 'contentafter2para');
function contentafter2para($content){
    if(is_single()){
        $pttuan_content = [post_pttuan];
        $after = 2;
        $end = '</p>';
        $content_pttuan = explode($end, $content);
        foreach($content_pttuan as $key => $cont){
            if(trim($cont)) {
                $content_pttuan[$key] .= $end;
            }
            if(($key + 1) == $after){  
                $content_pttuan[$key] .= $pttuan_content;
            }
        }
        $content = implode('', $content_pttuan);
    }
    return $content;    
}

Bạn chú ý đến đoạn $after = 2; giúp mình, nếu bạn mún nó hiển thị ở đoạn thứ 3 thì sửa thành 3 nhé.

Thêm 1 chút CSS cho nó

function css_custom(){;?>
<style type="text/css">
    .pttuan_post_recent_main_title{
        color: #fff;
        font-weight: bolder;
        margin-bottom: 15px;
    }
    .pttuan_post_recent_main{
        background: #1d65d8;
        padding: 10px 5px;
        margin-bottom: 15px;
        border-radius: 5px;
    }
    .pttuan_post_recent_container{
        display: flex;
        justify-content: space-between;
    }
    .pttuan_post_recent_container>*{
        width: 19%;
        background: #fff;
        border-radius: 3px;
    }
    .pttuan_post_recent_thumbnail{
        height: 80px;
        overflow: hidden;
        margin-bottom: 10px;
    }
    .pttuan_post_recent_title{
        font-size: 14px;
        line-height: 1.25;
        padding: 0 5px;
    }
    @media only screen and (max-width: 48em) {
        .pttuan_post_recent_container>*{
            width: 30%;
            margin-right: 10px;
        }
        .pttuan_post_recent_container>*:last-child{
            margin-right: unset;
        }
        .pttuan_post_recent_container{
            overflow-x: scroll;
            flex-flow: unset;
            display: -webkit-box;
        }
        .pttuan_post_recent_thumbnail{
            height: 50px;
            margin-bottom: 5px;
        }
        .pttuan_post_recent_title{
            font-size: 11px;
        }
    }
</style>
<?php }
add_action('wp_footer','css_custom');

Và đây là kết quả:

Hiển thị bài viết liên quan vào giữa bài viết hiện tại

Đẹp xấu như thế nào thì các bạn CSS lại nhé.

Donate ủng hộ tinh thần

Có bất kì câu hỏi nào thì hãy gửi về cho mình nhé, mình sẽ cố gắng giải đáp trong thời gian sớm nhất

Ủng hộ mình một ly cà phê nhé: Vì đầy là động lực để mình có thể giúp đỡ mọi người nhé.

Ủng hộ bằng momo: