wordpress语言切换_如何在WordPress中添加搜索切换效果

wordpress语言切换

Have you seen the search icon with toggle effect on many popular websites? Take a look at our sister project List25 for an example. The idea is to display a simple search icon, and when the user clicks on it the search forms slides out also known as the toggle effect. It is a neat effect that also saves space and allows your users to focus on the content. Not to mention, this is great for mobile responsive themes. In this article, we will show you how to add a search toggle effect in WordPress Themes.

您是否在许多流行的网站上看到带有切换效果的搜索图标？ 以我们的姐妹项目List25为例。 想法是显示一个简单的搜索图标，当用户单击它时，搜索表单就会滑出，也称为切换效果。 这是一种简洁的效果，还可以节省空间，并使您的用户专注于内容。 更不用说，这对于移动响应主题非常有用 。 在本文中，我们将向您展示如何在WordPress主题中添加搜索切换效果。

Note: This tutorial is for intermediate users with working knowledge of WordPress template tags, HTML, and CSS. Beginner level users are advised to practice on local server first.

注意：本教程适用于具有WordPress模板标签，HTML和CSS知识的中级用户。 建议初学者用户先在本地服务器上练习。

显示WordPress搜索表单 (Displaying WordPress Search Form)

WordPress adds default CSS classes to HTML generated by various template tags inside a theme. WordPress themes use <?php get_search_form(); ?> template tag to display search form. It can output two different search forms, one for HTML4 themes and one for themes with HTML5 support. If your theme has add_theme_support('html5', array('search-form')) line in functions.php file, then this template tag will output an HTML5 search form. Otherwise, it will output HTML4 search form.

WordPress将默认CSS类添加到主题内各种模板标签生成HTML中。 WordPress主题使用<?php get_search_form(); ?> <?php get_search_form(); ?>模板标记以显示搜索表单。 它可以输出两种不同的搜索形式，一种用于HTML4主题，另一种用于具有HTML5支持的主题。 如果您的主题在functions.php文件中具有add_theme_support('html5', array('search-form'))行，则此模板标记将输出HTML5搜索表单。 否则，它将输出HTML4搜索表单。

Another way to find out what form your theme generates, is to look at the search form source code.

找出主题生成形式的另一种方法是查看搜索表单源代码。

This is the form get_search_form() template tag will display when your theme does not have HTML5 support:

当您的主题不支持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>

And this is the form it will generate for a theme with HTML5 support.

这就是它将为具有HTML5支持的主题生成的表单。

<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
	<label>
		<span class="screen-reader-text">Search for:</span>
		<input type="search" class="search-field" placeholder="Search …" value="" name="s" title="Search for:" />
	</label>
	<input type="submit" class="search-submit" value="Search" />
</form>

For the sake of this tutorial, we will use the HTML5 search form. If your theme generates HTML4 search form, then add this line of code in your theme’s functions.php file:

在本教程中，我们将使用HTML5搜索表单。 如果您的主题生成HTML4搜索表单，则在主题的functions.php文件中添加以下代码：

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

Once you have made sure that your search form is generating HTML5 form, the next step is to place the search form where you want to display it with the toggle effect.

确定您的搜索表单正在生成HTML5表单后，下一步就是将搜索表单放置在要显示其切换效果的位置。

向WordPress搜索表单添加切换效果 (Adding the Toggle Effect to the WordPress Search Form)

First thing you will need is a search icon. The default Twenty Thirteen theme in WordPress comes with a very nice little icon, and we will be using that in our tutorial. However, feel free to create your own in Photoshop or download one from the web. Just make sure that the file is named search-icon.png.

您需要做的第一件事是搜索图标。 WordPress中的默认二十三十三主题带有一个非常漂亮的小图标，我们将在本教程中使用它。 但是，请随时在Photoshop中创建自己的文件或从网上下载一个文件。 只要确保该文件名为search-icon.png。

Now you need to upload this search icon to your theme’s images folder. Connect to your website using an FTP client like Filezilla, and open your theme directory.

现在，您需要将此搜索图标上载到主题的图像文件夹中。 使用FTP客户端(如Filezilla)连接到您的网站，然后打开主题目录。

Now this is the final and most crucial step. You need to add this CSS to your theme’s stylesheet:

现在，这是最后也是最关键的一步。 您需要将此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;
}

The important thing to note about this CSS, is the CSS3 transition effects which allows us to create the toggle effect with ease. Also note that you will still have to adjust the positioning of the search icon and form according to your theme’s layout.

关于此CSS的重要注意事项是CSS3过渡效果，它使我们能够轻松创建切换效果。 另请注意，您仍然必须根据主题的布局调整搜索图标和表单的位置。

We hope this article helped you add search toggle effect in your WordPress theme. What are your thoughts on the toggle search form? We’re seeing more and more sites using this effect. Leave your feedback and questions in the comments below or join us in the conversation at Google+.

我们希望本文能帮助您在WordPress主题中添加搜索切换效果。 您对切换搜索表单有何想法？ 我们看到越来越多的网站使用这种效果。 在下面的评论中留下您的反馈和问题，或加入我们的Google+对话。

翻译自: https://www.wpbeginner.com/wp-themes/how-to-add-a-search-toggle-effect-in-wordpress/

wordpress语言切换