Hướng dẫn tích hợp tìm kiếm Google vào trang web WordPress

Chào các bạn mình là Xuân Thức, hôm nay mình sẽ hướng dẫn các bạn tạo một trang tìm kiếm thông qua công cụ tìm kiếm tùy chỉnh của Google lên website WordPress. Hy vọng nó sẽ giải quyết được vấn đề của bạn qua các bước đơn giản sau đây.
Demo: http://xuanthuc.com

Đăng ký Google tìm kiếm tùy chỉnh.

Truy cập vào https://cse.google.com.vn và đăng nhập bằng tài khoản gmail của các bạn, tiến hành điền thông tin như hình bên dưới.

Một tài khoản Gmail có thể tạo nhiều domain khác nhau

Một tài khoản Gmail có thể tạo nhiều domain khác nhau

Vào “Chỉnh sửa công cụ tìm kiếm” -> “Giao diện” để thiết lập hiển thị kết quả tìm kiếm và nhấn “Lưu và lấy mã” ta sẽ được đoạn mã như thế này:

<script>
  (function() {
    var cx = '017297498770277056983:xm1qsqq6n_8';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:searchresults-only></gcse:searchresults-only>
Có thể chọn nhiều kiểu hiển thị nhưng ở đây mình chọn "Chỉ kết quả"

Có thể chọn nhiều kiểu hiển thị nhưng ở đây mình chọn “Chỉ kết quả”

Các bạn copy mã vừa sinh ra dán vào trước thẻ </head> website của bạn, sau đó bỏ đoạn này đi.

<gcse:searchresults-only></gcse:searchresults-only>

Tạo Page kết quả.

Bước 1: Các bạn vào thư mục theme của trang WordPress theo đường dẫn thư mục “public_html/wp-content/themes/ten-theme-cua-ban”, sau đó tạo một file với tên bất kỳ ở đây mình tạo file template_search.php.

Bước 2: Copy nội dung trong file page.php hoặc single.php tùy theo sở thích của bạn muốn trang kết quả tìm kiếm hiển thị như nào, sau đó dán vào nội dung file template_search.php vừa tạo.

Bước 3: Bỏ phần nội dung bài viết đi, thông thường thì sẽ là thẻ <?php the_content(); ?> tùy vào từng giao diện, đại khái là bạn muốn kết quả tìm kiếm hiển thị ở đâu thì đặt thẻ sau đây vào chổ đó.

<gcse:searchresults-only></gcse:searchresults-only>

Bước 4: Thêm đoạn code sau vào đầu file template_search.php

<?php
/*
Template Name: Search Results
 */
?>

Đoạn code trên dùng để tạo một Template cho Page trong giao diện của bạn, ở đây cụ thể là Template cho trang kết quả tìm kiếm.

Bước 5: Vào wp-admin của trang web tạo một Page với tên là Kết quả tìm kiếm và chọn Template là “Search Results” sau đó bấm “Publish” để hoàn tất.

tao-page-ket-qua-tim-kiem

Tạo form tìm kiếm.

Việc cuối tuần là tạo textbox để nhập từ khóa tìm kiếm và button tìm, các bạn dán đoạn code bên dưới vào vị trí cần hiên thị ô tìm kiếm và chỉnh sửa lại theo trang web của bạn.

<form method="get" action="http://xuanthuc.com/tim-kiem/">
              <input type="text" placeholder="Nhập từ khóa tìm kiếm" id="q" name="q" value="<?php the_search_query(); ?>">
              <input type="submit" value="Tìm Kiếm">
            </form>

http://xuanthuc.com/tim-kiem/ chính là đường dẫn của Page bạn vừa tạo ở trên.

Và đây là kết quả đạt được:

cai-dat-tim-kiem-google-cho-wordpress

Khi tạo xong mặc định kết quả tìm kiếm sẽ xuất hiện thêm các kết quả từ quảng cáo Google Adwords, các bạn có thể kiếm tiền từ công cụ này hoặc có thể bỏ nó đi bằng cách vào “Chỉnh sửa công cụ tìm kiếm” -> “Doanh nghiệp” và tick chọn vào “Không hiển thị quảng cáo …”

Chúc các bạn thành công, nếu có thắc mắc gì các bạn để lại bình luận ngay tại bài nay, mình sẽ giải đáp sớm nhất có thể, cảm ơn các bạn đã theo dõi bài viết trên Xuân Thức Blog.

GỬI BÌNH LUẬN