Thông tin cơ bản:

Plugin: Fixed Table Of Contents (Fixed TOC)
Tác giả: wphigh
Mục đích: tạo bảng mục lục Table Of Contents
Giá bán trên Codecaynon: $20 và update trọn đời
Version mới nhất: v3.1.24

Tại sao nên có mục lục cho bài viết?

Giúp người đọc nhanh chóng hình dung được bố cục bài viết

Mục lục, bảng nội dung (Table Of Contents) là một danh sách bài viết hoặc tiêu đề chương, phần nội dung được rút gọn, thường được đặt ở vị trí đầu bài viết giúp người dùng hình dung được toàn bộ nội dung chính, bố cục bài viết gồm những gì.

Người dùng có thể nhấp chuột vào các tiêu đề tại mục lục để di chuyển nhanh tới đoạn nội dung đó trong bài viết. Nếu bạn thường xuyên soạn thảo văn bản dài trên Word thì mục lục là rất quan trọng, giúp cho nội dung trình bày khoa học, có đề mục, mục lục rõ ràng.

Với website, blog cũng vậy, nếu bài viết của bạn ngắn thì không cần mục lục, nhưng bài viết dài (thường trên 1.500 từ) thì mình khuyên bạn nên thêm bảng nội dung vào. Ví dụ: Wikipedia, Codex WordPress,…

Mục lục lúc này sẽ giúp cho phần bài viết vốn rất nhiều chữ được tóm tắt ý chính trong bảng, giúp độc giả dễ dàng hiểu được nội dung bạn muốn viết cái gì. Họ có thể tìm ngay đến phần nội dung họ muốn đọc chỉ bằng cái click chuột. Đó là lý do đa số các website hiện nay đều sử dụng mục lục!

Mục lục giúp tạo hiệu quả SEO cực tốt

Lý do chính là các liên kết NEO (Anchor Link) – liên kết rất quan trọng trong SEO giúp tối ưu hóa SEO onpage.

Liên kết NEO là phần anchor link được hiển thị trên kết quả tìm kiếm Google, nó nằm trong phần Description và người đọc có thể click qua đó để tới ngay vị trí nội dung văn bản.

Fixed TOC có gì nổi bật

Hiển thị thông minh

Fixed TOC có thể linh hoạt hiển thị khi bạn cuộn trang, để người đọc có thể truy cập vào mục lục bài viết bất cứ lúc nào.

Fixed TOC hiển thị cố định trong thanh bên

Bạn có thể dễ dàng cài đặt để cố định mục lục bài viết ở thanh bên (sidebar) của website

Tự do tạo phong cách yêu thích của bạn

Bạn có thể thoải mái tùy biến giao diện, màu sắc cho mục lục bài viết mà không cần biết gì về code web

Cuộn mượt mà

Hiệu ứng cuộn mượt mà của Fixed TOC sẽ làm trang web của bạn chuyên nghiệp hơn

Chỉ báo liên kết tiêu đề (khi cuộn)

Khi bạn cuộn đến đâu mục lục sẽ hiển thị vị trí tiêu đề tương ứng bằng cách thay đổi màu sắc của tiêu đề đó trên mục lục

Thu gọn / Mở rộng danh sách tiêu đều phụ

Bạn có thể thu gọn/mở rộng các tiêu đề con trong mục lục bài viết

Tùy chỉnh xem trước trực tiếp

Xem trước thay đổi khi bạn tùy chỉnh màu sắc và cách hiển thị ngay trong phần Tùy chỉnh của giao diện

Thân thiện trên thiết bị di động

Fixed TOC hoàn toàn thân thiện với giao diện trên thiết bị di động bằng cách thu nhỏ lại và cuộn theo nội dung trang bài viết

Những đặc điểm chính

• Tạo mục lục tự động từ nội dung bài đăng.
• Hỗ trợ bài đăng, trang và bất kỳ loại bài đăng công khai nào khác.
• Hoàn toàn tương thích . Thích ứng trên mọi kích thước thiết bị.
• Hiển thị trên đầu nội dung bài đăng.
• Đang sửa sang trang.
• Hỗ trợ thêm widget để sửa trong sidebar.
• Di chuyển trơn tru đến mục tiêu tiêu đề.
• Chỉ ra tiêu đề truy cập hiện tại một cách động.
• Bật thu gọn / mở rộng danh sách phụ.
• Tùy chỉnh tự do vị trí, kích thước, phông chữ, màu sắc, v.v.
• Hỗ trợ tính năng mã ngắn được đặt ở bất kỳ đâu để hiển thị TOC trong một bài đăng.
• Hỗ trợ bài đăng có thẻ nhanh ‘trang tiếp theo ‘.
• Hỗ trợ xem trước trực tiếp Customizer.
• Xác định tiêu đề nào sẽ hiển thị trong TOC.
• Hiển thị một gợi ý ngắn khi cuộn đến mục tiêu tiêu đề.
• Tạo phong cách yêu thích của bạn một cách tự do.
• Đặt các tùy chọn riêng lẻ cho từng trang.
• Rất nhiều hiệu ứng động để lựa chọn.
• Đã sẵn sàng dịch.
• Hỗ trợ các plugin trình tạo trang phổ biến, chẳng hạn như Visual Composer, Elementor, Thrive Architect, Divi, v.v.
• Hỗ trợ AMP. Yêu cầu plugin WordPress AMP.

Hướng dẫn cấu hình plugin Fixed TOC cơ bản

Để thiết lập các thông số cơ bản, bạn truy cập Settings => Fixed TOC

Trong đó:

– Enable Fixed TOC: tích để mặc định bật mục lục cho tất cả bài viết. Bạn cũng có thể tắt, bật cho từng bài viết sau này.
– Post types: chọn tạo mục lục cho bài viết, trang, media.
– Headings: chọn các thẻ heading để tạo mục lục.
– Display TOC when: tự động tạo mục lục khi bài viết có hoặc nhiều hơn số thẻ heading. Ví dụ, mình set 3 thì trong bài viết nếu có ít hơn 3 thẻ sẽ không có mục lục.
– Convert Heading Into ID: tích để nó chuyển thẻ tiêu đề thành ID. Bạn nên để trống Display In Widget: nếu bạn muốn hiển thị trong Widget thì tích vào đây, không thì hãy để trống.
– Shortcut: Thiết lập phím tắt cho mục lục. Tốt nhất tích hết.
– Fixed Headers: để trống nếu không có nhu cầu.
– Scroll Offset: Thiết lập khoảng trống giữa thẻ Heading trong bài viết và phần trên cùng của trình duyệt khi click vào mục lục nhảy đến. Mình để nguyên.
– Appearance: tùy chỉnh hiển thị như: màu sắc, hiệu ứng…Bạn click vào Click on the link to set the appearance options hoặc tại Dashboard => Appearance => Customize

Tải về Fixed TOC 3.1.24

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.

Rank Math là một plugin Tối ưu hóa Công cụ Tìm kiếm dành cho WordPress giúp mọi người dễ dàng tối ưu hóa nội dung của họ với các đề xuất tích hợp dựa trên các phương pháp hay nhất được chấp nhận rộng rãi. Dễ dàng tùy chỉnh các cài đặt SEO quan trọng, kiểm soát trang nào có thể lập chỉ mục và cách bạn muốn trang web của mình xuất hiện trong tìm kiếm với Dữ liệu có cấu trúc.

Bạn có thể làm gì với Rank Math SEO Pro

Rank Math mang lại cho bạn lợi thế cạnh tranh với các tính năng mạnh mẽ và dễ sử dụng . Cho dù bạn là người mới hay người lâu năm về SEO, Rank Math có thể đưa khả năng SEO của bạn lên một tầm cao mới.

Dễ dàng cài đặt Rank Math với trình hướng dẫn trực quan và đơn giản

Rank Math có trình hướng dẫn cài đặt và cấu hình từng bước giúp thiết lập SEO cho WordPress một cách hoàn hảo.

Sau khi cài đặt, Rank Math xác minh cài đặt trang web của bạn và đề xuất các cài đặt lý tưởng để có hiệu suất tốt nhất. Sau đó, trình hướng dẫn từng bước sẽ thiết lập SEO cho trang web của bạn, hồ sơ xã hội, hồ sơ quản trị viên web và các cài đặt SEO khác.

Giao diện người dùng đơn giản và trực quan

Rank Math được thiết kế để cung cấp thông tin phù hợp cho bạn vào đúng thời điểm. Giao diện người dùng đơn giản nhưng mạnh mẽ làm nổi bật thông tin quan trọng về bài đăng của bạn cùng với chính bài đăng. Sử dụng thông tin này, bạn có thể cải thiện SEO cho bài đăng của mình ngay lập tức.

Rank Math cũng có tính năng xem trước đoạn trích nâng cao. Bạn có thể xem trước bài đăng của mình sẽ xuất hiện như thế nào trong SERPs, xem trước đoạn mã chi tiết và thậm chí xem trước bài đăng của bạn trông như thế nào khi được chia sẻ trên mạng xã hội.

Content AI – Trợ lý AI cá nhân của bạn

Nội dung của bạn xứng đáng được chú ý. Đừng để nó tụt lại phía sau chỉ vì bạn không biết sử dụng những từ hoặc cụm từ nào trong nội dung của mình. Tận dụng các đề xuất do AI tạo của chúng tôi và biết chính xác những gì cần viết.

Mô-đun phân tích SEO nâng cao được tích hợp sẵn

Rank Math trình bày thông tin có giá trị từ Google Search Console ngay bên trong bảng điều khiển quản trị WordPress của bạn. Bạn có thể xem các từ khóa mà bạn xếp hạng, trạng thái sơ đồ trang web của bạn và các vấn đề lập chỉ mục . Thông tin này là vô giá trong việc duy trì một trang web hiệu suất cao.

Tích hợp sẵn Google Analytics

Theo dõi số liệu thống kê của trang web của bạn mà không bao giờ phải rời khỏi những tiện nghi của Bảng điều khiển WordPress của bạn.

Trình theo dõi xếp hạng

Ngay cả khi bạn mới bắt đầu với SEO, bạn luôn muốn biết trang web của mình vượt trội như thế nào so với các đối thủ cạnh tranh. Sử dụng Trình theo dõi xếp hạng của Rank Math để theo dõi hiệu suất trang web của bạn so với các từ khóa đặt trước.

Theo dõi lịch sử vị trí trang web của bạn trên google

Nếu bạn có thói quen thường xuyên thử nghiệm các phương pháp SEO mới hoặc chỉ muốn biết trang web của bạn đã hoạt động như thế nào trong một khoảng thời gian, thì lịch sử vị trí sẽ là một sự gửi gắm.

Theo dõi thứ hạng trang web của bạn trong vài tuần hoặc tháng qua.

Xếp hạng Từ khóa cho Bài đăng

Lợi ích: Nhận biết tất cả các từ khóa mà mỗi bài đăng được xếp hạng

Nhiều khi biết được từng từ khóa mà bài đăng của bạn được xếp hạng có thể khá thú vị. Với thông tin này, bạn có thể viết lại nội dung của mình hơn nữa để cải thiện thứ hạng cho những từ khóa hấp dẫn mà bạn nghĩ rằng bạn sẽ không bao giờ xếp hạng.

