WordPress自定义搜索框

2017/05/24 盛磊 4个讨论 4,301次浏览 A+

网站的搜索功能是必不可少的，即使你的网站内容不是特别多，也需要搜索框能让用户寻找自己需要的内容，这是一个网站用户体验中重要的一部分，网站有搜索框，搜索引擎也会给网站加分的。WordPress提供了搜索功能。今天来介绍一下怎么自定义WordPress搜索框，希望对你WordPress建站有所帮助。

1.如何调用搜索框
我们在主题中适当的位置调用WordPress内置函数get_search_form就可以获得一个完整的搜索框，代码如下：

<?php get_search_form(); ?>

2.get_search_form源码
我们要自定义搜索框的内容，首先我们找到get_search_form函数的源码来一看究竟：

function get_search_form( $echo = true ) {
    /**
     * Fires before the search form is retrieved, at the start of get_search_form().
     *
     * @since 2.7.0 as 'get_search_form' action.
     * @since 3.6.0
     *
     * @link https://core.trac.wordpress.org/ticket/19321
     */
    do_action( 'pre_get_search_form' );
 
    $format = current_theme_supports( 'html5', 'search-form' ) ? 'html5' : 'xhtml';
 
    /**
     * Filters the HTML format of the search form.
     *
     * @since 3.6.0
     *
     * @param string $format The type of markup to use in the search form.
     *                       Accepts 'html5', 'xhtml'.
     */
    $format = apply_filters( 'search_form_format', $format );
 
    $search_form_template = locate_template( 'searchform.php' );
    if ( '' != $search_form_template ) {
        ob_start();
        require( $search_form_template );
        $form = ob_get_clean();
    } else {
        if ( 'html5' == $format ) {
            $form = '<form role="search" method="get" class="search-form" action="' . esc_url( home_url( '/' ) ) . '">
                <label>
                    <span class="screen-reader-text">' . _x( 'Search for:', 'label' ) . '</span>
                    <input type="search" class="search-field" placeholder="' . esc_attr_x( 'Search &hellip;', 'placeholder' ) . '" value="' . get_search_query() . '" name="s" />
                </label>
                <input type="submit" class="search-submit" value="'. esc_attr_x( 'Search', 'submit button' ) .'" />
            </form>';
        } else {
            $form = '<form role="search" method="get" id="searchform" class="searchform" action="' . esc_url( home_url( '/' ) ) . '">
                <div>
                    <label class="screen-reader-text" for="s">' . _x( 'Search for:', 'label' ) . '</label>
                    <input type="text" value="' . get_search_query() . '" name="s" id="s" />
                    <input type="submit" id="searchsubmit" value="'. esc_attr_x( 'Search', 'submit button' ) .'" />
                </div>
            </form>';
        }
    }
 
    /**
     * Filters the HTML output of the search form.
     *
     * @since 2.7.0
     *
     * @param string $form The search form HTML output.
     */
    $result = apply_filters( 'get_search_form', $form );
 
    if ( null === $result )
        $result = $form;
 
    if ( $echo )
        echo $result;
    else
        return $result;
}

我看到网上有些教程就喜欢在源码上改来改去，这是非常不好的习惯，一旦WordPress更新版本，修改的代码就会被覆盖。
我们还是通过add_filters函数来给get_search_form添加过滤来达到自定义搜索框的目的。
上面源码中有两处apply_filters函数：
1.可以自定义search_form_format

/**
 * 功能：自定义search_form_format
 * 作者：盛磊
 * 网站：http://www.wptoutiao.com
*/
function wptoutiao_search_form_format( $format ) {
    $format = 'html5';
    return $format;
}
add_filter( 'search_form_format', 'wptoutiao_search_form_format' );

上面代码我们把search_form_format的格式修改成html5了，这样get_search_form函数输出的html样式就是html5的样式。
2.可以自定义get_search_form

/**
 * 功能：自定义get_search_form
 * 作者：盛磊
 * 网站：http://www.wptoutiao.com
*/
function wptoutiao_search_form( $form ) {
    $form = '<form role="search" method="get" class="search-form" action="' 
	. esc_url( home_url( '/' ) ) . '">				<label><span class="screen-reader-text">' 
	. _x( 'Search for:', 'label' ) . '</span><input type="search" class="search-field" placeholder="' 
	. esc_attr_x( 'Search for:', 'placeholder' ) . '" value="' . get_search_query() 
	. '" name="s" title="' . esc_attr_x( 'Search for:', 'label' ) . '" /></label><input type="submit" class="search-submit" value="'
	. esc_attr_x( 'Search', 'submit button' ) .'" /></form>';
 
    return $form;
}
add_filter( 'get_search_form', 'wptoutiao_search_form' );