Thêm thanh tìm kiếm vào menu WordPress

2 tháng ago, WordPress Plugin, Views

Tại Sao Nên Thêm Thanh Tìm Kiếm Vào Menu WordPress?

Thêm thanh tìm kiếm vào menu WordPress là một cách tuyệt vời để cải thiện trải nghiệm người dùng và giúp khách truy cập dễ dàng tìm thấy nội dung họ cần. Mặc dù WordPress đã có chức năng tìm kiếm, việc đặt nó ở một vị trí nổi bật như menu sẽ làm cho nó dễ tiếp cận hơn, đặc biệt là trên các trang web có nhiều nội dung.

Dưới đây là một vài lý do tại sao bạn nên cân nhắc thêm thanh tìm kiếm vào menu của mình:

Cải thiện khả năng sử dụng: Thanh tìm kiếm trong menu giúp người dùng nhanh chóng tìm kiếm thông tin cụ thể mà không cần phải duyệt qua nhiều trang.
Giảm tỷ lệ thoát trang: Khi người dùng dễ dàng tìm thấy những gì họ cần, họ sẽ có nhiều khả năng ở lại trang web của bạn lâu hơn.
Tăng mức độ tương tác: Bằng cách cho phép người dùng tìm kiếm nội dung họ quan tâm, bạn đang khuyến khích họ tương tác nhiều hơn với trang web của bạn.
Cải thiện SEO: Mặc dù không trực tiếp ảnh hưởng đến SEO, việc cải thiện trải nghiệm người dùng có thể dẫn đến thời gian ở lại trang web lâu hơn và tỷ lệ thoát trang thấp hơn, điều này có thể gián tiếp ảnh hưởng đến thứ hạng tìm kiếm của bạn.

Có nhiều cách để thêm thanh tìm kiếm vào menu WordPress, từ việc sử dụng các widget có sẵn đến việc sử dụng plugin hoặc thậm chí là viết mã tùy chỉnh. Trong bài viết này, chúng ta sẽ khám phá các phương pháp phổ biến nhất.

Sử Dụng Widget Mặc Định Của WordPress

Cách đơn giản nhất để thêm thanh tìm kiếm vào menu của bạn là sử dụng widget tìm kiếm mặc định của WordPress. Phương pháp này phù hợp cho những người dùng mới bắt đầu và không muốn cài đặt thêm plugin.

Truy cập trang quản trị WordPress: Đăng nhập vào trang quản trị WordPress của bạn bằng thông tin đăng nhập của bạn.
Đi đến Appearance > Widgets: Trong bảng điều khiển quản trị, di chuột qua “Appearance” (Giao diện) và chọn “Widgets” (Tiện ích).
Tìm widget “Search”: Trong danh sách các widget có sẵn, tìm widget có tên “Search” (Tìm kiếm).
Kéo widget vào menu: Kéo widget “Search” vào khu vực menu mà bạn muốn hiển thị thanh tìm kiếm. Khu vực menu thường có tên như “Primary Menu” (Menu chính), “Secondary Menu” (Menu phụ) hoặc tên tương tự tùy thuộc vào theme bạn đang sử dụng.
Lưu thay đổi: Nhấp vào nút “Save Changes” (Lưu thay đổi) để lưu cài đặt của bạn.

Sau khi lưu, hãy truy cập trang web của bạn và kiểm tra menu. Bạn sẽ thấy thanh tìm kiếm được hiển thị ở vị trí bạn đã chọn. Widget tìm kiếm mặc định khá đơn giản, nhưng nó hoạt động tốt và dễ cài đặt.

Sử Dụng Plugin Để Thêm Thanh Tìm Kiếm Nâng Cao

Nếu bạn muốn có nhiều tùy chọn tùy chỉnh hơn cho thanh tìm kiếm của mình, bạn có thể sử dụng một plugin WordPress. Có rất nhiều plugin tìm kiếm miễn phí và trả phí có sẵn, mỗi plugin cung cấp các tính năng và lợi ích khác nhau. Dưới đây là một số plugin phổ biến:

Ajax Search Lite: Plugin này cung cấp chức năng tìm kiếm Ajax, cho phép người dùng xem kết quả tìm kiếm ngay lập tức khi họ nhập. Nó cũng cung cấp nhiều tùy chọn tùy chỉnh để bạn có thể điều chỉnh giao diện của thanh tìm kiếm.
Ivory Search: Ivory Search là một plugin tìm kiếm mạnh mẽ cho phép bạn tùy chỉnh chức năng tìm kiếm một cách chi tiết. Bạn có thể tạo nhiều cấu hình tìm kiếm, giới hạn kết quả tìm kiếm theo loại bài đăng, danh mục, thẻ và hơn thế nữa.
SearchWP: SearchWP là một plugin tìm kiếm cao cấp cung cấp các tính năng nâng cao như tìm kiếm theo thuộc tính tùy chỉnh, tìm kiếm theo PDF và tài liệu, và hơn thế nữa. Nó cũng tích hợp tốt với WooCommerce.

Để cài đặt một plugin, hãy làm theo các bước sau:

