Theme Flatsome khá tuyệt có thể ứng dụng để thiết kế website cho tất cả các ngành nghề nhưng phần blog thì lại thiếu mục các bài viết liên quan, gây khó khăn cho anh em muốn làm website tin tức. Nhiều khi sử dụng plugin thay thế khiến cho ảnh hưởng đến tốc độ tải trang.

Mình đã từng search và thử cài rất nhiều plugin hiển thị bài viết liên quan nhưng chưa thấy cái nào ưng ý, và đây chính là đoạn code đơn giản hợp với ý mình nhất.

Bài viết liên quan theo tag

Dán code này vào file functions.php của theme/child theme đang kích hoạt

* Code bài viết liên quan theo tag
*/
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');

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

/*
 * Code bài viết liên quan theo chuyên mục
*/
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.

.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”] bạn nhớ bỏ dấu ” đi nhé.

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.

Bạn có thể xem kết quả ngay bên dưới bài viết này.

Flatsome hiện đang được xếp hạng nhất của Best Selling WooCommerce Theme.

Với kinh nghiệm làm web hơn 5 năm nay của mình thì Flatsome là 1 theme đa năng phù hợp với hầu hết các loại giao diện website, từ website bán hàng, website tin tức, website giới thiệu công ty, hay blog cá nhân. Vì nó đáp ứng được cả 3 tiêu chí quan trọng nhất hiện nay mà website nào cũng phải có: Nhanh, Nhẹ, Chuẩn SEO.

Hiện tại, đã có hơn 187,556 bản (đến ngày 10/03/2022) được bán ra trên toàn thế giới, một con số trong mơ với bất kì WordPress theme nào, điểm bình chọn trung bình dành cho Flatsome là 4.81/5 qua 6.830 lượt review.

Vậy tại sao Flatsome lại Hot đến vậy, mời bạn cùng thietkewebxin.com tìm hiểu nhé:

Hiện tại, Flatsome là một trong những theme tốt nhất cho các shop online, website công ty bởi những tính năng ưu việt.

Theme Flatsome với Uxbuilder bạn có làm mọi thứ bạn muốn.

Qua đó tạo cảm giác thân thiện, thoải mái cho khách hàng của bạn mỗi khi truy cập.

Sau khi cài đặt Flatsome sẽ không có bất kỳ giới hạn nào cho bạn, thoải mái sáng tạo bất cứ thứ gì bạn thích chỉ với Flatsome.

Tại sao nên lựa chọn theme Flatsome?

1. Flatsome là sự lựa chọn số 1 nếu bạn muốn design một cửa hàng online bởi vì nó được nghiên cứu, xây dựng và phát triển bởi những chuyên gia marketing giỏi nhất, họ biết tính năng nào cần thiết, và thừa để thêm vào hoặc bỏ đi. Một khi bạn đã sử dụng Flatsome thành thạo, bạn sẽ nhận ra mọi thứ trên Flatsome đều tuyệt vời.
2. Flatsome được nhắm tới những cửa hàng online, do đó nó cung cấp rất nhiều những tính năng hữu ích và chuyên nghiệp, giúp cho cửa hàng trực tuyến của bạn luôn luôn chuyên nghiệp và bắt mắt nhất có thể.
3. Chuẩn SEO càng lúc càng trở nên quan trọng, giúp bạn có được thứ hạng cao trên công cụ tìm kiếm Google Search, do đó, Flatsome được tối ưu chuẩn SEO nhất có thể và bài viết của bạn sẽ đạt hiệu quả cao để tăng lượng organic traffic.
4. Flatsome là một theme cực kì thân thiện với người dùng, do đó nếu bạn không biết code thì đây chính là sự lựa chọn số một, vì mọi thao tác và tùy biến đều được Flatsome tối ưu ở dạng kéo thả với công cụ UxBuilder, hoặc có hướng dẫn rất chi tiết.
5. Flatsome cung cấp kho thư viện tính năng khổng lồ mà không một theme miễn phí nào có thể so sánh được.
6. Flatsome tự động cập nhật những tính năng mới nhất cho bạn, do đó bạn không cần phải bận tâm kiểm tra hộp thư để biết khi nào có bản update mới.

6 lí do mà khiến Flatsome được yêu thích

1. Xây dựng được mọi thứ theo ý thích