Trình tạo giản đồ nâng cao đầy đủ nhất

Lợi ích: Cải thiện CTR bằng cách làm cho nội dung của bạn nổi bật trong SERPs

Đánh dấu lược đồ cung cấp thông tin bổ sung về trang web của bạn cho các công cụ tìm kiếm và người dùng của bạn. Với Rank Math SEO, việc đưa Dữ liệu có cấu trúc vào các bài đăng chỉ đơn giản như trỏ và nhấp chuột. Nhiều loại lược đồ khác nhau được hỗ trợ và một danh mục mặc định cũng có thể được đặt trong cài đặt.

Nhập cấu trúc Schema từ các trang web khác

Lợi ích: Đánh bại đối thủ cạnh tranh của bạn trong phương pháp của riêng họ

Nhập cấu trúc Schema từ bất kỳ trang/bài đăng hoặc URL nào từ trang web của riêng bạn hoặc từ bất kỳ trang web nào khác trên internet. Tạo cho mình một khởi đầu thuận lợi bằng cách nhập cấu trúc Schema sẵn từ các URL khác và thực hiện các thay đổi theo sở thích của bạn.

Rank Math giải quyết các vấn đề về SEO mà bạn thậm chí không biết là mình đã gặp phải. Ví dụ: Rank Math có một trình theo dõi xếp hạng từ khóa được tích hợp sẵn để theo dõi vị trí bài đăng của bạn trong SERPs. Không chỉ vậy, Rank Math còn gửi email cho bạn khi bài viết của bạn lần đầu tiên bắt đầu xuất hiện trong kết quả tìm kiếm. Điều này mang lại cho bạn một lợi thế chưa từng có để tối ưu hóa các bài đăng của bạn xung quanh các từ khóa mới.

Rank Math thực hiện tất cả những điều đó trong khi tiết kiệm cho bạn hàng trăm, nếu không phải hàng nghìn đô la mà bạn đã đầu tư vào một trình theo dõi xếp hạng chuyên nghiệp.

Di chuyển từ các plugin SEO khác sang Rank Math cũng rất dễ dàng. Rank Math có thể sao chép tất cả các cài đặt cần thiết từ plugin hiện có của bạn chỉ bằng một cú nhấp chuột. Bạn có thể bắt đầu hưởng lợi từ sức mạnh của Rank Math chỉ trong vài phút sau khi cài đặt.

Bây giờ bạn đã hiểu các ưu điểm của Rank Math, đây là một số tính năng chi tiết khác của Rank Math.

Phân tích SEO nâng cao – Xếp hạng tính năng một công cụ phân tích và kiểm tra SEO nâng cao. Công cụ này thực hiện hơn 20 bài kiểm tra SEO trên trang web của bạn và đề xuất cho bạn các cài đặt tốt nhất để đạt được nhiều lưu lượng truy cập nhất.

Trình quản lý chuyển hướng nâng cao – Xếp hạng Math cho phép bạn thiết lập và quản lý hàng trăm chuyển hướng trong một vài cú nhấp chuột. Nhập và xuất chuyển hướng dễ dàng và nhanh chóng và bạn có thể đặt các chuyển hướng riêng lẻ làm chuyển hướng 301 hoặc 302.

Màn hình 404 – Các liên kết bị hỏng rất khó tìm và sửa chữa. Màn hình 404 nâng cao của Rank Math tìm thấy tất cả các liên kết 404 trên trang web của bạn và cho phép bạn chuyển hướng chúng chỉ trong vài cú nhấp chuột.

Trình chỉnh sửa tiêu đề và mô tả hàng loạt – Các từ khóa trong tiêu đề có tác động đáng kể đến SEO. Tính năng chỉnh sửa hàng loạt của Rank Math cho phép bạn cập nhật hàng loạt tiêu đề và mô tả của bài đăng, giúp bạn tiết kiệm thời gian và tiền bạc.

Xác minh Công cụ Tìm kiếm – Xếp hạng Toán học cho phép bạn xác minh trang web của mình bằng nhiều công cụ tìm kiếm và mạng xã hội ngay từ Quản trị viên WordPress của bạn.

SEO hình ảnh tự động – Hình ảnh được tối ưu hóa thích hợp là điều cần thiết cho SEO hình ảnh. Xếp hạng Math tự động nối các hình ảnh với thẻ ALT và thẻ Tiêu đề để cải thiện SEO hình ảnh của bạn.

Hỗ trợ nhiều đoạn mã chi tiết – Việc sử dụng các thẻ meta chính xác chưa bao giờ dễ dàng hơn thế với Hỗ trợ đoạn mã đa dạng thức của Rank Math. Xếp hạng Math có thể thêm tin tức, bài báo, blog, công thức, video và nhiều thẻ meta khác vào nội dung của bạn chỉ bằng một nút bấm.

Sơ đồ trang web Tin tức – Nếu bạn điều hành một trang web tin tức, bạn sẽ thích tính năng sơ đồ trang web tin tức trong Xếp hạng Toán học. Tính năng này tạo ra một sơ đồ trang web tin tức tương thích với Google và cho phép bạn gửi nó chỉ sau vài giây.

Sơ đồ trang web dành cho Video – Tính năng sơ đồ trang web dành cho video của Rank Math giúp các video của bạn được lập chỉ mục một cách nhanh chóng. Chỉ trong một vài cú nhấp chuột, Rank Math có thể tạo một sơ đồ trang web video tương thích mà bạn có thể gửi cho nhiều công cụ tìm kiếm.

Tối ưu hóa SEO Local – Các doanh nghiệp địa phương có thể tận dụng các tính năng tối ưu hóa SEO Local của Rank Math. Sử dụng các tính năng này đảm bảo rằng trang web doanh nghiệp địa phương của bạn xếp hạng trong Google cho các từ khóa dự định của bạn.

