WordPress将默认设置的CSS类加上到由主题风格内的各种各样模版标识转化成的HTML中。WordPress主题风格应用<?php get_search_form(); ?>模版标识来显示信息检索表格。它能够輸出二种不一样的检索表格，一种用以HTML4主题风格，另外一种用以适用HTML5的主题风格。假如您的主题风格add_theme_support('html5', array('search-form'))在functions.php文档中有行，则此模版标识将輸出HTML5检索表格。不然，它将輸出HTML4检索表格。

找到主题风格转化成方式的另外一种方式是查询检索表格源码。

当您的主题风格沒有HTML5适用时，这将显示信息get_search_form（）模版标识：

<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">

<div><label class="screen-reader-text" for="s">Search for:</label>

<input type="text" value="" name="s" id="s" />

<input type="submit" id="searchsubmit" value="Search" />

</div>

</form>

以便在WordPress中加上检索转换实际效果，将应用HTML5检索表格。假如您的主题风格转化成HTML4检索表格，则在主题风格的functions.php文档中加上下列编码行：

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

将转换实际效果加上到WordPress检索表格

您必须的第一件事是检索标志。WordPress中默认设置的Twenty Thirteen主题风格含有一个十分好看的小标志，您能够随便在Photoshop中建立自身的或从在网上免费下载一个。只需保证该文档名叫search-icon.png。

如今，您必须将此检索标志提交到主题风格的图象文档夹中。应用Filezilla等FTP顾客端联接到您的网站，随后开启主题风格文件目录。

如今它是最终也是最重要的一步。您必须将此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衔接实际效果，它容许大家轻轻松松建立转换实际效果。另一定要注意，您仍需依据主题风格的合理布局调节检索标志和表格的部位。