如何自定义我的 WordPress 搜索表单？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1301695/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I customize my WordPress search form?
提问by
Mission
使命
I would like to customize the search field and button on my WordPress blog.
我想自定义我的 WordPress 博客上的搜索字段和按钮。
The search textfield and button I have in mind will have three states:
我想到的搜索文本字段和按钮将具有三种状态：
off
off
:hover
:hover
:focus
:focus
I will need to have three different DIV ids for each of these states.
对于这些状态中的每一个，我都需要三个不同的 DIV id。
Search's Text Field specifics
搜索的文本字段细节
Additionally, I will need there to be the text "search site" initially loaded into the search's text field. when a user clicks into the search's text field that initial text will disappear and the users cursor will appear blinking. the user can then type in their search keyword. if after typing in their keyword they happen to click off the search's text field, their keyword will remain in the text field intact. if they decide to delete their keyword and click off of the search's text field , the text "search site" will reappear.
此外，我需要将文本“搜索站点”最初加载到搜索的文本字段中。当用户单击搜索的文本字段时，初始文本将消失并且用户光标将出现闪烁。然后用户可以输入他们的搜索关键字。如果他们在输入关键字后碰巧点击了搜索的文本字段，则他们的关键字将完好无损地保留在文本字段中。如果他们决定删除他们的关键字并点击搜索的文本字段，文本“搜索站点”将重新出现。
Search's Button specifics
搜索的按钮细节
The search button will have to have the text "search" that is centered vertically and horizontally.
搜索按钮必须具有垂直和水平居中的文本“搜索”。
Current State of my Search Text Field and Button
我的搜索文本字段和按钮的当前状态
my current search form and site can be seen here at criticear
我当前的搜索表单和网站可以在此处查看
I have been able to make my comment form text fields have the 3 states I mentioned above since I got the code from ottodestruct's WordPress threaded comments tutorial.
自从我从 ottodestruct 的 WordPress 线程评论教程中获取代码以来，我已经能够使我的评论表单文本字段具有我上面提到的 3 个状态。
the thing is that I do not quite understand how to take this comment form css and apply it to my search's textfield and button. you can check out my comment form on my blog criticear's single post page
问题是我不太明白如何使用此评论表单 css 并将其应用于我的搜索文本字段和按钮。您可以在我的博客评论家的单个帖子页面上查看我的评论表
Here is my search form CSS:
这是我的搜索表单 CSS：
/*
SEARCH FORM
*/
form#searchform
{
display:block;
width:255px;
height:20px;
position:absolute;
top:56px;
left:753px;
}
.searchbutton
{
color: #0066ff;
border: 0px solid;
display:block;
width:45px;
height:20px;
background: #d2e4ff;
position:absolute;
top:0px;
left:202px;
-moz-border-radius-bottomright: 4px;
-moz-border-radius-topright: 4px;
-webkit-border-bottom-right-radius: 4px;
-webkit-border-top-right-radius: 4px;
font-size: 12px;
}
.searchbutton:hover
{
background-color: #0066ff;
color: #ffffff;
font-size: 12px;
}
.searchfield
{
background:url(/images/search-field-shadow.png) top left repeat-x #666666;
color: #eeeeee;
border: 0px solid;
position: absolute;
top:0px;
left:0px;
display:block;
width:200px;
height:20px;
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-topleft: 4px;
-webkit-border-bottom-left-radius: 4px;
-webkit-border-top-left-radius: 4px;
font-size: 12px;
}
here is my searchform.php code:
这是我的 searchform.php 代码：
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
<input type="text" value="<?php the_search_query(); ?>" name="s" id="s" class="searchfield" />
<input type="submit" id="searchsubmit" value="search" class="searchbutton"/>
</form>
Here is the searchform php call I have in my header.php:
这是我的 searchform php 调用header.php：
<?php get_search_form(); ?>
If you have any questions or need more info than let me know. I hope you can help. Thanks.
如果您有任何问题或需要更多信息，请告诉我。我希望你能帮忙。谢谢。
采纳答案by Josh Leitzel
You need to use CSS to style the form as you want to, and JavaScript or a JavaScript library (like jQuery) to create the focus/blur effect you're looking for. I'm not going to do the whole thing for you, but I'll just point you in the right direction.
您需要使用 CSS 来根据需要设置表单样式，并使用 JavaScript 或 JavaScript 库（如 jQuery）来创建您正在寻找的焦点/模糊效果。我不会为你做所有的事情，但我会为你指明正确的方向。
First of all, you don't need "3 different DIV ids for each of these 3 states." CSS has pseudo-selectors for :hoverand :focus, so that's all you need. If you ever get caught up on that or run into browser problems, you can always use JavaScript (again, I recommend jQuery).
首先，您不需要“这 3 个状态中的每一个都有 3 个不同的 DIV id”。CSS 为:hoverand提供了伪选择器:focus，所以这就是你所需要的。如果您遇到了这个问题或遇到浏览器问题，您可以随时使用 JavaScript（同样，我推荐 jQuery）。
For the "Search site" effect in the input box, you'll be doing something like this (this is jQuery):
对于输入框中的“搜索站点”效果，您将执行以下操作（这是 jQuery）：
$('input[name=s]').focus(function(){
if ($(this).val() == 'Search site')
$(this).val('');
});
$('input[name=s]').blur(function(){
if ($(this).val() == '')
$(this).val('Search site');
});
The last thing I'll mention is that your CSS classes searchfieldand searchbuttonmake your HTML more verbose than it needs to be. You can easily access these fields in your CSS without having to individually declare them in your HTML:
我会提到的最后一件事是，你的CSS类searchfield，并searchbutton让你的HTML更详细的比它需要。您可以轻松地在 CSS 中访问这些字段，而无需在 HTML 中单独声明它们：
#searchform input[name=s] { } /* use this instead of .searchfield */
#searchform input[type=submit] { } /* use this instead of .searchbutton */