Hỗ trợ WooCommerce – Tất cả các tính năng tuyệt vời của Xếp hạng Toán học không giới hạn ở blog. Các trang web thương mại điện tử cũng có thể tận dụng Xếp hạng Toán học để tối ưu hóa các trang sản phẩm của họ để có thêm lưu lượng truy cập.

Và còn rất nhiều những tính năng tuyệt vời các của Rank Math mình sẽ bổ sung dần vào bài viết sau này

Tải về Rank Math SEO Pro 3.0.8

Phiên bản Rank Math SEO Pro cũng được thietkewebxin.com mua về và sử dụng trong rất nhiều dự án tối ưu SEO cho các trang web của khách hàng, vì thế đây là bản Plugin hoàn toàn sạch còn có cả hướng dẫn kích hoạt nữa nha, mời bạn click vào link bên dưới để tải về nhé

Nếu có điều kiện bạn hãy ghé trang chủ https://rankmath.com/pricing/ mua bản plugin chính thức để ủng hộ tác giả nhé!

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!

Telegram là một ứng dụng nhắn tin tương tự như Whatsapp, Viber, Facebook Messenger ở nước ngoài hay là Zalo ở Việt Nam. Telegram được phát triển bởi anh em nhà Durov đến từ Nga, là những người đứng đằng sau VKontakte – mạng xã hội lớn nhất nước Nga. Đặc điểm nổi bật của Telegram là sự tích hợp giữa tốc độ nhắn tin của Whatsapp và mức độ bảo mật cao của Snapchat để tạo nên một ứng dụng nhắn tín có tốc độ nhanh và bảo mật tốt. Hiện nay nó đang là ứng dụng được nhiều người lựa chọn sử dụng nhất.

Ứng dụng nhắn tin Telegram chỉ thực sự được nhiều người biết vào thời điểm ứng dụng Whatsapp xảy ra sự cố (cụ thể là bị sập mạng trên diện rộng vào ngày 2/11/2014). Và chính vì sự có này mà ứng dụng Telegram đã có gần 5 triệu người dùng chỉ trong khoảng thời gian ngắn và trở thành ứng dụng nhắn tin được tải nhiều nhất vào thời điểm lúc bấy giờ.

Cũng nhờ sự cố đó mà hiện nay, Telegram đã trở thành một ứng dụng hàng đầu tại hơn 46 quốc gia khắp thế giới từ Đức đến Ecuador. Ở Mỹ và một số quốc gia khác, Telegram cũng trở thành ứng dụng hàng đầu trong nhóm các ứng dụng mạng xã hội, có thời điểm nó còn vượt mặt cả Facebook, Whatsapp và Kik.

Hiện tại, Telegram đã tương thích với tất cả các hệ điều hành đang được sử dụng phổ biến nhất hiện nay, từ trên PC, cho đến phiên bản web và các phiên bản trên điện thoại đi động như iOS, Android. Và để sử dụng được Telegram cho mọi phiên bản thì bạn cần phải đăng ký Telegram trên điện thoại di động đầu tiên, sau đó mới sử dụng được tại nhiều phiên bản khác

Tham khảo thêm: 13 lý do nên sử dụng Telegram

Hướng dẫn cấu hình thông báo đơn hàng Woocommerce qua ứng dụng Telegram

Thiết lập telegram để nhận thông báo từ website wordpress

Hướng dẫn tạo Token

Đầu tiên bạn cần kết nối với @BotFather bằng liên kết: https://telegram.me/BotFather, bằng cách mở cửa sổ trò chuyện Telegram trên ứng dụng PC (Mobile) của Telegram, soạn văn bản /star gửi cho bot

Sau đó bạn tiếp tục soạn /newbot để tạo một bot mới

Nhập tên cho bot mà bạn định tạo. Chú ý: tên bot luôn được kết thúc bằng từ Bot. Ví dụ: ChoPluginsBot

Sau khi nhập tên Bot thành công bạn sẽ nhận được Token to access HTTP API (như hình trên)

Hướng dẫn lấy ChatID

Kết nối với @userinfobot bằng liên kết: https://telegram.me/userinfobot.

Sau đó soạn /start để gửi

Hướng dẫn lấy Group ID

Bạn thêm @GetIDsBot vào nhóm của bạn, chat info của nhóm sẽ được hiển thị

Sau khi đã tạo các thông số cần thiết cho việc tích hợp thông báo đơn hàng trên website wordpress với telegram, chúng ta tiến hành sử dụng chúng để kết nối lấy thông báo về telegram của bạn. Để tích hợp thành công, bạn cần phải chuẩn bị theo những yêu cầu sau:

1. Bạn đã cài đặt ứng dụng Telegram trên máy tính hoặc điện thoại
2. Phiên bản PHP: 7.0 trở lên
3. WordPress: 5.0 trở lên
4. Woocomerce: 3.0 trở lên

Có 2 cách để bạn có thể tích hợp thông báo tới telegram với wordpress:

Tích hợp thông báo trên website tới telegram bằng Plugin wordpress

Hiện tại có khá nhiều plugin có thể hỗ trợ bạn tạo thông báo đơn hàng qua Telegram một cách dễ dàng. Trong bài viết này mình sẽ hướng dẫn bạn cách sử dụng Plugin Order Notification for Telegram, một plugin khá mạnh mẽ và dễ sử dụng.

Plugin Order Notification for Telegram – Cách cấu hình thông báo đơn hàng qua telegram

B1. Cài đặt và kích hoạt Order Notification for Telegram