Với thư viện element khổng lồ và UxBuilder, bạn có thể tự tay thiết kế website của mình tùy ý mà không cần đến khả năng coding.

Chỉ cần hình dung ra ý tưởng của mình và Flatsome sẽ giúp bạn hoàn thành phần việc còn lại.

Đây là phần mình ưa thích nhất ở Flastsome, kho element có sẵn của Flatsome có rất rất nhiều thứ: Từ Banner, Portfolio, Products, Buttons, Tab…

Có thể nói với theme này bạn có thể tha hồ sáng tạo một website theo phong cách của riêng mình.

Với UxBuider mình có thể xây dựng mọi website từ website bán hàng, bất động sản,tin tức, giới thiệu công ty... theo ý thích của mình, mà không tốn quá nhiều thời gian.

Hiện cộng đồng sử dụng Flatsome rất đông, bạn có thể tham gia nó ở trên facebook để có thể trao đổi cũng như tìm hiễu rõ hơn về khả năng tùy biến bá đạo của nó.

2. Không giới hạn tính năng

Với Flatsome, bạn có thể tha hồ tùy chỉnh mọi thứ với Live Theme Option Panel và Drag & Drop Header builder.

2 tính năng tuyệt vời cho phép bạn kéo thả và tùy chỉnh mọi tính năng trong cửa hàng hoặc website của mình.

Với tính năng này bạn có thể chỉnh sửa một cách trựa tiếp theme của mình mà không cần phải sử dụng code, giao diện rất trực quan điều cần làm chỉ là KÉO và THẢ.

Lại một tính năng ưu thích của theme này đối với mình, đó là phần Header bạn có thể chỉnh sửa mọi thứ bạn muốn chỉ bằng cách kéo và thả như: Menu, Search Icon, Button, Cart….

3. Tốc độ được tối ưu vượt trội

Việc không có quá nhiều dòng code phức tạp và được tối ưu tốt giúp cho Flatsome được xếp vào nhóm những theme WordPress nhanh nhất trên thị trường vào thời điểm hiện tại.

Vừa đẹp lại còn nhanh, ai mà không thích cơ chứ.

4. Nhiều thiết kế độc đáo

Một trong những lí do Flatsome được đánh giá cao ở thời điểm hiện tại là bởi thiết kế độc đáo, được tập trung tối ưu để nâng cao trải nghiệm của người dùng.

Dù bạn là một Designer mới bắt đầu thiết kế những website đầu tiên, hay đã là một lập trình viên chuyên nghiệp, nó vẫn thỏa mãn bạn dù là một người khó tính.

5. Được cập nhật liên tục

Flatsome hiện tại là sản phẩm chủ lực của công ty phát hành (UX-themes). Do đó, sản phẩm sẽ luôn luôn nhận được cập nhật để tương thích với những bản WordPress và WooCommerce mới nhất.

Flatsome còn hỗ trợ hơn 12 ngôn ngữ khác nhau, do đó bạn có thể dịch website của mình ra hầu hết mọi ngôn ngữ mà mình muốn.

6. Cài đặt Demo với 1-click

Flatsome cung cấp một kho giao diện với rất nhiều lựa chọn có sẵn cho bạn. Sau khi thấy hài lòng với một mẫu giao diện, bạn chỉ cần click chọn, sau đó tùy chỉnh lại sao cho vừa ý mình, vậy là bạn đã có một website đẹp và chuyên nghiệp rồi đó.

Các tính năng cao cấp khác

Được tối ưu hóa cho thiết bị di động, giúp người dùng trên smart phone có thể thao tác nhanh và dễ dàng hơn.

Kể từ khi có thuật toán Mobile First Index thì trải nghiệm của người dùng trên thiết bị di động đã là một yêu cầu bắt buộc của Google, những website không được tối ưu trên mobile sẽ không có được thứ hạng cao trên Google search, thậm chí khi đã chuẩn SEO.

Chính vì vậy, thiết kế Responsive Design của Flatsome giúp website của bạn tương thích trên mọi kích thước của màn hình di động, máy tính bảng và máy tính để bàn.

