Theme Flatsome là theme rất được ưa chuộng và là lựa chọn hàng đầu của các anh em thiết kế website, nó đáp ứng được cho tất cả các ngành nghề nhưng phần blog lại thiết đi mục bài viết liên quan gây khó khăn cho anh em muốn làm bài viết tin tức cũng như trải nghiệm người dùng và ảnh hưởng tới việc SEO cho các anh em. Nhiều khi phải sử dụng tới plugin thay thế khiến ảnh hưởng tới tốc độ tải trang.
Mình đã tìm tìm kiếm và thử nhiều plugin tích hợp để hiển thị bài viết liên quan nhưng thực sự chưa thấy cái nào ưng ý. Và đây chính là đoạn code đơn giản hợp lý mà mình lựa chọn để làm.
Hiển thị bài viết liên quan theo tag
Bạn chỉ cần dán đoạn code này vào file functions.php của theme/child theme đang kích hoạt
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 | // Code bài viết liên quan theo tag - Nextweb function related_tag() { global $post; $tags = wp_get_post_tags($post->ID); if ($tags){ $output = '<div class="related-box">'; $first_tag = $tags[0]->term_id; $args=array( 'tag__in' => array($first_tag), 'post__not_in' => array($post->ID), 'posts_per_page'=>3, 'ignore_sticky_posts'=>1 ); $my_query = new wp_query($args); if( $my_query->have_posts() ): $output .= '<span class="related-head">Bài viết liên quan:</span><ul class="row related-post">'; while ($my_query->have_posts()):$my_query->the_post(); $output .= '<li class="col large-4"> <a href="'.get_the_permalink().'" title="'.get_the_title().'"> <div class="feature"> <div class="image" style="background-image:url('. get_the_post_thumbnail_url() .');"></div> </div> </a> <div class="related-title"><a href="'.get_the_permalink().'" title="'.get_the_title().'">'.get_the_title().'</a></div> </li>'; endwhile; $output .= '</ul>'; endif; wp_reset_query(); $output .= '</div>'; return $output; } else return; } add_shortcode('related_tag', 'related_tag'); |
Hiển thị Bài viết liên quan cùng Chuyên mục
Dán code này vào file functions.php của theme/child theme đang kích hoạt:
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 | //Code bài viết liên quan theo chuyên mục Nextweb function related_cat() { $output = ''; if (is_single()) { global $post; $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 = new wp_query( $args ); if( $my_query->have_posts() ): $output .= '<div class="related-box">'; $output .= '<span class="related-head">Bài viết liên quan:</span><div class="row related-post">'; while ($my_query->have_posts()):$my_query->the_post(); $output .= '<div class="col large-4"> <a href="'.get_the_permalink().'" title="'.get_the_title().'"> <div class="feature"> <div class="image" style="background-image:url('. get_the_post_thumbnail_url() .');"></div> </div> </a> <div class="related-title"><a href="'.get_the_permalink().'" title="'.get_the_title().'">'.get_the_title().'</a></div> </div>'; endwhile; $output .= '</div>'; $output .= '</div>'; endif; //End if. wp_reset_query(); } return $output; } } add_shortcode('related_cat','related_cat'); |
Tiếp theo là phần css, bạn chèn vào style.css của theme/child theme đang kích hoạt hoặc thêm vào CSS bổ sung trong Tuỳ biến của Flatsome.
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 | .related-box .related-head { font-weight: 700; display: block; margin-bottom: 10px; font-size: 19px; color: black; } .related-box ul li { margin-bottom: 3px; } .related-box ul li a { font-weight: 700; font-size: 16px; /*color: #2a9e2f;*/ } .related-box ul li a:hover { text-decoration: underline; } .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; } |
Sau khi thêm đủ 2 cái đó cho con, chúng ta được 2 shortcode [related_tag] và [related_cat] .
Chúng ta chọn 1 loại rồi thêm vào Flatsome –> Theme Option –> Blog –> Blog Single Post, chúng ta kéo xuống dưới cùng, tới phần HTML after blog posts. Chúng ta chèn shortcode vào đó rồi lưu lại là xong.
Hoặc bạn có thể vào trong source code để thêm vào như sau:
Vào theme hoặc child-theme /template-parts/posts/single.php và dán vào như hình
Với bài viết liên quan theo thẻ tag:
1 | <?php echo do_shortcode('[related_tag]'); ?> |
Với bài viết liên quan theo danh mục
1 | <?php echo do_shortcode('[related_tag]'); ?> |
Bạn có thể xem kết quả ngay bên dưới bài viết này.