1. Bạn vào Plugins, tải lên file zip bạn tải ở đây, hoặc tìm kiếm từ khoá Order Notification for Telegram trên WordPress Plugins Maketplace
2. Sau đó active
3. Vào mục Woocommerce – Thiết lập – tab Thông báo Telegram

B2. Thiết lập Order Notification for Telegram

Sau khi cài đặt file plugin

Truy cập vào WooCommerce, phần Settings, tab Telegram Notification

Nhập liệu thông tin Token và ChatID/GroupID bạn đã lấy trước đó

Mặc định plugin sẽ gửi thông báo khi đơn hàng mới được đặt, khi bạn chọn vào mục Order Status Changed, tính năng nãy sẽ đóng, thay vào đó thông báo sẽ được gửi khi thay đổi trang thái đơn hàng trùng khớp với các trạng thái mà bạn đã chọn phía dưới –  Select order statuses

Nội dung tin nhắn thông báo bạn nhập liệu theo mẫu, plugin đã hỗ trợ một số thẻ tag HTML cơ bản và các shortcode giúp hiển thị một số thông tin đơn hàng

Chú ý: Nếu bạn muốn thêm phần ghi chú đơn hàng hãy sử dụng đoạn shortcode {customer_note} vào phần Mẫu tin nhắn nhé.

Như vậy là bạn đã cài đặt thành công Order Notification for Telegram, bạn có thể test thử thông báo bằng cách đặt thử đơn hàng từ website đã cài đặt plugin với chức năng gửi thông báo đơn hàng tới ứng dụng telegram trên điện thoại của mình.

Và đây là mẫu tin nhắn mình đã test thử, chúc bạn thành công!

Tích hợp thông báo trên wordpress tới telegram bằng code

Nhiều anh em không thích sử dụng Plugin vì đôi khi sẽ làm website cồng kềnh hơn, anh em có thể sử dụng đoạn code dưới đây.

Cách làm rất đơn giản đó là copy nguyên đống code này vào function.php và thay tương ứng $chatID vs $token đã tạo ở trên là có thể chạy.

Với cách này bạn có thể áp dụng cho rất nhiều chức năng cần thông báo khác, chỉ cần đặt code vào hook hoặc chỗ nào bạn muốn.

<?php add_action('woocommerce_checkout_order_processed', 'vdh_telegram');
function vdh_telegram($order_id) { if(!$order_id) return; 
$order = wc_get_order($order_id); 
$order_data = $order->get_data(); 
$first_name = $order_data['billing']['first_name']; 
$last_name = $order_data['billing']['last_name']; 
$phone = $order_data['billing']['phone']; 
$msg = "Đơn hàng mới : $order_id - $last_name $first_name - $phone"; 
$chatID = '-378389xxx'; // ID của Group trong Telegram $token = 'bot8338xxxxx:AAGuFDIXElNgOuHhoGhwzVGdd8oxxxxxxx'; // Token của con Bot gửi thông báo 
$url = "https://api.telegram.org/" . $token . "/sendMessage?parse_mode=html&chat_id=" . $chatID; 
$url = $url . "&text=" . urlencode($msg); 
file_get_contents($url);}

Và đây là kết quả:

Chúc anh em thành công!
Bài viết được tổng hợp từ nhiều nguồn trên intenet, nếu anh em cần hỗ trợ hoặc gặp khó khăn trong quá trình thiết lập thông báo đơn hàng từ website qua telegram, anh em có thể comment ở dưới hoặc inbox trực tiếp trên fanpage của website, Mình sẽ hỗ trợ anh em ngay khi có thể.

Tuy nhiên cách khắc phục lỗi tích hợp chát Facebook vào website trong bài viết trên không còn hiệu quả nữa. Thật may là Facebook 2020 đã có cách hỗ trợ các webmaster tích hợp Chát facebook vào website bằng cách vô cùng đơn giản. Mình sẽ cùng các bạn thực hiện ngay sau đây.

TẠO ĐOẠN CODE CHÁT FACEBOOK ĐỂ NHÚNG VÀO WEBSITE

Hầu như đối với các cá nhân, hay doanh nghiệp có cung cấp các sản phẩm, dịch vụ trên internet đều sở hữu cho mình 1 fanpage Facebook để tương tác với khách hàng. Và đó cũng chính là lý do mà bạn muốn tích hợp chức năng Chat Live facebook vào website của mình phải không nào.

Những bước sau đây sẽ thực hiện trên fanpage mà bạn sử dụng để tương tác với khách hàng. Điều này sẽ giúp khách hàng không cần truy cập vào facebook, vào fanpage mà vẫn có thể tương tác được với bạn.

Bước 1: Vào CÀI ĐẶT trên fanpage sau đó vào phần TIN NHẮN

Bước 2: Kéo xuống bên dưới phần Thêm Messenger vào trang web và bấm Bắt đầu

Bước 3: Ở cửa sổ bật lên tại đây bạn có thể tùy chọn thiết lập:

1. Ngôn ngữ sẽ hiển thị ở khung chát

2. Lời chào đầu tiên trên khung chát

3. Tùy chọn khách: khi bật chết độ này khách hàng không cần phải đăng nhập facebook vẫn có thể nhắn tin cho bạn.

Sau khi thiết lập xong, các bạn bấm Tiếp ở dưới góc phải để chuyển sang bước tùy chọn số 2

Bước 4: Lựa chọn màu sắc cho khung chát

Tại đây, bạn có thể lựa chọn màu sắc sao cho hợp với màu chủ đạo của website. Hoặc để mặc định khung live chat sẽ hiển thị theo màu xanh của facebook

Bước 5: Thêm tên miền website vào khung chat Messenger Facebook và hoàn tất

Bước này rất quan trọng, vì nếu bạn nhập tên miền không chính xác live chat facebook sẽ không thể hoạt động trên website của bạn.

