4.4/5 - (5 bình chọn)

Hôm nay mình xin chia sẻ code bài viết liên quan cho theme flatsome, không sử dụng plugin. Sau khi dùng code sẽ có thành quả như hình sau

bai viet lien quan khong dung plugin

Chỉ cần copy công thức, bỏ vào functions.php của theme đang dùng là xong nhé.

Code bài viết liên quan hiện dưới cùng bài viết

//code bài viết liên quan theme flatsome
function flatsome_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">
                    <p class="related-post-title">Bài viết liên quan:</p>
                    <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"><a href="<?php echo get_the_permalink(); ?>" title="<?php echo get_the_title(); ?>"><?php echo get_the_title(); ?></a></div>
                            </div>
                        <?php endwhile; ?>
                    </div>
                </div>
                <style>
                    .relatedcat {padding-top: 10px;border-top: 1px solid #e8e8e8;margin-top: 20px;}p.related-post-title {font-size: 18px;font-weight: bold;}.feature {position: relative;overflow: hidden;}.feature::before {content: "";display: block;padding-top: 56.25%;}.feature .image{position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;background-size: cover;background-position: center;}ul.row.related-post li {list-style: none;}.related-title {line-height: 1.3 !important;margin-top: 10px !important;}
                </style>
            <?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_filter('the_content', 'flatsome_related_post');

Code bài viết liên quan hiện sidebar

Mình code theo yêu cầu của 1 bạn, cần bài viết liên quan hiện ở sidebar. Demo như sau:

related post in sidebar

Đoạn code chèn vào functions.php như sau:

// code bài viết liên quan sidebar
function related_flatsome_sidebar() {
    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'=>3,
                'ignore_sticky_posts'=>1
            );
        
            $my_query = new wp_query( $args );
            if( $my_query->have_posts() ) {?>
                <ul class="related-post-sidebar">
                    <?php while ($my_query->have_posts()):$my_query->the_post(); ?>
                        <li class="recent-blog-posts-li">
                            <div class="flex-row recent-blog-posts align-top pt-half pb-half">
                                <div class="flex-col mr-half">
                                    <div class="badge post-date  badge-outline">
                                        <div class="badge-inner bg-fill" style="background: url(<?php echo get_the_post_thumbnail_url();?>); border:0;"></div>
                                    </div>
                                </div>  
                                <div class="flex-col flex-grow">
                                    <a href="<?php echo get_the_permalink(); ?>" title="<?php echo get_the_title(); ?>"><?php echo get_the_title(); ?></a>
                                    <span class="post_comments op-7 block is-xsmall"><a href="<?php echo get_the_permalink(); ?>/#respond"></a></span>
                                </div>
                            </div> 
                        </li>                      
                    <?php endwhile; ?>                    
                </ul>             
                <style>
                    ul.related-post-sidebar li {
                        border-top: 1px solid #ececec;
                        margin-bottom: 0;
                    }
                    ul.related-post-sidebar li:first-child {
                        border-top: none;
                    }
                </style>
            <?php } // end if has post
        } // end if $categories
        $related_post = ob_get_contents();
        ob_end_clean();
        return $related_post;
    } //end if is single post
    else return;
}
add_shortcode('related_flatsome_sidebar','related_flatsome_sidebar');
add_filter( 'widget_text', 'do_shortcode' );

Cách sử dụng: Vào Giao diện -> Widget, kéo wiget tên là HTML vào sidebar mà bạn muốn hiện thị, chèn shortcode [related_flatsome_sidebar] vào ô nội dung và bấm Lưu. Các bạn xem hình bên dưới

related post in sidebar 2

Các bạn muốn trang trí lại thì sửa trong phần css style của đoạn code trên.

Chúc các bạn thêm bài viết liên quan thành công!

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *