Bài viết liên quan (related post) bên dưới mỗi bài viết không chỉ có chức năng điều hướng và tăng trải nghiệm website của khách hàng mà một phần khác nó giúp cho website của bạn trông chuyên nghiệp hơn rất nhiều. Ở bài viết này, mình sẽ hướng dẫn bạn 2 cách thêm bài viết liên quan cho theme Flatsome.
Có lẽ bạn nào đang dùng theme flatsome đều khá khó chịu vì giao diện này không có phần tùy biến bài viết liên quan bên dưới mỗi bài viết. Điều này làm giảm đi sự trải nghiệm của người dùng và giảm mức độ tương tác, giữ chân khách hàng ở lại.
Mình cũng là người thường xuyên sử dụng flatsome để tạo website cho khách và mình cũng thấu hiểu điều đó. Dưới đây là 2 hướng dẫn thêm phần related post cho flatsome mà mình tổng hợp được. Xin chia sẻ lại với các bạn.
Cách 1: Thêm bài viết liên quan bằng code
Trong bài viết này, chỉ cần sao chép và dán sẽ tạo ra 3 khối hữu ích sau:
- Bài viết mới nhất (xem thêm)
- Hiển thị danh mục và thẻ của bài đăng
- Khối các tin bài cùng chuyên mục.
Để thực hiện thêm bài viết liên quan cho flatsome bạn cần chỉnh sửa trong source của giao diện. Vì vậy, các bạn lưu ý nên sao lưu website trước khi thực hiện, tránh trường hợp hư hỏng có thể gây hại cho website.
Một lưu ý nữa là khi sử dụng theme Flatsome chúng ta nên copy các file đã chỉnh sửa sang child theme để các bản cập nhật sau này không bị mất.
Chuyển file từ chủ đề chính sang chủ đề con để chỉnh sửa
Tôi sẽ chỉnh sửa trong tệp content-single.php của chủ đề. Do đó, tôi sẽ chuyển các tập tin từ Core theme sang Child theme để chỉnh sửa.
Bước 1: Vào phần quản trị Hosting, tìm và truy cập vào File manager. Sau đó, bạn vào thư mục Wp-content / themes / flatsome /
Bước 2: Sao chép toàn bộ thư mục Template-part sang child theme.
Ngay bây giờ, trong thư mục Child theme sẽ có thêm một thư mục mới có tên là “Template-part”.
Chèn code để hiển thị các bài viết liên quan trên trang web
Bước 1: Sao chép toàn bộ mã bên dưới
|
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 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 |
<div class="entry-content single-page"> <?php the_content(); ?> <?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'flatsome' ), 'after' => '</div>', ) ); ?> <div class="xem-them"> <span class="tieu-de-xem-them">Xem thêm:</span> <ul> <?php $postquery = new WP_Query(array('posts_per_page' => 5, 'orderby' => 'rand')); if ($postquery->have_posts()) { while ($postquery->have_posts()) : $postquery->the_post(); $do_not_duplicate = $post->ID; ?> <li> <a href="<?php the_permalink();?>"><?php the_title();?></a> </li> <?php endwhile; } wp_reset_postdata(); ?> </ul> </div> <?php if ( get_theme_mod( 'blog_share', 1 ) ) { // SHARE ICONS echo '<div class="blog-share text-center">'; echo '<div class="is-divider medium"></div>'; echo do_shortcode( '[share]' ); echo '</div>'; } ?> </div><!-- .entry-content2 --> <?php if ( get_theme_mod( 'blog_single_footer_meta', 1 ) ) : ?> <footer class="entry-meta text-<?php echo get_theme_mod( 'blog_posts_title_align', 'center' ); ?>"> <?php /* translators: used between list items, there is a space after the comma */ $category_list = get_the_category_list( __( ' ', 'flatsome' ) ); /* translators: used between list items, there is a space after the comma */ $tag_list = get_the_tag_list( '', __( ' ', 'flatsome' ) ); // But this blog has loads of categories so we should probably display them here. if ( '' != $tag_list ) { $meta_text = __( '<div class="danh-muc"><span class="title">Danh mục:</span> %1$s</div><div class="the-tim-kiem"><span class="title">Từ khóa:</span> %2$s</div>', 'flatsome' ); } else { $meta_text = __( '<div class="danh-muc"><span class="title">Danh mục:</span> %1$s</div>', 'flatsome' ); } printf( $meta_text, $category_list, $tag_list, get_permalink(), the_title_attribute( 'echo=0' ) ); ?> </footer><!-- .entry-meta --> <?php endif; ?> <?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){ echo '<div class="bai-viet-lien-quan">'; $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' => 16, // So bai viet dc hien thi ); $my_query = new wp_query($args); if( $my_query->have_posts() ): echo '<h3>Bài viết cùng chủ đề:</h3> <ul class="list-bai-viet">'; while ($my_query->have_posts()):$my_query->the_post(); ?> <li> <div class="box-image"> <a href="<?php the_permalink() ?>"><?php the_post_thumbnail('large'); ?></a> </div> <a href="<?php the_permalink() ?>"><h4 class="tieu-de-bai-viet"><?php the_title(); ?></h4> </a> </li> <?php endwhile; echo '</ul>'; endif; wp_reset_query(); echo '</div>'; } ?> <?php if ( get_theme_mod( 'blog_author_box', 1 ) ) : ?> <div class="entry-author author-box"> <div class="flex-row align-top"> <div class="flex-col mr circle"> <div class="blog-author-image"> <?php $user = get_the_author_meta( 'ID' ); echo get_avatar( $user, 90 ); ?> </div> </div><!-- .flex-col --> <div class="flex-col flex-grow"> <h5 class="author-name uppercase pt-half"> <?php echo esc_html( get_the_author_meta( 'display_name' ) ); ?> </h5> <p class="author-desc small"><?php echo esc_html( get_the_author_meta( 'user_description' ) ); ?></p> </div><!-- .flex-col --> </div> </div> <?php endif; ?> <?php if ( get_theme_mod( 'blog_single_next_prev_nav', 1 ) ) : flatsome_content_nav( 'nav-below' ); endif; ?> |
Bước 2: Vào child theme / Template-Parts / posts / content-single.php
Bước 3: Xóa toàn bộ nội dung của tệp Content-single.php và thay thế bằng đoạn code bên trên.
Bước 4: Thay đổi và chỉnh sửa các thông tin cần thiết
Bạn có thể xem hình ảnh bên dưới để biết thông tin có thể chỉnh sửa theo ý thích của mình:
Thêm CSS để làm đẹp
Copy-paste code vào child theme chỉ giải quyết được phần hiển thị, nhưng để nó đẹp thì bạn phải thiết lập thêm CSS cho nó.
Thêm CSS để hiển thị đẹp trên giao diện máy tính
Bước 1: Sao chép đoạn CSS sau
|
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 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
.xem-them .tieu-de-xem-them { font-weight: 700; display: block; margin-bottom: 10px; font-size: 19px; color: black; } .xem-them ul li { margin-bottom: 3px; } .xem-them ul li a { font-weight: 700; font-size: 16px; color: #2a9e2f; } .xem-them ul li a:hover { text-decoration: underline; } .blog-single .entry-meta { text-transform: none; font-size: 14px; letter-spacing: 0; color: gray; border-top: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2; padding: 10px; background: #f9f9f9; } .danh-muc { margin-bottom: 15px; } .danh-muc span.title, .the-tim-kiem span.title { border-radius: 4px; background: #126e32; padding: 4px 10px; color: white; margin-right: 5px; } .danh-muc a, .the-tim-kiem a {line-height:32px; border-radius: 4px; margin-bottom: 10px; padding: 4px 10px; background: #dedede; color: #464646; } .danh-muc a:hover, .the-tim-kiem a:hover { background: #6dca19; color: white; } .bai-viet-lien-quan { margin-top: 15px; } .bai-viet-lien-quan h3 { font-size: 19px; color: black; } .bai-viet-lien-quan ul { margin-bottom: 0; display: inline-block; width: 100%; } .bai-viet-lien-quan ul li { list-style: none; width: 25%; color: graytext; float: left; padding-left: 4px; padding-right: 5px; } .bai-viet-lien-quan ul li .box-image img { height: 120px; border-radius: 4px; object-fit: cover; object-position: center; } .bai-viet-lien-quan h4 { font-size: 15px; color: black; line-height: 19px; padding-top: 7px; height: 64px; overflow: hidden; } |
Bước 2: Dán toàn bộ mã CSS trên vào Giao diện –> Tùy biến –> Style –> Custom CSS (phần tùy biến).
Bước 3: Lưu và tận hưởng kết quả trên PC.
Thêm CSS để làm đẹp trên thiết bị di động
Bước 1: Sao chép mã CSS sau:
|
1 2 3 4 5 6 |
.bai-viet-lien-quan ul li { width: 50%; } .bai-viet-lien-quan ul li .box-image img { height: 90px; } |
Bước 2: Dán toàn bộ mã CSS ở trên vào Giao diện –> Tùy biến –> Style –> Custom CSS –> Custom CSS Mobile.
Bước 3: Lưu và tận hưởng kết quả trên Di động.
Cách 2: Thêm bài viết liên quan bằng function
Cách này đơn giản hơn rất nhiều, bằng cách tận dụng khả năng custom của theme flatsome.
Bước 1: Bạn chèn đoạn code dưới đây vào function của child theme.
|
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 |
// Thêm bài viết liên quan add_shortcode('woovn_posts_related','flatsome_related_posts'); function flatsome_related_posts(){ ob_start(); $categories = get_the_category(get_the_ID()); if ($categories){ echo '<div class="relatedcat">'; $category_ids = array(); foreach($categories as $individual_category) array_push($category_ids, $individual_category->term_id); $my_query = new wp_query(array( 'category__in' => $category_ids, 'post__not_in' => array(get_the_ID()), 'posts_per_page' => 6 )); $ids = wp_list_pluck( $my_query->posts, 'ID' ); $ids = implode(',', $ids); if( $my_query->have_posts() ){ echo '<h3>Bài viết liên quan</h3>'; //echo do_shortcode('[blog_posts style="normal" columns="3" columns__md="2" ids="' . $ids . '" image_height="56.25%" text_align="left"]'); // Slider echo do_shortcode('[blog_posts style="normal" type="row" columns="3" columns__md="2" posts="6" image_height="56.25%" text_align="left" ids="' . $ids . '"]'); // Row } echo '</div>'; } return ob_get_clean(); } |
Nhớ lưu lại nhé.
Bước 2: Vào phần Tùy biến -> Blog -> Blog Single Post -> và chèn đoạn code dưới đây vào phần HTML after blog posts.
|
1 |
[woovn_posts_related] |
Như vậy là đã xong rồi đấy. Rất dễ phải không nào.
Tổng kết
Như vậy bài viết Hướng dẫn thêm bài viết liên quan cho Flatsome này mình đã hướng dẫn các bạn 2 bước thêm phần related post cho giao diện flatsome nhanh chóng và dễ làm. Chúc các bạn thành công. Nếu có bất kỳ thắc mắc nào hãy để lại ở phần bình luận nhé!!
mình làm được rồi. cảm ơn khoa nhé
Thêm code tùy chỉnh như thế này ghi bài viết liên quan là tiếng việt. Xong lúc ngôn ngữ anh nó vẫn ghi bài viết liên quan. Thì làm sao dịch đc ạ
Bạn sửa tiêu đề trong code lại nhé, bên trên mình có hướng dẫn bằng hình ảnh đấy.