Tích hợp công cụ tìm kiếm Google CSE vào WordPress

Google CSE

Google CSE là gì?

Google CSE (viết tắt của Google Custom Search Engine – Công cụ tìm kiếm tùy chỉnh) là một sản phẩm của Google cho phép tạo công cụ tìm kiếm cho trang web của bạn hoặc nhiều trang web khác nhau.

Bạn có thể thiết lập để công cụ tìm kiếm nội dung lẫn hình ảnh trên trang web. Bạn có thể chỉnh được thứ hạng, tùy chỉnh giao diện, mời bạn bè vào xây dựng công cụ tìm kiếm.

Bạn có thể sử dụng Google CSE để tìm kiếm trên trang web bất kỳ hoặc nhiều trang web khác nhau. Nhưng tốt nhất là chỉ nên tìm kiếm trên trang web của bạn.

Tại sao bạn nên dùng Google CSE cho WordPress

Công cụ tìm kiếm mặc định của WordPress rất vô dụng. Nó cho ra kết quả có khi không hề liên quan đến từ khóa.

Nếu sử dụng công cụ tìm kiếm mặc định của WordPress, khi người dùng tìm kiếm, WordPress sẽ truy vấn đến CSDL để cho ra kết quả. Việc này rất tốn tài nguyên máy chủ, mà kết quả chưa chắc đã chính xác. Nếu như trang web của bạn có nhiều lượt tìm kiếm một lúc thì trang web sẽ trở nên rất chậm.

Bằng cách sử dụng Google CSE, bạn có thể khắc phục được vấn đề trên. Google CSE sẽ truy vấn trên máy chủ Google để cho ra kết quả ngay trên trang web của bạn. Vừa có thể giảm tải cho máy chủ của bạn, vừa cho ra kết quả chính xác.

Với Google CSE, bạn có thể:

  • Tạo công cụ tìm kiếm cho nhiều trang web hoặc một trang web cụ thể.
  • Tính năng tìm kiếm hình ảnh trên trang web (thích hợp cho trang web chuyên về hình ảnh).
  • Tùy chỉnh giao diện của kết quả tìm kiếm.
  • Tính năng tự động hoàn thành khi gõ từ khóa tìm kiếm.
  • Quảng cáo bài viết nào đó khi người dùng tìm kiếm từ khóa cụ thể (miễn phí).
  • Liên kết với tài khoản Adsense để kiếm tiền khi người dùng nhấp vào quảng cáo trên kết quả tìm kiếm.

Hướng dẫn tích hợp Google CSE vào WordPress

Đăng ký Google CSE

Trước tiên, đăng nhập vào trang Google Custom Search bằng tài khoản Google của bạn.

Nhấp vào “Công cụ tìm kiếm mới” để đăng ký. Điền thông tin trang web của bạn (không nhất thiết là của bạn) rồi đặt tên (bất kỳ). Xong nhấn “Tạo”.

đăng ký công cụ tìm kiếm Google CSE

Nhấn vào “Bảng điều khiển” để vào trang thiết lập công cụ tìm kiếm.

bảng điều khiển Google CSE

Việc tiếp theo bạn cần làm là tùy chỉnh giao diện kết quả tìm kiếm cho phù hợp với trang web.

Vào “Giao diện”, ở tab “Bố cục”, chọn “Chỉ kết quả”, rồi nhấn “Lưu”.

tùy chỉnh giao diện kết quả tìm kiếm

Các phần khác như tùy chỉnh màu sắc bạn nên tự mình khám phá ở tab “Tùy chỉnh”. Hãy tạo cho mình một trang kết quả thật cá tính.

Tích hợp Google CSE vào WordPress

Bây giờ sẽ có 2 cách để bạn tiếp tục:

  • Cách 1: Sử dụng plugin: Cách này dễ thực hiện, phù hợp với người mới. Đơn giản chỉ cần đặt ô tìm kiếm vào phần Widget. Bạn có thể tích hợp Google CSE vào WordPress mà không cần phải chỉnh sửa code.
  • Cách 2: Chỉnh sửa theme : Cách này phức tạp hơn một chút. Nếu bạn biết cách chỉnh sửa code thì làm theo. Với cách này bạn sẽ có thể sử dụng ngay ô tìm kiếm mặc định của WordPress cho Google CSE.

Cách 1: Tích hợp Google CSE bằng plugin WP Google Search

Cài đặt và kích hoạt plugin WP Google Search. Tải về tại đây.

plugin WP Google Search

