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
相關文章
總結
以上是生活随笔為你收集整理的php网页加查询框,Twentytwelve头部添加搜索框及网站名称与描述同行显示的简单方法 | 科研动力...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 新版本ISR 为啥 移除replica.
- 下一篇： php xml 空格,php闭合标签输出