Cách thêm biểu mẫu tìm kiếm trong bài viết WordPress

Tác giả NetworkEngineer, Tháng mười một 24, 2021, 09:59:04 PM

« Chủ đề trước - Chủ đề tiếp »

0 Thành viên và 1 Khách đang xem chủ đề.

Cách thêm biểu mẫu tìm kiếm trong bài viết WordPress


Bạn có muốn thêm một biểu mẫu tìm kiếm vào một bài đăng WordPress không?

Thêm biểu mẫu tìm kiếm vào nội dung bài đăng hoặc trang của bạn là một cách tốt để khuyến khích khách truy cập tìm thấy nhiều nội dung hơn và ở lại trang web của bạn lâu hơn.

Trong bài viết này, mình sẽ chỉ cho bạn cách thêm một biểu mẫu tìm kiếm vào các bài đăng và trang của bạn bằng cách sử dụng shortcode tìm kiếm WordPress.

1. Tại sao phải thêm một biểu mẫu tìm kiếm vào bài viết và trang của bạn?

Nếu một khách truy cập đã thích đọc một bài đăng trên blog WordPress của bạn, thì họ có thể sẽ muốn đọc thêm. Đưa ra một biểu mẫu tìm kiếm trong bài đăng sẽ giúp họ tìm thấy nhiều nội dung của bạn hơn mà họ quan tâm.

Khi bạn giúp người dùng dễ dàng dành nhiều thời gian hơn trên trang web của mình, bạn có thể tăng số lần xem trang và giảm tỷ lệ thoát.

Khách truy cập của bạn cũng có nhiều khả năng tham gia vào danh sách email của bạn, để lại nhận xét, mua hàng và theo dõi bạn trên mạng xã hội.

Trong hướng dẫn này, mình sẽ chỉ cho bạn cách thêm biểu mẫu tìm kiếm WordPress chuẩn vào bài đăng của bạn. Nếu bạn muốn thêm biểu mẫu tìm kiếm tùy chỉnh, hãy xem hướng dẫn từng bước của mình về cách tạo biểu mẫu tìm kiếm WordPress tùy chỉnh.

Mình sẽ chỉ cho bạn hai phương pháp để thêm biểu mẫu tìm kiếm vào bài đăng của bạn và phương pháp đầu tiên là đơn giản nhất. Sử dụng các liên kết bên dưới để chuyển đến phương pháp bạn muốn sử dụng.

  • Phương pháp 1: Thêm biểu mẫu tìm kiếm bằng plugin
  • Phương pháp 2: Thêm biểu mẫu tìm kiếm bằng mã

2. Phương pháp 1: Thêm biểu mẫu tìm kiếm bằng plugin

Cách dễ nhất để thêm biểu mẫu tìm kiếm vào bài đăng của bạn là sử dụng plugin SearchWP. Đây là plugin tìm kiếm tốt nhất cho WordPress được sử dụng bởi hơn 30.000 trang web.

Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin SearchWP. Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của mình về cách cài đặt plugin WordPress.

Sau khi kích hoạt, bạn cần truy cập trang Settings >> SearchWP và sau đó nhấp vào tùy chọn trình đơn 'License'.


Sau đó, bạn cần nhập khóa cấp phép của mình vào hộp License. Bạn có thể tìm thấy thông tin này trong tài khoản của mình trên trang web SearchWP. Sau đó, bạn nên nhấp vào nút Activate.

Tiếp theo, bạn cần nhấp vào tùy chọn menu Engines. Thao tác này đưa bạn đến màn hình nơi bạn có thể chọn cài đặt công cụ tìm kiếm của mình.


Ở đây bạn cần tạo một công cụ tìm kiếm trên toàn trang web. Bạn có thể điều chỉnh cài đặt công cụ tìm kiếm của mình bằng cách nhấp vào trình đơn thả xuống Posts, Pages và Media.

Các thanh trượt Attribute Relevance trong mỗi phần điều chỉnh cách các công cụ tìm kiếm đánh giá và xếp hạng nội dung. Ví dụ: nếu bạn muốn đánh giá tiêu đề bài đăng cao hơn nội dung, thì bạn có thể điều chỉnh các thanh trượt cho phù hợp.


Sau khi bạn đã hoàn tất việc điều chỉnh cài đặt, hãy đảm bảo nhấp vào nút 'Save Engines' để lưu công cụ tìm kiếm mặc định.

Bây giờ bạn cần tải xuống SearchWP Shortcodes Extension để dễ dàng thêm biểu mẫu tìm kiếm bài đăng tùy chỉnh mới của mình vào WordPress.

Bạn sẽ cần truy cập trang web SearchWP Shortcodes Extension và sau đó nhấp vào nút 'Download available with active license'.


Sau đó, bạn cần cài đặt và kích hoạt tiện ích mở rộng giống như cách bạn đã cài đặt plugin ở trên. Bây giờ bạn có thể thêm một biểu mẫu tìm kiếm trong bài viết của mình.

