我们在自己做站的时候,用WordPress自带的搜索框的样式是非常丑的,那么我们如何根据自己的设计来自定义搜索框呢?下面就结合我实践的来说说WordPress如何自定义搜索框。

1、首先我们通过css和html设置出自己喜欢的搜索框的样式,比如说本站的搜索框html代码如下:

<div class="ssk">
<form role="search" method="get" class="search-form">
<label>
<input type="search" class="search-field" placeholder="搜索…" value="" name="s" style="visibility: visible;">
</label>
<input type="submit" class="search-submit" value="搜索">
</form>
</div>

css代码如下:

.ssk{
     position: relative;
	margin: 90px auto;
	width: 600px;
}
.search-form{
	position: relative;
	
}
.search-field {
    padding: 4px 6px;
    height: 36px;
    width: 80%;
    font-size: 14px;
    margin: 0;
    /* outline: 0; */
    border: 1px solid #e6ecf0;
    border-radius: 3px;
}
.search-submit {
    padding: 10px 15px;
    background-color: #20a0ff;
    color: #fff;
    font-size: 16px;
    border: 1px solid;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
    border:none;
}

2.在functions.php中加入以下代码,把我们设计好的搜索框的样式加载到WordPress自带的搜索框样式中

function Jtmac_search_form( $form ) {

    $form = '<form role="search" method="get" id="searchform" action="' . home_url( '/' ) . '" >
    <div class="ssk" id="search">
    <input class="search-field " type="text" value="' . get_search_query() . '" name="s" id="s" placeholder="搜索…"/>
    <input class="search-submit" type="submit" id="searchsubmit" value="'. esc_attr__('Search') .'" />
    </div>
    </form>';

    return $form;
}
add_filter( 'get_search_form', 'Jtmac_search_form' );

其中Jtmac_search_form可以修改为自己自定义的名称,

 <div class="ssk" id="search">
<input class="search-field " type="text" value="' . get_search_query() . '" name="s" id="s" placeholder="搜索…"/>
<input class="search-submit" type="submit" id="searchsubmit" value="'. esc_attr__('Search') .'" />

是对应我们之前自己设计的

<div class="ssk">
<input type="search" class="search-field" placeholder="搜索…" value="" name="s" style="visibility: visible;">
<input type="submit" class="search-submit" value="搜索">

以上就是小编通过自己的实践总结出来的如何自定义WordPress的搜索框的过程了,有不懂得可以留言或者私聊我。