如何在WordPress中添加搜索切換效果


您是否在許多流行的網站上看到帶有切換效果的搜索圖標? 以我們的姐妹項目List25為例。 想法是顯示一個簡單的搜索圖標,當用戶單擊它時,搜索表單就會滑出,也稱為切換效果。 這是一種巧妙的效果,還可以節省空間,並使您的用戶專注於內容。 更不用說,這非常適合移動響應主題。 在本文中,我們將向您展示如何在WordPress主題中添加搜索切換效果。

搜索切換效果

注意: 本教程面向具有WordPress模板標籤,HTML和CSS知識的中級用戶。 建議初學者用戶先在本地服務器上練習。

顯示WordPress搜索表單

WordPress將默認CSS類添加到主題內各種模板標籤生成的HTML中。 WordPress主題使用 用於顯示搜索表單的模板標籤。 它可以輸出兩種不同的搜索形式,一種用於HTML4主題,另一種用於具有HTML5支持的主題。 如果您的主題有 add_theme_support('html5', array('search-form')) 在functions.php文件中輸入一行,那麼此模板標記將輸出HTML5搜索表單。 否則,它將輸出HTML4搜索表單。

找出主題生成形式的另一種方法是查看搜索表單源代碼。

當您的主題不支持HTML5時,將顯示以下形式的get_search_form()模板標記:


這就是它將為具有HTML5支持的主題生成的表單。


在本教程中,我們將使用HTML5搜索表單。 如果您的主題生成HTML4搜索表單,請在主題的functions.php文件中添加以下代碼:

add_theme_support('html5', array('search-form'));

確定您的搜索表單正在生成HTML5表單後,下一步就是將搜索表單放置在要顯示其切換效果的位置。

向WordPress搜索表單添加切換效果

您需要做的第一件事是搜索圖標。 WordPress中默認的二十三十三主題帶有一個非常漂亮的小圖標,我們將在本教程中使用它。 但是,請隨時在Photoshop中創建自己的文件或從網上下載一個文件。 只要確保該文件名為search-icon.png。

現在,您需要將此搜索圖標上載到主題的圖像文件夾中。 使用FTP客戶端(如Filezilla)連接到您的網站,然後打開主題目錄。

現在,這是最後也是最關鍵的一步。 您需要將此CSS添加到主題的樣式表中:

.site-header .search-form {
	position: absolute;
	right: 200px;
	top: 200px;
}

.site-header .search-field {
	background-color: transparent;
	background-image: url(images/search-icon.png);
	background-position: 5px center;
	background-repeat: no-repeat;
	background-size: 24px 24px;
	border: none;
	cursor: pointer;
	height: 37px;
	margin: 3px 0;
	padding: 0 0 0 34px;
	position: relative;
	-webkit-transition: width 400ms ease, background 400ms ease;
	transition:         width 400ms ease, background 400ms ease;
	width: 0;
}

.site-header .search-field:focus {
	background-color: #fff;
	border: 2px solid #c3c0ab;
	cursor: text;
	outline: 0;
	width: 230px;
}
.search-form
.search-submit { 
display:none;
}

關於此CSS的重要注意事項是CSS3過渡效果,它使我們能夠輕鬆創建切換效果。 另請注意,您仍然必鬚根據主題的佈局調整搜索圖標和表單的位置。

我們希望本文能幫助您在WordPress主題中添加搜索切換效果。 您對切換搜索表單有何想法? 我們看到越來越多的網站正在使用這種效果。 在下面的評論中留下您的反饋和問題,或加入我們的Google+對話。