get_search_form() 这个函数可以输出 WordPress 的搜索框 ... 打开 header.php ... 在我们自己设计的搜索框的上面,输入 <?php get_search_form(); ?> ... 我们可以对比一起原版的 WordPress 搜索框,和我们自己设计的搜索框。
保存,回到网站的首页 ... 刷新 ... 上面是原版的搜索框,下面的是我们自己的设计 ... 想让原版的搜索框变成我们设计的样子,需要在上面添加一些特别的 css 类,还有一些标签,还要去掉这个 搜索 标签 ...
下面我们可以自己创建一个函数,然后挂到 get_search_form() 上面。
如果你不确定怎么做,可以搜索一下 ... 打开一个搜索引擎,我们最好用可以搜索英文网页的搜索引擎,Google 或者 bing .... 这里我们用 bing ...
搜索 wordpress get_search_form() ... 点击第一个搜索结果 ... 打开的就是这个函数的参数说明 ... 在这里你可以看到这个函数的作用,出处,还有应用的示例 ...
在应用示例里,复制一下这段代码,这就是使用自定义函数的方式修改搜索框的方法 ...
回到主题项目,然后打开主题的 functions.php ... 粘贴到这里 ... 再修改一下 ...
首先我们要改一下这个自定义的函数的名称 ... 把前面的 my 改成我们自己的主题的名称 ... fenikso
最下面这行代码就是把这个自定义函数挂到 get_search_form 这个函数上面。 修改一下后面的这个自定义的函数名称 ...
在这个自定义的函数的里面就是搜索框的相关代码 .... 这行带 <label> 标签的代码就是搜索框的标签 ... 在我们的设计里没有使用这个标签 ... 所以可以去掉它 ... 或者,你也可以把它隐藏起来 ... 我们的主题使用了 Bootstrap 架构,所以,我们可以使用这个架构里定义的样式。
在这个 <label> 标签里。我们添加一个 .hide 类。这个类可以隐藏元素...
标签的下面是搜索框和搜索按钮 ... 在我们的设计里,搜索框上面要添加一个影响搜索框长度的 span类。输入 class="span3" ...
在搜索按钮上,要添加一个按钮类,输入 class="btn" ...
最后在包装搜索框和搜索按钮的 <div> 标签上,我们还要添加一些类,输入 class="input-append pull-right" ...
再添加一个 id,输入 id="search" ... 在这段代码的上面我们可以再输入一段注释的文字 ...
http://codex.wordpress.org/Function_Reference/get_search_form
/*
* 自定义搜索框
*/
保存一下,再回到网站 ... 刷新 ... 你会看现,现在 WordPress 的搜索框跟我们的设计就一样了。
回到 header.php ... 删除掉我们自己设计的搜索框 ...
/**
* 自定义搜索框
*/
function fenikso_search_form( $form ) {
$form = '<form role="search" method="get" id="searchform" action="' . home_url( '/' ) . '" >
<div class="input-append">
<input type="text" value="' . get_search_query() . '" name="s" id="s" />
<input class="btn" type="submit" id="searchsubmit" value="'. esc_attr__('Search') .'" />
</div>
</form>';
return $form;
}
add_filter( 'get_search_form', 'fenikso_search_form' );