• Unlimited Header Options, cho phép bạn thoải mái tạo bất kì mẫu Header nào mà mình muốn.
• Drag & Drop Header Builder, tính năng kéo thả giúp bạn tạo những đề mục trên website của mình đơn giản hơn bao giờ hết
• Built-in Slider & Banner System, cho phép bạn tạo những mục sliders tuyệt đẹp trong website của mình, và bạn cũng không cần phải dùng plugin phân chia slider như trước kia nữa.
• Banner Focus Point, một tính năng mới giúp bạn tạo highlight trong mọi bức ảnh, đây là một trong những tính năng hay nhất mà bạn không muốn bỏ qua.
• Drag & Drop Image Grids, với tính năng này, bạn có thể tạo hình ảnh theo ô với thao tác kéo thả
• Full Typography Control, cho phép bạn tùy chỉnh mọi kích cỡ và font chữ trên website của mình
• Smart Image Lazy Loading, một tính năng giúp tối ưu hóa tốc độ khi tải trang, giảm thời gian load hình ảnh của người dùng.
• Built-in Live Search, cho phép người dùng tìm kiếm sản phẩm, từ khóa hoặc danh mục ngay lập tức.
• Automatic Theme Updates, tự động update, giúp cho bạn luôn có những bản cập nhật chất lượng nhất.

Tổng quan về Flatsome:

• Cập nhật miễn phí trọn đời.
• Tương thích với WordPress 4.8, 5.0+.
• Tương thích với WooCommerce 3.5+.
• Tương thích với WPML.
• Được tối ưu chuẩn SEO.
• Tính năng UxBuilder Kéo Thả đơn giản (không cần biết code).
• Tài liệu hướng dẫn online có sẵn: http://flatsome.uxthemes.com/docs/.
• Hỗ trợ trình duyệt Chrome, Safari, Firefox, IE8+.
• Cung cấp tùy chỉnh Catalog Mode (Bỏ tính năng giỏ hàng và thành toán).
• Hỗ trợ update nhanh với Envato WordPress Toolkit.
• Có thể cài Demo Content chỉ với một nút bấm.
• Cung cấp các file PSD.
• Đi kèm với Child Theme.

Tải về theme Flatsome

Đây là phiên bản Flatsome mà thietkewebxin mua trực tiếp từ themeforest để thiết kế các dự án cho khách hàng, bạn có thể tải về tại link dưới đây:

Giá Cả

Hiện Flatsome đang có giá 59$ trên themeforest, bạn có thể mua ủng hộ tác giả tại https://themeforest.net/

Sau thời gian làm việc với theme Flatsome và triển khai cho nhiều khách hàng xây dựng website bán hàng online thì mình phát hiện ra rằng Kết quả tìm kiếm trên website wordpress sử dụng theme Flatsome không được chính xác như hình dưới đây:

Điều này sẽ gây ảnh hưởng tới tốc độ hiển thị kết quả tìm kiếm do phải tìm và hiển thị nhiều kết quả hơn mà lại không hữu ích. Ngoài ra nó cũng góp phần làm ảnh hưởng đến trải nghiệm của khách hàng, khi mà điều họ muốn thấy lại không được thể hiện chính xác.

Vậy làm thế nào để khắc phục điều này?

Cách làm rất đơn giản, đó là bạn sử dụng đoạn mã dưới đây và cho vào file file function.php của theme sẽ giúp bạn hiển thị kết quả tìm kiếm chính xác hơn trên website wordpress sử dụng theme Flatsome

// nang cao chat luong tim kiem tren flatsome
function __search_by_title_only( $search, &$wp_query )
{
global $wpdb;
if(empty($search)) {
return $search; // skip processing - no search term in query
}
$q = $wp_query->query_vars;
$n = !empty($q['exact']) ? '' : '%';
$search =
$searchand = '';
foreach ((array)$q['search_terms'] as $term) {
$term = esc_sql($wpdb->esc_like($term));
$search .= "{$searchand}($wpdb->posts.post_title LIKE '{$n}{$term}{$n}')";
$searchand = ' AND ';
}
if (!empty($search)) {
$search = " AND ({$search}) ";
if (!is_user_logged_in())
$search .= " AND ($wpdb->posts.post_password = '') ";
}
return $search;
}
add_filter('posts_search', '__search_by_title_only', 500, 2);

Và đây là kết quả sau khi mình chèn đoạn mã trên vào theme

Chúc các bạn thành công!