Đặc biệt, bạn có thể thêm nhiều hơn 1 tên miền ở bước này. Đồng nghĩa với việc khung chát của bạn có thể hiển thị ở nhiều website khác nhau.

Ở bước này mình sẽ giải thích chi tiết một chút:

• THÊM TÊN MIỀN VÀO TRANG WEB: Mục này các bạn thêm tên miền của trang web mà các bạn muốn hiển thị live chat messenger. Thật may là facebook cho phép nhập nhiều hơn 1 tên miền, vì vậy bạn chỉ cần tạo code 1 lần mà có thể nhúng facebook chat cho tất cả các website của bạn. Sau khi thêm xong tên miền, các bạn nhớ bấm Lưu để hệ thống thêm tên miền vào đoạn code.
• TÙY CHỌN CÀI ĐẶT MÃ: Nếu các bạn biết về code web, có thể tự thêm vào website đoạn code này một cách chính xác thì các bạn để mặc định Tôi sẽ tự cài đặt mã.
  Nếu các bạn thuê, hay nhờ người khác code website thì bạn tick vào phần Gửi hướng dẫn cho nhà phát triển của bạn qua email. Tại đây bạn chỉ cần nhập email của người nhận vào, facebook sẽ gửi đoạn mã các bạn vừa tạo kèm theo hướng dẫn tích hợp facebook live chat cho người đó.
• ĐOẠN MÃ: trong trường hợp bạn có thể tự cài đặt mã, bạn hãy copy đoạn code này và lưu lại để dùng trong bước tiếp theo.

Sau cùng, bạn bấm hoàn tất để hoàn thành việc tạo đoạn code live chat facebook messenger cho website.

NHÚNG ĐOẠN CODE LIVE CHAT MESSENGER FACEBOOK VÀO WEBSITE WORDPRESS

Nhúng đoạn code live chat vào website wordpress sử dụng theme Flatsome

Đối với theme Flatsome bạn chỉ cần 2 bước để có thể hiển thị Facebook chat trên website

Bước 1: bạn vào Flatsome --> Advanced --> Global Settings

Bước 2: Bạn kéo xuống dưới tìm phần BODY SCRIPTS – TOP và dán đoạn code được tạo ở phần trên vào.

Sau đó click vào phần Save All Change để lưu lại và hưởng thụ thành quả

Nhúng đoạn code live chat vào website wordpress sử dụng theme bất kỳ

Đối với theme bất kỳ các bạn sẽ nhúng đoạn code đã lấy được của facebook để gắn trực tiếp vào file header.php của theme.

Tại Giao diện quản trị các bạn truy cập vào chức năng Sửa giao diện bằng cách sau: Click vào Giao diện -> Sửa giao diện

Ngay sau đó WordPress sẽ hiện lên cửa sổ để nhắc nhở bạn cẩn trọng trong việc chỉnh sửa giao diện trực tiếp. Các bạn bấm Tôi hiểu để tiếp tục chỉnh sửa:

Chú ý: Bạn cũng nên làm theo nhắc nhở của WordPress và hãy copy lại nội dung của file trước khi chỉnh sửa, đề phòng trong lúc chỉnh sửa hoặc lưu lại dữ liệu có thể bị mất nếu mạng internet có trục trặc, hoặc hosting có vấn đề.

Tiếp theo, các bạn tìm đến file header.php trong danh sách file ở cột bên phải, và dán ngay đoạn code trên vào dưới thẻ mở <body> như mình đã đánh dấu ở trong hình:

Sau khi dán xong đoạn code bạn clik vào nút Cập nhật tập tin để lưu lại file. Khi nhận được thông báo Đã sửa tập tin thành công như hình bên dưới là bạn đã hoàn thành việc tích hợp facebook chat vào website của mình.

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

Sau khi mò mẫm trong phần Tùy biến của Theme và không có kết quả, mình tìm trên các diễn đàn của nước ngoài cuối cùng cũng tìm ra cách xử lý.

Bởi vì tìm mấy trang tiếng Việt không có nên mình xin chia sẻ cách xóa từ “Category” trong Breadcrumb của theme Jnew với các bạn. Cũng là để lưu lại phòng khi mình quên, còn xem lại

Thực chất, để xóa đi chữ “Category” trong Breadrumb chúng ta chỉ cần dùng CSS để ẩn nó đi là được. Để ẩn chữ “Category” khó chịu này, bạn có thể dán đoạn CSS sau vào phần Customize Style của theme (Jnew –> Customize Style –> CSS Bổ sung):

body.archive.category #breadcrumbs > span:nth-child(3), body.archive.category #breadcrumbs > i:nth-child(4) {
display: none;
}

Sau đó bạn lưu lại và kiểm tra thành quả. Chúc các bạn thành công!

Tùy vào mỗi giao diện và tư duy bố trí của người thiết kế mà menu có thể nằm ở đầu trang, cuối trang hoặc nằm ở cả trên và dưới.

Trong bài viết này, mình sẽ hướng dẫn các bạn biết cách tạo một thanh menu đơn giản, lựa chọn vị trí đặt menu và thêm các liên kết, các danh mục vào thanh menu của mình.

Trước khi tìm hiểu về cách sử dụng menu, chúng ta cùng làm quen với hai thuật ngữ quan trọng mà các bạn cần phân biệt trong quá trình thực hiện đó là:

• Menu: Là nơi chứa các liên kết, bạn có thể tạo bao nhiêu menu cũng được.
• Menu Location (Vị trí menu): vị trí hiển thị menu trên giao diện.

Cách tạo menu cho trang web wordpress

Sau khi đăng nhập vào trang quản trị, các bạn di chuyển chuột đến phần Giao diện (
Appearance) -> Chọn Menu.

