前幾天調整了wordpress部份版面配置，後來發現似乎因為解析度的問題，會導致「搜尋」功能的呈現有點不太一樣，也進而注意到預設的搜尋欄位有點不太好看，原先只想要把「搜尋」這兩個字拿掉，上網看了一些設計後，採用了不一樣的呈現方式。
| 原始樣式 | 修改後 |
 |
 |
修改方式：
在style.css加上下面代碼
| /** 搜索小工具 **/ input#s { width:190px; height: 22px; *margin: 10px 0 0 0; *+margin: 10px 0 0 0; padding: 1px; border:1px solid #ccc } input#searchsubmit { background:url(images/go.gif) no-repeat; width:15px; height:15px; border:none; cursor:pointer; text-indent:-10000px; } .box { *height:100%; *+height:100%; } .screen-reader-text { display: none; } |
其中go.gif要自己丟到佈景主題的目錄下，裡頭的參數可以依需求調整。
除了改變呈現方式，我還把搜尋從右邊的側邊欄移到上面的主題列，這部份可透過下面方式實作：
開啟佈景主題的header.php
找到主題列的語法，以我來說，它可能會是
<?php wp_list_pages('depth=1&title_li='); ?>
在後面加上
<div id="right-search"><?php get_search_form() ?></div>
接著開啟style.css，加入下面語法
#right-search { margin:15px 10px 0 0; float:right; }
設定值可依版面調整。完成後，會變成這樣：
資料來源：
改变Wordpress默认搜索小工具样式 | 知更鸟
Arras 1.5.1.2: 將搜尋框移至Top-Menu右側 « WordPress 研究者日記
