Twenty Twelve 主题的头部默认没有搜索框，不像它的前辈和后生。这点我就不明白了，Twentyeleven和最新的Twentythirteen都有搜索框，为何Twentytwelve就没有呢。不管它了，我们自己给它添加一个搜索框。
常见方法
之前曾在网上搜索，大多的方法是修改头部文件，并修改主题。大致如下：
打开 header.php 文件，找到下面这条标签：
再在后面加上以下这行：
保存并关闭 header.php 文件。
打开子主题中的 style.css 文件并添加以下 CSS 代码：
.header-search{
float:rightright;
margin-top:-50px;
}
@media(max-width:650px){
.header-search{
margin-top:5px;
text-align:center;
float:none;
}
.main-navigation{
clear:both;
}
}
保存并关闭 style.css 文件。
这样就头部就添加了一个搜索框。但是这个方法所添加的搜索框与网站名称或者描述对不起。您可以自己添加一下试试，总觉着上下有那么点差距。而且如果修改头部样式的话。搜索框也会跟着改变。
有没有更简单的方法？我想了很久，对这个搜索框我真是看见心里就不舒服。我觉着我有强迫症：)经过多次试验，我认为下面的方法最简单。
完美方法
在style.css中添加如下代码：
site-headerh1,.headersearch{
display:inline-block;
clear:none;
}
.headersearch{
float:right;
padding:10px000;
}
然后打开header.php文件，在代码之上，
<?php bloginfo( 'name' ); ?>
之下添加如下代码保存关闭刷新即可。这时的搜索框就与网站名称对齐了。建议利用子主题修改。
该种方法与上述常见方法相比，添加的代码少，而且与网站名称对齐的比较好。
网站名称和网站描述同一行显示
我的网站名称比较短，右侧空了老大一块，心里看着不舒服。想把网站名称和网站描述放在同一行显示。其实就添加一段代码就可以解决。
site-headerh1,.site-headerh2{
display:inline-block;
clear:none;
}
这段代码就是告诉主题，网站名称和网站描述是同一行显示的。
如果根据上面添加了搜索框，可以把搜索框的代码也加上
.site-headerh1,.site-headerh2,,.headersearch{
display:inline-block;
clear:none;
}
这样搜索框和网站名称及网站描述就在同一行显示了。注意此时的
<?php bloginfo( 'description' ); ?>
之下。如果您有任何疑问可以留言告知。
祝好！
0
本博客文章如未特别说明，皆为本站原创，默认采用署名-相同方式共享 4.0 国际协议
转载时请注明出处及相应链接：Twentytwelve头部添加搜索框及网站名称与描述同行显示的简单方法 | 科研动力 + /add-search-form-in-the-header-of-twentytwelve-theme.html
相关文章
php网页加查询框 Twentytwelve头部添加搜索框及网站名称与描述同行显示的简单方法 | 科研动力...