Chỉ cần chỉnh sửa bài đăng và đặt con trỏ vào nơi bạn muốn thêm biểu mẫu tìm kiếm. Sau đó, nhấp vào biểu tượng dấu cộng 'Add Block' để hiển thị menu khối.


Tiếp theo, gõ 'html' vào hộp tìm kiếm. Sau đó, chọn khối 'Custom HTML'.

Khi bạn đã thêm khối mới, bạn có thể thêm các mã ngắn và HTML sau vào trang của mình. Nếu bạn cần thêm trợ giúp, hãy xem hướng dẫn của mình về cách thêm mã ngắn trong WordPress.

Mã nguồn [Chọn]
[searchwp_search_form]
   
<div class="search-results-wrapper">
 [searchwp_search_results]
  <h2>[searchwp_search_result_link]</h2>
  [searchwp_search_result_excerpt]
 [/searchwp_search_results]
</div>
   
<div class="no-search-results-found">
 [searchwp_search_results_none]
 No results found, please search again.
 [/searchwp_search_results_none]
</div>
   
<div class="search-results-pagination">
 [searchwp_search_results_pagination direction="prev" link_text="Previous"]
 [searchwp_search_results_pagination direction="next" link_text="Next"]
</div>

Mã này sẽ thêm một biểu mẫu tìm kiếm vào bài đăng, tạo một phần để hiển thị kết quả tìm kiếm, hiển thị thông báo không có kết quả nếu cần và thêm phân trang nếu kết quả đi vào nhiều trang.

Đảm bảo rằng bạn nhấp vào Publish hoặc Update để lưu bài đăng của mình và hiển thị nó.


Để xem biểu mẫu tìm kiếm đang hoạt động, chỉ cần xem bài đăng trên trang web WordPress của bạn. Đây là cách nó trông như thế này trên trang demo của mình đang chạy giao diện Twenty Twenty-One.


Để biết thêm mẹo về cách tùy chỉnh tìm kiếm của bạn, hãy xem hướng dẫn của mình về cách cải thiện tìm kiếm WordPress với SearchWP.

3. Phương pháp 2: Thêm biểu mẫu tìm kiếm bằng mã

Bạn cũng có thể thêm một biểu mẫu tìm kiếm vào các bài đăng trên WordPress của mình bằng cách sử dụng một đoạn mã. Phương pháp này không được khuyến khích cho người mới bắt đầu, vì vậy nếu bạn không quen thuộc với mã, thì bạn nên sử dụng Phương pháp 1 thay thế.

Trong phương pháp này, bạn sẽ phải chỉnh sửa tập tin functions.php của giao diện.

Nếu bạn chưa chỉnh sửa tập tin functions.php trước đó, thì hãy xem hướng dẫn dành cho người mới bắt đầu của mình về cách dán đoạn mã từ web vào WordPress.

Tất cả những gì bạn phải làm là mở tập tin functions.php của giao diện hoặc một plugin dành riêng cho trang web và dán mã sau:

Mã nguồn [Chọn]
add_shortcode('wpbsearch', 'get_search_form');
Đây là cách nó trông như thế nào trên trang web demo của mình khi sử dụng WordPress Theme Editor WordPress để thêm đoạn mã vào tập tin functions.php của giao diện Twenty Twenty-One.


Sau đó, bạn chỉ cần thêm shortcode [wpbsearch] vào bài đăng hoặc trang mà bạn muốn biểu mẫu tìm kiếm xuất hiện.


Điều này sẽ hiển thị biểu mẫu tìm kiếm mặc định. Để xem biểu mẫu tìm kiếm, chỉ cần xem bài đăng trên trang web WordPress của bạn.


Nếu bạn muốn hiển thị một biểu mẫu tìm kiếm tùy chỉnh, thì bạn nên sử dụng mã này để thay thế.

Mã nguồn [Chọn]
function wpbsearchform( $form ) {
   
    $form = '<form role="search" method="get" id="searchform" action="' . home_url( '/' ) . '" >
    <div><label class="screen-reader-text" for="s">' . __('Search for:') . '</label>
    <input type="text" value="' . get_search_query() . '" name="s" id="s" />
    <input type="submit" id="searchsubmit" value="'. esc_attr__('Search') .'" />
    </div>
    </form>';
   
    return $form;
}
   
add_shortcode('wpbsearch', 'wpbsearchform');

Vui lòng sửa đổi mã để tùy chỉnh biểu mẫu tìm kiếm như bạn muốn.

Mình hy vọng hướng dẫn này đã giúp bạn biết cách thêm tìm kiếm vào bài đăng của mình bằng shortcode tìm kiếm WordPress.
Bạn cũng có thể muốn tìm hiểu cách tạo địa chỉ email doanh nghiệp miễn phí hoặc xem danh sách lý do tại sao bạn nên sử dụng WordPress cho trang web của mình.

Similar topics (5)