WordPress自带了一个叫做get_search_form()的方法，调用这个方法就能够显示一个搜索框，所以为了在顶部添加搜索框，我们就需要在header.php中调用这个方法，具体如下：
|
1 2 3 4 5 |
<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"> - <?php bloginfo( 'description' ); ?></h2> |
这里把headersearch加入到了hgroup中，并把h2从hgroup中拿出，是为了让显示的时候能够使搜索框和站点标题在同一水平线上。
然后修改style.css，在底部加入以下内容：
|
1 2 3 4 5 6 7 8 9 10 |
.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中，具体为：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
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 …', '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()方法，删除其中的搜索按钮。
效果预览：
暂无评论