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é.
-
Làm ngay thôi nào
-
Viết function hiển thị các bài viết liên quan
-
Hiển thị bài viết liên quan vào giữa bài post 1 cách tự động
Đầu tiên sẽ tạo 1 shortcode có tên gọi là [post_pttuan]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
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é.
Để 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).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
add_filter('the_content', 'contentafter2para'); function contentafter2para($content){ if(is_single()){ $pttuan_content = do_shortcode('[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ó
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
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ả như ảnh ở bên trên.
Đẹp xấu như thế nào thì các bạn CSS lại nhé.
Hi vọng bài viết này sẽ giúp cho các bạn giải quyết được vấn đề của mình.
Chúc các bạn thành công, có bất kì câu hỏi nào cứ hỏi mình nhé.
