当前位置:首页 > BootStrap > 正文内容
四月20日

时间:2016-04-20 11:54

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

0
分类:BootStrap | 评论:0人 | 浏览:89次   

 

get_search_form()本函数的作用主要是包含searchform.php,它的作用和get_header()、get_sidebar()、get_footer()类似的,在需要插入搜索框的地方,调用该函数即可。如果主题里面没有searchform.php模板,则他有默认的代码代替。

一、函数的用法为

  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

来源:Dashu.info(微信号/QQ号:43318553),转载请注明出处,谢谢!

  • 评论:(0)
  • 有图有真相

站内搜索

css.php

无觅相关文章插件,快速提升流量