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é.
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 = 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ó
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ả:
Đẹp xấu như thế nào thì các bạn CSS lại nhé.
Mình muốn hiện thị sản phẩm vào giữa bài viết thì mình thay đổi như thế nào ạ
bạn muốn hiển thị sản phẩm hay custom post type thì có thể thay vào query là sẽ thực hiện được. Trong bài viết mình đang để là post, bạn có thể thay bằng product hoặc cpt của mình