Twenty Twelve 主题的头部默认没有搜索框,不像它的前辈和后生。这点我就不明白了,Twentyeleven和最新的Twentythirteen都有搜索框,为何Twentytwelve就没有呢。不管它了,我们自己给它添加一个搜索框。
常见方法
之前曾在网上搜索,大多的方法是修改头部文件,并修改主题。大致如下:
打开 header.php 文件,找到下面这条标签:
</hgroup>
再在后面加上以下这行:
- <div><?php get_search_form(); ?></div>
保存并关闭 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-header h1, .headersearch {
- display:inline-block;
- clear:none;
- }
- .headersearch {
- float: right;
- padding: 10px 0 0 0;
- }
然后打开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>之下添加如下代码
- <div class="headersearch"><?php get_search_form(); ?></div>
保存关闭刷新即可。这时的搜索框就与网站名称对齐了。建议利用子主题修改。
该种方法与上述常见方法相比,添加的代码少,而且与网站名称对齐的比较好。
网站名称和网站描述同一行显示
我的网站名称比较短,右侧空了老大一块,心里看着不舒服。想把网站名称和网站描述放在同一行显示。其实就添加一段代码就可以解决。
- site-header h1, .site-header h2 {
- display:inline-block;
- clear:none;
- }
这段代码就是告诉主题,网站名称和网站描述是同一行显示的。
如果根据上面添加了搜索框,可以把搜索框的代码也加上
- .site-header h1, .site-header h2, ,.headersearch {
- display:inline-block;
- clear:none;
- }
这样搜索框和网站名称及网站描述就在同一行显示了。注意此时的<div><?php get_search_form(); ?></div>要添加到</hgroup>代码之上,<h2><?php bloginfo( 'description' ); ?></h2>之下。
如果您有任何疑问可以留言告知。
祝好!
大佬您看下 我按照方法添加了搜索框到导航上面了,但好像和导航最右边对不齐 有点晕了,嘿嘿!