老森常譚 IT Help

修改wordpress搜尋樣式

　　前幾天調整了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; }

設定值可依版面調整。完成後，會變成這樣：