Twentytwelve头部添加搜索框及网站名称与描述同行显示的简单方法

Twenty Twelve 主题的头部默认没有搜索框，不像它的前辈和后生。这点我就不明白了，Twentyeleven和最新的Twentythirteen都有搜索框，为何Twentytwelve就没有呢。不管它了，我们自己给它添加一个搜索框。

常见方法

之前曾在网上搜索，大多的方法是修改头部文件，并修改主题。大致如下：

打开 header.php 文件，找到下面这条标签：

</hgroup>

再在后面加上以下这行：

1. <div><?php get_search_form(); ?></div>

保存并关闭 header.php 文件。

打开子主题中的 style.css 文件并添加以下 CSS 代码：

Code   ViewPrint

1. .header-search {
2. float: rightright;
3. margin-top: -50px;
4. }
5. @media (max-width: 650px) {
6. .header-search {
7. margin-top:5px;
8. text-align:center;
9. float:none;
10. }
11. .main-navigation  {
12. clear:both;
13. }
14. }

保存并关闭 style.css 文件。

这样就头部就添加了一个搜索框。但是这个方法所添加的搜索框与网站名称或者描述对不起。您可以自己添加一下试试，总觉着上下有那么点差距。而且如果修改头部样式的话。搜索框也会跟着改变。

有没有更简单的方法？我想了很久，对这个搜索框我真是看见心里就不舒服。我觉着我有强迫症：）经过多次试验，我认为下面的方法最简单。

完美方法

在style.css中添加如下代码：

1. site-header h1, .headersearch {
2. display:inline-block;
3. clear:none;
4. }
5. .headersearch {
6. float: right;
7. padding: 10px 0 0 0;
8. }

然后打开header.php文件，在</hgroup>代码之上，<h1><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>之下添加如下代码

1. <div class="headersearch"><?php get_search_form(); ?></div>

保存关闭刷新即可。这时的搜索框就与网站名称对齐了。建议利用子主题修改。

该种方法与上述常见方法相比，添加的代码少，而且与网站名称对齐的比较好。

网站名称和网站描述同一行显示

我的网站名称比较短，右侧空了老大一块，心里看着不舒服。想把网站名称和网站描述放在同一行显示。其实就添加一段代码就可以解决。

1. site-header h1, .site-header h2 {
2. display:inline-block;
3. clear:none;
4. }

这段代码就是告诉主题，网站名称和网站描述是同一行显示的。

如果根据上面添加了搜索框，可以把搜索框的代码也加上

1. .site-header h1, .site-header h2, ,.headersearch {
2. display:inline-block;
3. clear:none;
4. }

这样搜索框和网站名称及网站描述就在同一行显示了。注意此时的<div><?php get_search_form(); ?></div>要添加到</hgroup>代码之上，<h2><?php bloginfo( 'description' ); ?></h2>之下。

如果您有任何疑问可以留言告知。

祝好！