php网页加查询框,Twentytwelve头部添加搜索框及网站名称与描述同行显示的简单方法 | 科研动力...

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-header h1, .headersearch {

display:inline-block;

clear:none;

}

.headersearch {

float: right;

padding: 10px 0 0 0;

}

然后打开header.php文件，在代码之上，

<?php bloginfo( 'name' ); ?>

之下添加如下代码

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

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

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

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

site-header h1, .site-header h2 {

display:inline-block;

clear:none;

}

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

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

.site-header h1, .site-header h2, ,.headersearch {

display:inline-block;

clear:none;

}

这样搜索框和网站名称及网站描述就在同一行显示了。注意此时的

<?php bloginfo( 'description' ); ?>

之下。

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

祝好！

0

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

转载时请注明出处及相应链接：Twentytwelve头部添加搜索框及网站名称与描述同行显示的简单方法 | 科研动力 + https://www.howsci.com/add-search-form-in-the-header-of-twentytwelve-theme.html

相关文章