Tích hợp công cụ tìm kiếm Google cho theme Paradise

Tích hợp công cụ tìm kiếm Google (Google Programmable Search Engine/ Google Custom Search Engine) cho theme Paradise.

Không cần nói thì chắc ai cũng biết công cụ tìm kiếm của Google tuyệt vời như thế nào rồi. Bạn có thể tìm thấy gần như tất cả mọi thứ trên internet chỉ với Google Search. Vậy thì tại sao chúng ta không tích hợp nó vào website WordPress để thay thế công cụ tìm kiếm mặc định vốn nổi tiếng là “kém thông minh” của Automattic? Đến website WordPress.org còn sử dụng Google Custom Search cơ mà. WP Căn bản cũng đã làm điều này từ lâu. Và nếu bạn cũng đang sử dụng theme Paradise do chúng tôi phát triển thì ngay sau đây là hướng dẫn chi tiết.

Tham khảo thêm:

• Các tính năng của theme Paradise tích hợp trong Customizer
• Tại sao bạn nên chọn theme Paradise cho website WordPress?

Một số yêu cầu bắt buộc

• Bạn phải có sẵn tài khoản Google (Gmail).
• Website của bạn phải được Google index dữ liệu.
• Bạn phải đang sử dụng Genesis Framework và Paradise child theme.

Chèn công cụ tìm kiếm Google vào theme Paradise

1. Đầu tiên, các bạn cần truy cập vào trang Programmable Search của Google (tên gọi trước đây là Google Custom Search) => click vào nút Add.

2. Khai báo các thông tin để khởi tạo công cụ tìm kiếm.

Trong đó:

• Sites to search: điền danh sách tên miền của các website mà bạn muốn lấy kết quả tìm kiếm.
• Language: chọn ngôn ngữ của công cụ tìm kiếm.
• Name of the search engine: đặt tên cho công cụ tìm kiếm.

Sau khi điền xong, click vào nút Create.

3. Click vào nút Get code.

4. Các bạn sẽ được Google cung cấp một đoạn mã. Hãy chú ý đến ID nằm sau chữ cx= và trước dấu ". Chúng ta sẽ sử dụng ID này trong bước tiếp theo.

5. Trên sidebar bên trái, các bạn chọn đúng tên của công cụ tìm kiếm (đã đặt tên ở bước 2) => chọn Look and feel => chọn Layout => chọn Result only => click vào nút Save để lưu lại.

Các bạn cũng hoàn toàn có thể tùy biến các chức năng cũng như giao diện hiển thị của kết quả tìm kiếm theo ý thích. Tuy nhiên, tôi sẽ không đề cập chúng trong bài viết này.

6. Down load file page_google_search.php tại đây về máy tính của bạn.

7. Truy cập thư mục của theme Paradise trên host (/wp-content/themes/paradise/), upload file page_google_search.php đã download ở bước 6 lên. File này nằm ngang hàng với file functions.php của theme.

8. Mở file page_google_search.php ra. Ở dòng code số 14, thay partner-pub-2490320644516140:1061358914 bằng ID mà bạn được cung cấp ở bước 4. Lưu file lại sau khi làm xong.

9. Mở file functions.php của theme ra, thêm đoạn code sau đây vào cuối file rồi lưu lại:

//* Alter the Genesis search
add_filter( 'genesis_search_form', 'bs_search_form', 10, 4);
function bs_search_form( $form, $search_text, $button_text ) {
$onfocus = " onfocus=\"if (this.value == '$search_text') {this.value = '';}\"";
$onblur = " onblur=\"if (this.value == '') {this.value = '$search_text';}\"";
$form = '<form method="get" class="searchform search-form" action="' . home_url() . '/search" >' . '
<input type="search" value="' . esc_attr($search_text) . '" name="q" aria-label="search" class="s search-input"' . $onfocus . $onblur . ' />
<input type="submit" class="searchsubmit search-submit" value="' . esc_attr( $button_text ) . '" />
</form>';
return $form;
}

Các bạn cũng có thể sử dụng plugin Code Snippets để chèn code này, tránh việc code bị xóa mất sau khi cập nhật child theme lên phiên bản mới.

10. Truy cập trang quản trị WordPress => Pages => Add New. Tạo 1 trang mới (để trống phần nội dung, đặt permalink là https://tenmiencuaban.com/search và tiêu đề theo ý thích) => lựa chọn Template là Google CSE => Xuất bản nó.

Nhớ thay https://tenmiencuaban.com/ bằng tên miền chính xác của bạn.

11. Kiểm tra kết quả bằng cách thử tìm kiếm bằng khung tìm kiếm trên menu hoặc bất cứ widget tìm kiếm nào khác mà bạn đã chèn. Thật đơn giản phải không nào? Chúc các bạn thành công.

Lưu ý: khi cập nhật child theme, file page_google_search.php và đoạn code trong file functions.php sẽ bị xóa mất. Do vậy, các bạn nên backup chúng trước để tiện thêm lại sau khi cập nhật child theme.

Nếu bạn thích bài viết này, hãy theo dõi blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất nhé. Cảm ơn rất nhiều. :)