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

相關文章

總結

以上是生活随笔為你收集整理的php网页加查询框,Twentytwelve头部添加搜索框及网站名称与描述同行显示的简单方法 | 科研动力...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。