Old Sen's Tales IT Help

修改wordpress搜尋樣式

　　前幾天調整了wordpress部份版面配置，後來發現似乎因為解析度的問題，This will cause the 'search' function to appear a bit different，Also, it makes you notice that the default search bar doesn't look very good，Originally, I just wanted to remove the two words 'search'，After looking at some designs online，I adopted a different way of presenting it。

Original style	After modification

Modification method：

Add the following code to style.css

/** Search widget **/
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;
}

The go.gif needs to be placed in the theme directory，The parameters inside can be adjusted as needed。

Besides changing the appearance，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

找到主題列的語法，In my case，它可能會是

<?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; }

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