Hiển thị bài viết cùng danh mục ở trang chi tiết bài viết trong Flatsome

Bài viết chia sẻ cách thêm đoạn code phù hợp để hiển thị bài viết cùng danh mục ở cuối mỗi bài viết trong website wordpress sử dụng theme Flatsome

Đặt đoạn code sau vào vị trí muốn hiển thị bài viết cùng danh mục

Bài cùng danh mục dạng danh sách

<!--- Bài viết liên quan dạng list --->
<div class="row row-small relatedposts list">
    <div class="col large-12" style="padding-bottom:0;">
        <div class="col-inner relatedlist">
            <div class="title">Bài viết liên quan</div>
            <ul>
            <?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){
                $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() ):
                    while ($my_query->have_posts()):$my_query->the_post();
                        ?>
                        <li><a href="<?php the_permalink() ?>" class="titlea" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>
                        <?php
                    endwhile;
                endif; wp_reset_query();
            }
            ?>
            </ul>
        </div>
    </div>
</div>

Kết quả:

Bài viết cùng danh mục dạng Grid

<!--- Bài viết liên quan dạng Grid --->
<div class="row row-small relatedposts align-equal">
    <div class="col large-12" style="padding-bottom:0;">
        <div class="col-inner">
            <div class="title">Bài viết liên quan</div>
        </div>
    </div>
    <?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){
        $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() ):
            while ($my_query->have_posts()):$my_query->the_post();
                ?>
                <div class="col  small-12 postgrid">
                    <div class="col-inner box-shadow-2 box-shadow-3-hover">
                        <div class="box has-hover box-text-bottom">
                            <div class="box-image">
                                <div class="image-cover" style="padding-top: 56.25;">
                                    <a href="<?php the_permalink(); ?>" title="">
                                        <?php the_post_thumbnail(); ?>
                                    </a>
                                    <div class="overlay" style="background-color:rgb(0,0,0,0)"></div>						
                                </div>
                            </div>
                            <div class="box-text text-left" style="">
                                <div class="box-text-inner">
                                        <p style="margin-bottom:5px"><a href="<?php the_permalink() ?>" class="titlea" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></p>
                                        <p class="postdate"><i class="fa fa-calendar"></i><?php echo get_the_date() ?></p>
                                        <div class="homeexpert"><?php  the_excerpt(); ?></div>
                                        <a href="<?php the_permalink(); ?>" class="readmore">Xem thêm</a>
                                </div>
                            </div>
                        </div>
                    </div>	
                </div>
                <?php
            endwhile;
        endif; wp_reset_query();
    }
    ?>
</div>

Kết quả:

Bài cùng danh mục dạng slider

<!--- Bài viết liên quan dạng Slider --->
<div class="row row-small relatedposts align-equal">
    <div class="col large-12" style="padding-bottom:0;">
        <div class="col-inner">
            <div class="title">Bài viết liên quan</div>
        </div>
    </div>
</div>
<div class="relatedslider row row-small row-slider slider slider-nav-simple slider-nav-large slider-nav-dark slider-style-normal slider-show-nav"  data-flickity-options='{"imagesLoaded": true, "groupCells": "100%", "dragThreshold" : 5, "cellAlign": "left","wrapAround": true,"prevNextButtons": false,"percentPosition": true,"pageDots": true, "rightToLeft": true, "autoPlay" : false}'>
    <?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){
        $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() ):
            while ($my_query->have_posts()):$my_query->the_post();
                ?>
                <div class="col  small-12 postgrid">
                    <div class="col-inner box-shadow-2 box-shadow-3-hover">
                        <div class="box has-hover box-text-bottom">
                            <div class="box-image">
                                <div class="image-cover" style="padding-top: 56.25;">
                                    <a href="<?php the_permalink(); ?>" title="">
                                        <?php the_post_thumbnail(); ?>
                                    </a>
                                    <div class="overlay" style="background-color:rgb(0,0,0,0)"></div>						
                                </div>
                            </div>
                            <div class="box-text text-left" style="">
                                <div class="box-text-inner">
                                        <p style="margin-bottom:5px"><a href="<?php the_permalink() ?>" class="titlea" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></p>
                                        <p class="postdate"><i class="fa fa-calendar"></i><?php echo get_the_date() ?></p>
                                        <div class="homeexpert"><?php  the_excerpt(); ?></div>
                                        <a href="<?php the_permalink(); ?>" class="readmore">Xem thêm</a>
                                </div>
                            </div>
                        </div>
                    </div>	
                </div>
                <?php
            endwhile;
        endif; wp_reset_query();
    }
    ?>
</div>

Kết quả:

Thêm CSS để làm đẹp cho các cách hiển thị này. Chúc bạn thành công!

Về tôi

Minh Anh

Xin chia sẻ những phần việc nhỏ ở các dự án đã triển khai để tiện sử dụng lại ở những dự án khác, giúp rút ngắn thời gian hoàn thành sản phẩm, giảm chi phí cho đối tác và khách hàng.

0 0 đánh giá

Đánh giá bài viết

Theo dõi

0 Góp ý

Cũ nhất

Mới nhất Được bỏ phiếu nhiều nhất

Phản hồi nội tuyến

Xem tất cả bình luận