您是否在许多热门网站上看到具有切换效果的搜索图标？以我们的姊妹项目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。
现在您需要将此搜索图标上传到主题的图像文件夹。使用 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 过渡效果，它允许我们轻松创建切换效果。另请注意，您仍然需要根据主题的布局调整搜索图标和表单的位置。
我们希望本文能帮助您在 WordPress 主题中添加搜索切换效果。您对切换搜索表单有何看法？我们看到越来越多的网站使用这种效果。在下面的评论中留下您的反馈和问题，或加入我们在Google+上的对话。