Chúng ta cùng làm quen một chút với giao diện chỉnh sửa menu của trang web

Tại giao diện chỉnh sửa menu bạn sẽ thấy có 2 tab chính ngay trên đầu, mình có đánh số 1 và 2. Chúng ta sẽ làm việc chủ yếu với tab 1 – Sửa menu, còn tab 2 – Quản lý vị trí menu thực ra không cần thiết lắm vì chức năng này bạn cũng có thể cài đặt nó ở ngay tab 1 trong phần Thiết lập menu.

Tiếp tục, nhìn từ trên xuống dưới bạn sẽ thấy phần Chọn menu để sửa – phần này dùng để sửa các menu website bạn đã tạo từ trước.

Bên cạnh nó có link tạo menu mới – dùng để tạo menu mới cho website của bạn, nếu bạn cần thêm một vài menu nữa.

Chức năng của cột Thêm liên kết và Cấu trúc menu

Khu vực này sẽ chứa tất cả các loại liên kết mà chúng ta có thể nhét vào menu tức là cột CẤU TRÚC MENU ở bên phải.

Chúng ta có thể thêm liên kết của các trang, bài viết, sản phẩm, chuyên mục, danh mục sản phẩm hay liên kết tự tạo vào menu. Bạn có thể hình dung bên cột trái có cái gì thì đều có thể nhét cái đó vào cột menu bên phải.

Chức năng của cột THIẾT LẬP MENU

Nằm ngay bên dưới cột Cấu trúc menu chính là khu vực Thiết lập menu, khu vực này sẽ cho phép bạn thiết lập vị trí mà bạn muốn menu hiển thị ở vị trí nào ngoài website. Bạn chỉ cần tick vào 1 trong các vị trí được liệt kê ở phần này sau đó lưu lại. Tuy nhiên các vị trí này sẽ được chỉ định sẵn tùy vào giao diện mà bạn đang sử dụng.

Để có thể hình dung chi tiết hơn về cách thêm các liên kết vào menu chúng ta sẽ cùng thao tác cách lựa chọn một danh mục bất kỳ để đưa ra menu

Hướng dẫn cách tạo menu và đưa danh mục, danh mục sản phẩm ra ngoài menu website

Tạo menu website đầu tiên trên wordpress

Các bạn click vào nút tạo menu mới ngay phía trên để bắt đầu tạo menu cho website của mình

Và giao diện tạo menu website sẽ hiện ra

Sau khi tạo xong menu bước tiếp theo bạn cần phải lấy các phần ở cột bên trái (Thêm liên kết) bằng cách lựa chọn loại liên kết ví dụ: Trang, Bài viết, Sản Phẩm, Liên Kết Tự Tạo, Chuyên Mục, Danh Mục Sản Phẩm…để đưa vào cột bên phải Cấu trúc menu.

Ví dụ về thêm liên kết của danh mục sản phẩm vào menu

Lưu ý: bạn phải tạo danh mục bài viết hoặc danh mục sản phẩm cho website để có thể lấy dữ liệu nhét vào menu

Xem thêm: Cách tạo danh mục bài viết và danh mục sản phẩm cho website

• B1: Click vào Danh mục sản phẩm ở cột bên trái
• B2: Lựa chọn Danh mục trong danh sách hiện ra (Nếu không thấy danh mục cần tìm bạn có thể sử dụng tab Xem tất cả hoặc Tìm kiếm ngay trong danh sách).
• B3: Bấm nút Thêm vào menu để thêm các liên kết đã chọn vào menu bên phải

Chú ý: Với các kiểu liên kết khác bạn cũng làm tương tự như ví dụ trên.

Với Liên kết tự tạo: sử dụng phần này sẽ giúp bạn thêm một liên kết từ bên ngoài vào menu, hoặc liên kết đặc biệt nào đó mà các bạn không thể lấy ở trong các phần kia.

Mình giải thích thêm một chút ở phần này:

• URL: là liên kết mà bạn muốn xuất hiện trên Menu, nó có thể là bất kỳ liên kết nào, thuộc trang web của bạn hoặc hướng tới các website khác.
• Tên đường dẫn: là nội dung đại diện cho liên kết đó hiển thị trên menu.

Vậy làm thế nào để thay đổi vị trí của các liên kết trong menu?

Sau khi thêm các liên kết vào menu, có thể bạn sẽ muốn thay đổi vị trí của các chúng trong menu.

Để làm việc này, wordpress cho phép bạn sử dụng chức năng kéo thả để thay đổi vị trí của các liên kết.

Tạo menu cha con trong wordpress

Rất đơn giản, bạn cũng có thể sử dụng chức năng kéo thả để tạo menu theo cấp bậc cha con cho website của mình.

Hình trên mình vừa kéo mục Theme WordPress làm con của Thiết Kế Web Xịn. Chúng ta cùng xem kết quả hiển thị của menu bên ngoài website.

Sửa, xóa liên kết, nội dung liên kết trong menu

Để sửa liên kết trong menu, bạn click vào mũi tên của liên kết tương ứng để tiến hành sửa sửa.

Bạn cũng có thể click vào nút xóa bỏ ngay trong cửa sổ mở ra để xóa liên kết trong menu.

Chọn vị trí cho menu website wordpress

Tạo được menu tức là bạn đã xong gần như 80% công việc, nhưng lúc này menu vẫn chưa hiển thị ngoài website. Để menu có thể hiển thị ra ngoài website bạn cần phải lựa chọn vị trí cho nó nữa.

Ngay bên dưới cột bên phải là khu vực Thiết lập menu, bạn có thể thao tác lựa chọn vị trí menu ở đây.

