Code bài viết liên quan theme flatsome không cần plugin

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 flatsomefunctionflatsome_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 =newwp_query( $args );if( $my_query->have_posts() ) {?><divclass="relatedcat"><pclass="related-post-title">Bàiviếtliênquan:</p><divclass="row related-post"><?phpwhile ($my_query->have_posts()):$my_query->the_post(); ?><divclass="col large-4"><ahref="<?php echo get_the_permalink(); ?>"title="<?php echo get_the_title(); ?>"><divclass="feature"><divclass="image"style="background-image:url(<?php echo get_the_post_thumbnail_url();?>);"></div></div></a><divclass="related-title"><ahref="<?php echo get_the_permalink(); ?>"title="<?php echo get_the_title(); ?>"><?phpechoget_the_title(); ?></a></div></div><?phpendwhile; ?></div></div><style>.relatedcat {padding-top: 10px;border-top: 1pxsolid#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 postelsereturn $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 sidebarrelated post in sidebar

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

// code bài viết liên quan sidebarfunctionrelated_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 =newwp_query( $args );if( $my_query->have_posts() ) {?><ulclass="related-post-sidebar"><?phpwhile ($my_query->have_posts()):$my_query->the_post(); ?><liclass="recent-blog-posts-li"><divclass="flex-row recent-blog-posts align-top pt-half pb-half"><divclass="flex-col mr-half"><divclass="badge post-date  badge-outline"><divclass="badge-inner bg-fill"style="background: url(<?php echo get_the_post_thumbnail_url();?>); border:0;"></div></div></div><divclass="flex-col flex-grow"><ahref="<?php echo get_the_permalink(); ?>"title="<?php echo get_the_title(); ?>"><?phpechoget_the_title(); ?></a><spanclass="post_comments op-7 block is-xsmall"><ahref="<?php echo get_the_permalink(); ?>/#respond"></a></span></div></div></li><?phpendwhile; ?></ul><style>ul.related-post-sidebarli {border-top: 1pxsolid#ececec;margin-bottom: 0;                    }ul.related-post-sidebarli: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 postelsereturn;}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 2related 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!

4.8/5 - (41 bình chọn)
Đăng ký
Thông báo về
guest
0 Bình Luận
Oldest
Newest Most Voted
Inline Feedbacks
Xem tất cả
0
Rất thích suy nghĩ của bạn, hãy bình luận.x
()
x