老森常谈 IT 帮助

修改WordPress搜索样式

　　前几天调整了WordPress的部分页面布局，后来发现似乎因为分辨率的问题，会导致“搜索”功能的呈现有点不太一样，也进一步注意到默认的搜索栏有点不好看，原本只是想把‘搜索’这两个字去掉，上网看了一些设计后，采用了不同的呈现方式。

原始样式	修改后

Modification method：

Add the following code to style.css

/** Search widget **/
input#s {
width:190像素;
height: 22像素;
*margin: 10像素 0 0 0;
*+margin: 10像素 0 0 0;
padding: 1像素;
border:1px solid #ccc
}
input#searchsubmit {
background:url(images/go.gif) no-repeat;
width:15像素;
height:15像素;
border:none;
cursor:pointer;
text-indent:-10000像素;
}
.box {
*height:100%;
*+height:100%;
}
.screen-reader-text {
display: none;
}

The go.gif should be placed in the theme directory yourself，The parameters inside can be adjusted according to your needs。

Besides changing the display method，I also moved the search from the right sidebar to the top theme bar，This part can be implemented using the following method：

Open the theme's 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; }

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