Như trên hình bạn có thể thấy giao diện mình đang dùng có 5 vị trí để đặt menu. Thường thì Main Menu sẽ là menu chính cửa website và nằm ngay trên đầu trang.

Ngoài ra còn có:

• Main Menu – Mobile là menu trên giao diện thiết bị di động.
• Footer Menu: menu chân trang
• Top Bar Menu: Menu đầu trang
• My Account Menu: Menu cho phần quảng lý tài khoản thành viên

Chú ý: 1 Menu thì có thể hiển thị ở nhiều vị trí. Tức là nếu bạn tick vào tất cả các vị trí bên trên thì menu của bạn sẽ hiển thị ở toàn bộ những vị trí đó.

Nhưng 1 vị trí chỉ chứa được 1 Menu, vì vậy khi bạn tick vào vị trí nào mà đã có menu rồi thì menu của bạn sẽ được thay thế bằng menu mới nhất.

Mỗi giao diện bạn sử dụng sẽ có các vị trí hiển thị menu khác nhau, vì thế tùy vào giao diện mà bạn lựa chọn vị trí menu cho hợp lý nhé. Thường thì các giao diện wordpress sẽ có một vị trí đặt tên là Main Menu ở trên đầu website.

Cuối cùng các bạn nhớ bấm nút lưu lại để cập nhật toàn bộ thay đổi của mình và ra trang chủ load lại trang để kiểm chứng thành quả.

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

UPDATE: Hiện tại hướng dẫn này đã không còn phù hợp nữa. Mời bạn tham khảo Hướng dẫn tích hợp chat facebook vào website 2020 – Code chuẩn Facebook để có hướng dẫn chuẩn nhất về việc tích hợp tính năng chát facebook vào website của mình.

Hiện nay hầu như các trang web đều sử dụng Customer Chat Facebook hay còn gọi là Live Chat Facebook cho việc tương tác và hỗ trợ khách hàng. Với tiện ích này, người dùng khi truy cập vào website có thể để lại tin nhắn chát trực tiếp với fanpage. Hầu hết mọi người đều có tài khoản facebook nên việc kết nối chát vô cùng đơn giản, Đồng thời tin nhắn của khách hàng cũng sẽ được lưu lại trong inbox của fanpage. Việc này giúp cho công việc chăm sóc khách hàng sẽ hiệu quả hơn rất nhiều. Dạo gần đây các webmaster đang gặp khó khăn khi tích hợp chát facebook vào website mà chúng lại không hiển thị. Vậy nguyên nhân từ đâu?

Tìm hiểu nguyên nhân Live Chat Facebook không hiển thị trên website

Vào vấn đề chính luôn nhé, vừa rồi mình có tích hợp Live chat Facebook cho một website mới bằng plugin Chatfuel Customer Chat. Sau khi cài đặt xong mình vô cùng bất ngờ vì chẳng thấy cái icon chat quen thuộc trên website như mọi khi. Như vậy là Live Chat Facebook không hoạt động. Mình bắt đầu tìm hiểu nguyên nhân, và việc đầu tiên mình làm là:

F12 dò code xem có bị lỗi js hay có đoạn code bị chặn hiển thị.

Kết quả là mình tìm được cái này:

Tạm dịch đoạn thông báo trên như sau:

# Plugin CustomerChat không còn sử dụng được SDK Facebook

# Để tiếp tục sử dụng nó, vui lòng sử dụng URL SDK chuẩn,

# nghĩa là thay thế file sdk,js bằng sdk/xfbml.customerchat.js

# Chi tiết xem thêm tại…https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin/sdk

Truy cập vào đường link mà đoạn thông báo trên gợi ý chúng ta sẽ thấy một thông tin vô cùng quan trọng với nội dung:

Facebook thông báo với chúng ta rằng: “Bắt đầu từ ngày 1/8/2019 bạn sẽ không thể sử dụng URL: https://connect.facebook.net/en_US/sdk.js. Nếu bạn không chuyển sang URL được nêu dưới đây, plugin sẽ không hiển thị trên trang web của bạn.” Và URL đó là: https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js Như vậy, chúng ta đã tìm ra được nguyên nhân của việc xảy ra lỗi khi tích hợp Live Chat Facebook vào website của bạn. Đó là do phía Facebook đã đổi đường link của file sdk.

Xử lý lỗi không hiển thị Live chat Facebook bằng cách thay đổi url mới của file sdk

Chúng ta cùng xem lại đoạn code mà trước đây facebook đã đưa cho các bạn để tích hợp LiveChat vào website. Đoạn code có nội dung như sau:

<!-- Load Facebook SDK for JavaScript -->
    <div id="fb-root"></div>
    <script>(function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = 'https://connect.facebook.net/vi_VN/sdk/xfbml.customerchat.js';
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>

    <!-- Your customer chat code -->
    <div class="fb-customerchat"
    attribution=setup_tool
    page_id="182427458556909">
</div>

Bạn hãy chú ý dòng url màu đỏ bên trên bây giờ chúng ta đổi nó thành url mới mà facebook đã báo cho chúng ta:https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js Và lúc này đoạn code của các bạn sẽ được thay đổi như sau:

(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

Lưu lại và kiểm tra xem LiveChat Facebook đã hoạt động chưa nào?

 Thật tuyệt vời, khung chát quen thuộc của chúng ta đã hiện ra. Như vậy mình đã chia sẻ với các bạn cách để xử lý tình trạng Live Chat Facebook gặp phải lỗi không hiển thị trên website của bạn. Chúc bạn thành công! Nếu bạn chưa làm được hoặc có thắc mắc gì về mấy vụ code này thì hãy để lại comment bên dưới hoặc inbox vào LiveChat ngay bên dưới góc trái website của mình nhé. Mình sẽ gửi câu trả lời sớm nhất cho bạn.