Tùy chỉnh công cụ tìm kiếm Google trong WordPress

Công cụ tìm kiếm mặc định của WordPress có thể không làm hài lòng bạn, đặc biệt là đối với việc tìm kiếm tiếng Việt càng trở nên rắc rối hơn. Nhiều lúc ngay cả trên chính site NhanWeb của mình mình cũng không thể tìm kiếm được bài viết mình cần thông qua một số keyword. Giờ, mình quyết định dùng một công cụ tìm kiếm mới thay vì sử dụng công cụ tìm kiếm WordPress và đem đến cho bạn bài viết này.

Hôm nay, xin gửi đến các bạn một tutorial để tùy chỉnh công cụ tìm kiếm Google cho WordPress khá hay.

Bước 1: Cài đặt Google custom search

Như đã nói ở tiêu đề, mình muốn sử dụng công cụ search Google để thay thế công cụ search hiện tại của mình. Vì vậy, mình đăng ký sử dụng Google custom search. Bạn cần phải có một tài khoản Google để làm việc này. Bạn chỉ việc nhấn vào nút Create a Custom Search Engine để bắt đầu công việc.

Những thông tin đăng ký ở đây chắc mình không cần nói nhiều các bạn cũng đã rõ. Nếu chưa rõ thì vui lòng xem những dòng dữ liệu mình đã điền ở trong hình trên để tìm hiểu thêm nhé.

Bạn có nhiều lựa chọn cho việc trình bày. Nhưng theo ngu kiến của NhanWeb, bạn nên chọn giao diện mặc định của Google search. Vì đơn giản là người dùng đã quen với những màu sắc, font chữ mặc định rồi và chúng ta không nên gây khó khăn cho họ nữa (và dĩ nhiên không tự gây khó khăn cho mình :D ).

Sau khi nhấn Next, chúng ta sẽ có đoạn code do Google cung cấp để làm công việc tìm kiếm của mình.

Tuy nhiên, với bản thân mình, như thế là chưa đủ để tạo nên một công cụ tùy biết theo ý thích. Mình cần nhiều hơn thế. Vì vậy mình chọn option Change the look and feel. để tùy chỉnh một số thứ trước khi xuất ra đoạn code mà mình sử dụng. Bạn nào không thích những tùy chọn thì có thể bỏ qua bước này, tuy chưa thử nhưng mình nghĩ nó cũng chẳng ảnh hưởng gì nhiều đến hòa bình thế giới :).

Dưới đây là tùy chỉnh của mình:

Bước 2: lấy code được cung cấp

Sau khi tùy chỉnh các công cụ, mình nhận được một hướng dẫn chi tiết với một số đoạn mã để đưa vào site như sau:

Bạn cần điền chính xác URL dẫn đến trang kết quả tìm kiếm khi người dùng tìm kiếm. Lưu ý rằng URL này chưa từng tồn tại trước đó. Ở đây, NhanWeb sử dụng URL như sau:

http://nhanweb.com/search-result

Bước 3: Đưa code vào WordPress

A: Đưa box seach của Google vào WordPress
Đầu tiên, bạn cần thay thế đoạn Search mặc định của Google bằng đoạn code do Google cung cấp. Bạn có thể tìm thấy đoạn code search ấy ở file header.php của theme hoặc ở file sidebar.php. Tìm và thay thế nó bằng đoạn code Google cung cấp. Đây là code của mình, các bạn thay thế bằng đoạn code của các bạn nhé:

B: Tạo trang kết quả tìm kiếm

Bạn hãy tạo một Page với URL là URL đã được chúng ta khai báo ở trên. Lúc nãy mình khai báo là:

http://nhanweb.com/search-result

Sau đó đưa đoạn code được cung cấp bởi Google để show kết quả như sau:

Hãy nhớ chọn chế độ biên tập HTML để đưa đoạn mã trên vào nhá. Đừng chọn chế độ Visual mà hỏng bét.

Xong rồi, giờ bạn đã có một trang Search rất thông minh chẳng thua gì cổ máy tìm kiếm nổi tiếng thế giới Google đâu đấy :)

Bonus: tùy chỉnh giao diện

Có lẽ bạn sẽ không hài lòng với giao diện default của Google cũng như có thể nó làm cho layout blog của bạn bị vỡ. Đừng lo, nếu bạn có một chút kiến thức HTML chúng ta sẽ cùng tùy chỉnh giao diện lại theo ý của mình. Nội dung dưới đây là cách mình chỉnh giao diện cho blog NhanWeb của mình, bạn có thể dùng tham khảo để xây dựng lại cho hợp với blog của bạn.

1. Tạo custom style cho form search:

Khung search mặc định của Google không vừa mắt với giao diện của mình. Mình quyết định sửa nó lại cho đẹp. Bạn còn nhớ đoạn code trình bày form search đã nói ở trên không ?

Đoạn Javascript :

có tác dụng tạo giao diện cho form search. Mình không sử dụng nó nên bỏ nó đi :)

Thế là form search của mình còn lại:

Tiếp theo, mình vào style.css để định dạng lại form search theo sở thích:

/* Google custom search */

#cse-search-box input {
	border:none;
	border-left:1px solid #CDCDCD;
	border-top:1px solid #CDCDCD;
	background:#fff;
	padding:6px 4px 7px 25px;
	color:#666;
	width:157px;
	float:left;
	background:#fff url(images/ico_search.jpg) 5px 50% no-repeat;
}

#cse-search-box input#searchsubmit {
	width:72px;
	height:30px;
	border:none;
	background:url(images/but_search.jpg) 0 0 no-repeat;
	cursor:pointer;
	padding:0;
	text-align:center;
	color:#ccc;
	font-size:12px;
}

Bạn có thể save as 2 hình ảnh mình đang dùng về để sử dụng: và .

2. Vỡ khung kết quả

Có thể layout blog của bạn nhỏ hơn khiến cho form search bị vỡ như hình sau :

Gặp trường hợp này bạn chỉ cần thêm vào file style.css đoạn code sau:

#cse-search-results iframe
{
	width: 630px;
}

Nhớ chỉnh lại độ rộng khung theo layout của bạn. :)