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!