TwentyTwelve主题添加顶部搜索框

WordPress自带了一个叫做get_search_form()的方法,调用这个方法就能够显示一个搜索框,所以为了在顶部添加搜索框,我们就需要在header.php中调用这个方法,具体如下:

<hgroup>
    <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" style="font-family: Microsoft YaHei;font-weight: normal" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
    <div class="headersearch"><?php get_search_form_header(); ?></div>
</hgroup>
    <h2 class="site-description">&nbsp-&nbsp<?php bloginfo( 'description' ); ?></h2>

这里把headersearch加入到了hgroup中,并把h2从hgroup中拿出,是为了让显示的时候能够使搜索框和站点标题在同一水平线上。

然后修改style.css,在底部加入以下内容:

.headersearch {
	float: right;
	padding: 25px 0 0 0;
	margin-right: 70px;
}

.site-header h1, .headersearch {
	display:inline-block;
	clear:none;
}

注意到,我在header.php中添加的方法是get_search_form_header()而不是原来的get_search_form()这是因为我对头部的搜索框进行了修改,不现实搜索按钮。这个方法添加在general-template.php中,具体为:

function get_search_form_header( $echo = true ) {
        
        do_action( 'pre_get_search_form' );

        $format = current_theme_supports( 'html5', 'search-form' ) ? '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" title="' . esc_attr_x( 'Search for:', 'label' ) . '" />
                                </label>
                        </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" />
                                </div>
                        </form>';
                }
        }
        
        $result = apply_filters( 'get_search_form', $form );

        if ( null === $result )
                $result = $form;

        if ( $echo )
                echo $result;
        else
                return $result;
}

其实就是复制get_search_form()方法,删除其中的搜索按钮。

效果预览:

20151118095450

发表评论

电子邮件地址不会被公开。 必填项已用*标注