Quay lại trang Google CSE, vào “Thiết lập”, ở tab “‘Cơ bản”, nhấn vào “ID công cụ tìm kiếm” rồi copy đoạn ID.

lấy ID công cụ tìm kiếm tùy chỉnh

Vào trang quản trị WordPress, vào Cài đặt > WP Google Search để thiết lập cho plugin hoạt động.

Dán vào ID Google CSE đã copy ở trên vào. Xong kéo xuống nhấn lưu.

thiết lập plugin WP Google Search

Thêm widget Google Custom Search vào nơi bạn muốn.Thêm widget Google Search vào trang web

Bây giờ bạn có thể thực hiện tìm kiếm ở ô Google Custom Search rồi.

Cách 2: Tích hợp Google CSE vào WordPress bằng cách chỉnh sửa theme

Với cách này, mình khuyên bạn nên chỉnh sửa trên child theme. Nếu bạn chưa có child theme thì hãy tạo child theme cho WordPress trước khi tiếp tục. Bởi vì mọi chỉnh sửa trên theme chính sẽ bị mất khi bạn cập nhật bản mới.

Nếu bạn đã tạo child theme rồi thì hãy tiếp tục.

Đầu tiên, quay trở lại trang quản trị Google CSE, chọn “Giao diện”, ở tab “Bố cục” chọn “Chỉ kết quả”. Xong nhấn “Lưu & “”Nhận mã”

tùy chỉnh giao diện kết quả tìm kiếm

mã html google custom search

Code Google CSE

Bây giờ làm theo các bước để tạo trang chứa kết quả tìm kiếm:

  1. Tạo trang mới.
  2. Chuyển qua tab “Văn bản”
  3. Dán đoạn code Google CSE vào.
  4. Đặt tên trang kết quả tìm, sửa lại URL trang tìm kiếm cho phù hợp.
  5. Đăng.

tạo trang kết quả tìm kiếm

Chỉnh sửa file “searchform.php” trong folder child theme.

chỉnh sửa file searchform.php

Trước khi tiếp tục, mình muốn giải thích một chút.

Trang tìm kiếm của mình có địa chỉ URL:

https://kiem-tien.com/search

Khi tìm kiếm với từ khóa “google”, nó sẽ trỏ đến địa chỉ:

https://kiem-tien.com/search?q=google

Một số theme sẽ không sử dụng tham số “q”, mà có thể là “s”.

Việc của bạn là sửa file searchform.php sao cho khi người dùng tìm kiếm, nó sẽ trỏ về địa chỉ trang tìm kiếm với tham số “q”.

Ví dụ: đây là nội dung file searchform.php của theme Twenty Sixteen

<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
 <label>
 <span class="screen-reader-text"><?php echo _x( 'Search for:', 'label', 'twentysixteen' ); ?></span>
 <input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Search &hellip;', 'placeholder', 'twentysixteen' ); ?>" value="<?php echo get_search_query(); ?>" name="s" />
 </label>
 <button type="submit" class="search-submit"><span class="screen-reader-text"><?php echo _x( 'Search', 'submit button', 'twentysixteen' ); ?></span></button>
</form>

Ở đây chỉ cần chỉnh sửa ở 2 vị trí.

  • Thay thế giá trị action ở dòng thứ 1 từ
action="<?php echo esc_url( home_url( '/' ) ); ?>"

bằng địa chỉ URL trang tìm kiếm của bạn

action="/search"
  • Thay thế giá trị name=”s” ở dòng thứ 4 thành name=”q”.

Nội dung đúng sẽ là:

<form role="search" method="get" class="search-form" action="/search">
 <label>
 <span class="screen-reader-text"><?php echo _x( 'Search for:', 'label', 'twentysixteen' ); ?></span>
 <input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Search &hellip;', 'placeholder', 'twentysixteen' ); ?>" value="<?php echo get_search_query(); ?>" name="q" />
 </label>
 <button type="submit" class="search-submit"><span class="screen-reader-text"><?php echo _x( 'Search', 'submit button', 'twentysixteen' ); ?></span></button>
</form>

Bây giờ bạn vào test thử ở ô tìm kiếm mặc định của WordPress xem thử nó đã hoạt động đúng chưa nhé.

trang kết quả tìm kiếm

Lưu ý: Google CSE sử dụng kết quả tìm kiếm của Google. Nên bài viết nào chưa được Google index thì nó chưa thể hiện lên ở kết quả tìm kiếm.

Nếu bạn có tài khoản Adsense thì đừng quên bật chức năng kiếm tiền cho Google CSE nhé!

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