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. floatrightright;
  3. margin-top: -50px;
  4. }
  5. @media (max-width650px) {
  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>之下。

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

祝好!

  • 本博客文章如未特别说明,皆为本站原创,默认采用署名-相同方式共享 4.0 国际协议
  • 相关文章

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

    1. COOFAN

      大佬您看下 我按照方法添加了搜索框到导航上面了,但好像和导航最右边对不齐 有点晕了,嘿嘿!

      回复

    回复 COOFAN 取消回复

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