Truy cập trang quản trị WordPress: Đăng nhập vào trang quản trị WordPress của bạn.
Đi đến Plugins > Add New: Trong bảng điều khiển quản trị, di chuột qua “Plugins” (Plugin) và chọn “Add New” (Thêm mới).
Tìm kiếm plugin: Nhập tên của plugin bạn muốn cài đặt vào thanh tìm kiếm.
Cài đặt và kích hoạt plugin: Nhấp vào nút “Install Now” (Cài đặt ngay) bên cạnh plugin bạn muốn cài đặt, sau đó nhấp vào nút “Activate” (Kích hoạt) sau khi cài đặt xong.
Cấu hình plugin: Sau khi plugin được kích hoạt, hãy truy cập trang cài đặt của plugin để cấu hình các tùy chọn của nó. Mỗi plugin có các tùy chọn cấu hình khác nhau, vì vậy hãy đọc tài liệu của plugin để biết thêm chi tiết.
Thêm thanh tìm kiếm vào menu: Hầu hết các plugin tìm kiếm sẽ cung cấp một widget hoặc shortcode mà bạn có thể sử dụng để thêm thanh tìm kiếm vào menu của bạn. Hãy tham khảo tài liệu của plugin để biết cách thực hiện việc này.

Sau khi cài đặt và cấu hình plugin, hãy truy cập trang web của bạn và kiểm tra menu. Bạn sẽ thấy thanh tìm kiếm nâng cao được hiển thị ở vị trí bạn đã chọn.

Thêm Thanh Tìm Kiếm Vào Menu WordPress Bằng Code (Tùy Chỉnh)

Nếu bạn là một nhà phát triển và muốn kiểm soát hoàn toàn giao diện và chức năng của thanh tìm kiếm, bạn có thể thêm nó vào menu của mình bằng cách viết mã tùy chỉnh. Phương pháp này đòi hỏi kiến thức về PHP, HTML và CSS.

Lưu ý: Trước khi chỉnh sửa theme của bạn, hãy tạo bản sao lưu để tránh mất dữ liệu nếu có sự cố xảy ra.

Truy cập tệp functions.php của theme: Chỉnh sửa tệp `functions.php` của theme bạn đang sử dụng. Bạn có thể truy cập tệp này bằng cách đi đến Appearance > Theme Editor trong bảng điều khiển quản trị WordPress. Cẩn thận: chỉnh sửa trực tiếp file theme có thể gây ra lỗi, hãy cân nhắc sử dụng child theme.

Thêm code để tạo biểu mẫu tìm kiếm: Thêm đoạn code sau vào tệp `functions.php` để tạo biểu mẫu tìm kiếm:


function add_search_form_to_menu( $items, $args ) {
    if ( $args->theme_location == 'primary' ) { // Thay 'primary' bằng vị trí menu của bạn
        $search_form = '';
        $search_form .= get_search_form( false );
        $search_form .= '';
        $items .= $search_form;
    }
    return $items;
}
add_filter( 'wp_nav_menu_items', 'add_search_form_to_menu', 10, 2 );

Thay thế `’primary’` bằng vị trí menu mà bạn muốn hiển thị thanh tìm kiếm. Bạn có thể tìm thấy vị trí menu trong Appearance > Menus.

Thêm CSS để định dạng thanh tìm kiếm: Thêm CSS vào tệp `style.css` của theme hoặc thông qua Customizer (Appearance > Customize > Additional CSS) để định dạng thanh tìm kiếm. Ví dụ:


.menu-item-search {
    display: inline-block;
    margin-left: 10px; /* Điều chỉnh khoảng cách */
}

.menu-item-search .search-form {
    display: inline-block;
}

.menu-item-search .search-field {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.menu-item-search .search-submit {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 3px;
    cursor: pointer;
}

Lưu thay đổi: Lưu các thay đổi bạn đã thực hiện vào tệp `functions.php` và `style.css`.

Sau khi lưu các thay đổi, hãy truy cập trang web của bạn và kiểm tra menu. Bạn sẽ thấy thanh tìm kiếm được hiển thị ở vị trí bạn đã chọn. Bạn có thể tùy chỉnh giao diện của thanh tìm kiếm bằng cách chỉnh sửa CSS.

Lời Khuyên Thêm:

Đảm bảo thanh tìm kiếm dễ nhìn thấy: Đặt thanh tìm kiếm ở một vị trí nổi bật trong menu, nơi người dùng dễ dàng nhìn thấy.
Sử dụng văn bản gợi ý: Sử dụng văn bản gợi ý trong hộp tìm kiếm để hướng dẫn người dùng về những gì họ có thể tìm kiếm. Ví dụ: “Tìm kiếm bài viết…”, “Tìm kiếm sản phẩm…”.
Kiểm tra chức năng tìm kiếm: Thường xuyên kiểm tra chức năng tìm kiếm để đảm bảo rằng nó hoạt động chính xác và trả về kết quả phù hợp.
Tối ưu hóa chức năng tìm kiếm: Cân nhắc sử dụng các plugin hoặc mã tùy chỉnh để tối ưu hóa chức năng tìm kiếm của bạn, chẳng hạn như thêm các từ khóa liên quan hoặc sử dụng tìm kiếm Ajax.
Phân tích dữ liệu tìm kiếm: Sử dụng các công cụ phân tích để theo dõi những gì người dùng đang tìm kiếm trên trang web của bạn. Điều này có thể giúp bạn hiểu rõ hơn về nhu cầu của họ và cải thiện nội dung của bạn.

Kết Luận

Thêm thanh tìm kiếm vào menu WordPress là một cách đơn giản nhưng hiệu quả để cải thiện trải nghiệm người dùng và giúp khách truy cập dễ dàng tìm thấy nội dung họ cần. Cho dù bạn chọn sử dụng widget mặc định, plugin hay mã tùy chỉnh, hãy đảm bảo rằng thanh tìm kiếm của bạn dễ nhìn thấy, dễ sử dụng và hoạt động chính xác.

#ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active::before { background-color: #ededed; } aa