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.

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.