Bootstrap替换Wordpress的get_search_form()搜索样式

一、函数的用法为

  1. <?php get_search_form( $echo ); ?>

本函数有一个参数:$echo,该参数是可选的,如果是true则显示表单,如果是false则会返回一个字符串,默认是true
二、函数实例
1、如果主题目录里没有searchform.php这个文件,那么WordPress将默认使用内置的搜索表单:

  1. <form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
  2.     <div><label class="screen-reader-text" for="s">Search for:</label>
  3.         <input type="text" value="" name="s" id="s" />
  4.         <input type="submit" id="searchsubmit" value="Search" />
  5.     </div>
  6. </form>

2、如果主题文件里有searchform.php这个文件,那么WordPress就会使用指定的搜索表单模版。注意,搜索表单应该使用get方法指向主页,文本域的name应该是s
这是一个自定义searchform.php的例子:

  1. <form action="/" method="get">
  2.     <fieldset>
  3.         <label for="search">Search in <?php echo home_url( '/' ); ?></label>
  4.         <input type="text" name="s" id="search" value="<?php the_search_query(); ?>" />
  5.         <input type="image" alt="Search" src="<?php bloginfo( 'template_url' ); ?>/images/search.png" />
  6.     </fieldset>
  7. </form>

3、最后,还得在主题的functions.php文件里添加一个自定义函数,作为一个钩子与get_search_form函数连接起来,搜索表单才起作用。

  1. function my_search_form( $form ) {
  2.  
  3.     $form = '<form role="search" method="get" id="searchform" action="' . home_url( '/' ) . '" >
  4.     <div><label class="screen-reader-text" for="s">' . __('Search for:') . '</label>
  5.     <input type="text" value="' . get_search_query() . '" name="s" id="s" />
  6.     <input type="submit" id="searchsubmit" value="'. esc_attr__('Search') .'" />
  7.     </div>
  8.     </form>';
  9.     return $form;
  10. }
  11.  
  12. add_filter( 'get_search_form', 'my_search_form' );

三、加载Bootstrap样式
首先你的Wordpress主题引入了BootstrapCssJS,比如是一个用Bootstrap框架开发的主题。在主题的functions.php文件里添加以下代码:

  1. /*
  2.  * 自定义搜索框
  3.  */
  4.  function bootstrapwp_search_form( $form ) {
  5.  
  6.     $form = '<form role="search" method="get" id="searchform" action="' . home_url( '/' ) . '" >
  7.     <div class="input-group pull-right" id="search"><label class="hide screen-reader-text" for="s">' . __('Search for:') . '</label>
  8.     <input class="form-control " type="text" value="' . get_search_query() . '" name="s" id="s" /> 
  9. 	<span class="input-group-btn">
  10. 	<input class="btn btn-default" type="submit" id="searchsubmit" value="'. esc_attr__('Search') .'" />
  11.      </span>
  12.     </div>
  13.     </form>';
  14.  
  15.     return $form;
  16. }
  17. add_filter( 'get_search_form', 'bootstrapwp_search_form' );

四、函数源代码
get_search_form() 位于 wp-includes/general-template.php


发布日期:

所属分类: BootStrap, WordPress 函数 标签: