WordPress 教程：《 Google 自訂搜尋》整合到 WordPress 頁面中

　　其實 Google 的自訂搜尋相當的方便好用，因此我在很早之前就已將 Google 自訂搜尋整合到 Wordpress 中，同時我當時還是將搜尋與結果拆開來，而最近才發現到，我嫂的博客竟然沒有站內搜尋，所以就想説幫我嫂加一下，這時才發現到現在 Google 的自訂搜尋與之前差好多，且之前有的設定現在也不知跑到那去的，所以只能用手動的方式來作設定，因此有想用 Google 自訂搜尋的朋友，不妨也一塊來看看囉!

Google 自訂搜尋：

網站名稱：Google 自訂搜尋引擎
申請網址：https://cse.google.com/cse/

Step1
首先進入後，點一下右上角的「建立自訂搜尋引擎」。

Step2
接着輸入要搜尋的網址，若是全站搜尋的話再加/*，與搜尋引擎的名稱，搜尋名稱只要自己認得就行了。

Step3
新增好後，再點控制枱。

Step4

接着再點左邊的外觀和風格選項，再選擇只顯示結果。

Step5

再按下儲存產生原代碼，就會看到灰色框中出現一堆原代碼，再把它全部選取並複製起來，而需注意到 cx 後會有一串編號，這在待回會用到。

Step6

接着新增一個頁面，再將剛的 code 貼到下方的文章輸入框中 (記得先切到文字模式) 。

Google 自訂搜尋－搜尋框：
Step7

接着下方是搜尋框的語法，有二個地方要修改成自己的部分，分別是 action=""這要輸入自己 WP 所建立的頁面網頁，以及在 cx 的部分，要輸入所產生的一串編碼。

加在要出現的主題頁面中：

Google 自訂搜尋－樣式：
Step8

再將下方的 CSS 樣式，貼到 style.css 中，由於使用 Google 自訂搜尋，因此在輸入框中需要有 Google 的圖樣才行。

加在 style.css：

.csetext {
	margin-left: 20px;
	padding: 2px 5px;
	width: 80%;
	height: 30px;
	border: solid 1px #e1e1e1;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background: url(https://www.google.com/cse/intl/zh-Hant/images/google_custom_search_watermark.gif) #fff 5px 50% no-repeat;
	color: #5e7380;
}
.search_btn{
	height: 36px;
	background: #eee;
	border:0;
	border-radius: 6px;
}
.csetext.focus {
	background-image: none;
}

Google 自訂搜尋－互動效果：
Step9

接着下方是一些互動效果，當滑鼠碰到輸入框時，圖片會消失，以及當輸入框有文字時，也會自動消失。
加在前：



$(function(){
	var $searchform = $('#searchform1'), 
		$csetext = $searchform.find('.csetext');

	$csetext.focus(function(){
		$csetext.addClass('focus');
	}).blur(function(){
		if(!!!$csetext.val()) $csetext.removeClass('focus');
	});

});