Tích hợp trang kết quả tìm kiếm Google CSE vào WP Google Custom Search Engine Google CSE là 1 công cụ cho phép bạn tự tạo 1 bộ máy tìm kiếm dựa trên Google và tích hợp vào website.. Bạn
Trang 1Tích hợp trang kết quả tìm kiếm Google CSE vào WP
Google Custom Search Engine (Google CSE) là 1 công
cụ cho phép bạn tự tạo 1 bộ máy tìm kiếm dựa trên Google
và tích hợp vào website Bạn có khả năng tùy chỉnh các thiết lập cho phù hợp mục đích tìm kiếm của riêng mình, VD: chỉ tìm kiếm trên 1 site chỉ định, tìm kiếm theo các từ khóa cho trước, tích hợp (hoặc loại bỏ) quảng cáo vào kết quả tìm kiếm, thay đổi ngôn ngữ hiển thị… Chi tiết về cách tạo lập, sử dụng và tùy biến các bạn có thể tự mày mò tại trang chủ của Google CSE, hoặc tìm kiếm trên mạng Do khuôn khổ bài viết, xin bỏ qua các chi tiết đó
Lợi thế của Google CSE
Một tính năng đặc biệt hữu dụng của Google CSE là nó cho phép tích hợp trang kết quả tìm kiếm vào website Thay vì
ra trang tìm kiếm có link tại Google:
http://www.google.com/cse?cx=0156566274
15006543897%3Ajavmyt6rnyc&ie=UTF-8&q=unikey&sa=Search&siteurl=www.google com%2Fcse%2Fhome%3Fcx%3D01565662741500 6543897%3Ajavmyt6rnyc
Trang 2bạn có thể biến nó thành (lưu ý domain đã được chuyển về domain của bạn):
http://yourdomain.com/search-results?cx=015656627415006543897%3Ajavm
yt6rnyc&cof=FORID%3A10&ie=UTF-8&q=unikey&sa.x=0&sa.y=0#1045
Tính năng này có 2 ưu điểm lớn về SEO:
1) Không để khách viếng thăm “đi ra ngoài” website (giảm Bounce Rate) Điều này hiển nhiên do khách không
bị đẩy ra ngoài Google mỗi khi tìm kiếm
2) Tăng số trang xem / lượt truy cập (Page Views /
Visits) Trước đây, người dùng khi tìm kiếm bị đẩy ra
Google, rồi mới quay trở lại website, tức là 2 lượt truy cập cho 2 trang được xem (trang tìm kiếm và trang bài viết đã tìm được) Với cách tích hợp trang kết quả tìm kiếm vào website, người dùng vẫn ở tại website (1 lượt truy cập) và xem ít nhất 3 trang (trang tìm kiếm, trang kết quả tìm kiếm
và trang bài viết tìm được)
Bởi vậy, chúng ta đều muốn tích hợp trang kết quả tìm kiếm vào website thay vì để mặc định Dưới đây sẽ trình
Trang 3bày cách tích hợp vào WordPress (đối với các hệ thống blog khác, Google có hướng dẫn 1 cách chung chung tại trang chủ của họ, các bạn có thể tham khảo nếu cần thiết)
Tích hợp trang kết quả tìm kiếm của Google CSE vào WordPress
Bước 1 Chọn cách hiển thị
Truy cập vào Google CSE và vào Control Panel của bộ máy tìm kiếm mà bạn đã tạo lập Vào phân mục Look and Feel, và chọn mục Iframe trong phần Choose a hosting option như hình dưới:
Bạn có thể chọn template hiển thị kết quả tìm kiếm và tùy biến màu sắc cho chúng như trong hình
Bước 2 Lấy mã
Sau khi tùy biến xong, nhất nút Get Code để lấy mã chèn
vào website:
Trang 4Ở đây trong mục Specify search results details bạn phải
điền URL của trang hiển thị kết quả tìm kiếm (mà lát nữa chúng ta mới tạo) Ở đây tôi để mặc định có dạng
http://yourdomain.com/search-results, bạn thay đổi domain là được
Trong phần Search box code là code để hiển thị hộp tìm
kiếm Hay copy đoạn code này và paste vào nơi mà bạn muốn hiển thị Thông thường là file header.php, hãy
mở file này ra và paste thử vào nhé (sau đó có thể tùy chỉnh
vị trí cho phù hợp)
Trang 5Phần Search results code chứa code mà chúng ta sẽ dùng
để hiển thị kết quả tìm kiếm Các bạn copy và nhớ lại code này để tí nữa dùng
Bước 3 Tạo trang template cho WordPress
Bạn mở file page.php trong template của WordPress và lưu lại nó với tên search-results.php Mở file
search-results.php và thực hiện các chỉnh sửa sau:
1 Xóa toàn bộ phần Loop trong đó đi, thay thế nó bằng
đoạn code trong phần Search results code mà lúc nãy ta
copy ở trên VD ban đầu mã của
search-results.php như sau:
<?php get_header() ?>
<div id="page">
<?php if (have_posts()): the_post();
?>
<h1 id="soft-title"><?php the_title();
?></h1>
Trang 6<div id="soft-content">
<?php the_content(); ?>
</div>
<?php else: error(); endif; ?>
</div>
<?php comments_template('', true); ?>
<?php get_footer() ?>
Xóa phần giữa (vòng lặp Loop đi) và thêm đoạn code
Google CSE vào, ta có:
<?php get_header() ?>
<div id="page">
<! Vòng lặp Loop đã bị xóa >
<! Code Google CSE được thêm vào > <div id="cse-search-results"></div>
Trang 7<script type="text/javascript">
var googleSearchIframeName = "cse-search-results";
var googleSearchFormName =
"cse-search-box";
var googleSearchFrameWidth = 600; var googleSearchDomain =
"www.google.com";
var googleSearchPath = "/cse";
</script>
<script type="text/javascript"
src="http://www.google.com/afsonline/sh ow_afs_search.js"></script>
</div>
<?php comments_template('', true); ?>
<?php get_footer() ?>
2 Thêm vào trên cùng của nó đoạn mã sau:
Trang 8<?php
/*
Template Name: Search Results (Google CSE)
*/
?>
Kết quả cuối cùng:
<?php
/*
Template Name: Search Results (Google CSE)
*/
?>
<?php get_header() ?>
<div id="page">
<! Vòng lặp Loop đã bị xóa >
Trang 9<! Code Google CSE được thêm vào > <div id="cse-search-results"></div> <script type="text/javascript">
var googleSearchIframeName = "cse-search-results";
var googleSearchFormName =
"cse-search-box";
var googleSearchFrameWidth = 600; var googleSearchDomain =
"www.google.com";
var googleSearchPath = "/cse";
</script>
<script type="text/javascript"
src="http://www.google.com/afsonline/sh ow_afs_search.js"></script>
</div>
<?php comments_template('', true); ?>
Trang 10<?php get_footer() ?>
Sau khi sửa xong file search-results.php, nhớ
upload nó lên host của bạn
Cuối cùng, bạn vào phần Admin của WordPress, tạo 1
Page mới lấy tên là Search Results:
Trong đó cần lưu ý (cả 3 điểm này đều rất quan trọng):
• URL của Page cần phải trùng với URL đã khai báo lúc trước trong Google CSE Nếu khác, bạn sửa lại trong
trang tùy chỉnh của Google CSE
• Phần nội dung của Page không cần điền gì
• Trong mục Template, nhớ chọn template Search
Results (Google CSE) Đây chính là template mà ta tạo ở
trên
Trang 11Publish Page là xong! Bây giờ bạn hãy thử vào trang chủ,
gõ thử từ khóa vào hộp tìm kiếm (mà mã của nó được chèn vào header.php như đã nói) và nhấn Enter, kết quả tìm kiếm sẽ được chuyển tới trang Search Results mà ta đã tạo chứ không bị đẩy ra ngoài Google nữa
Chúc các bạn có 1 blog WordPress pro Mọi góp ý xin để lại dưới comments