centos-stream-9 centos9 配置国内源 阿里云源
在给企业客户定制响应式企业网站过程中，碰到这个问题，WordPress The7二次开发之自定义搜索框，The7还是The7.2主题默认的
搜索框都是图标式点击弹出搜索框，这种形式不是说不好，而是特定场景特定而论！如下图，The7是图标式点击弹出搜索框
而我们要实现的是让用户看到搜索框和搜索按钮，实现效果如下图：
ok，下面来实现，其实比较难搞的是样式。定位到文件searchform.php：dt-the7\templates\header\searchform.php
[php]
<!–屏蔽默认搜索功能
<div class="mini-search">
<form class="searchform" role="search" method="get" action="<?php echo esc_url( home_url( ‘/’ ) ); ?>">
<input type="text" class="field searchform-s" name="s" value="<?php echo esc_attr( get_search_query() ); ?>" placeholder="<?php _e( ‘Type and hit enter …’, ‘the7mk2′ ); ?>" />
<?php do_action( ‘presscore_header_searchform_fields’ ); ?>
<input type="submit" class="assistive-text searchsubmit" value="<?php esc_attr_e( ‘Go!’, ‘the7mk2′ ); ?>" />
<a href="#go" id="trigger-overlay" class="submit<?php echo $class; ?>"><?php echo esc_html($caption); ?></a>
</form> <li><a id="actionSearch" class="bttnSearch"><span>Search</a></li>
</div>
–>
<div id="header-search" >
<form method="get" action="<?php echo esc_url( home_url( ‘/’ ) ); ?>" id="frmSearch" name="frmSearch">
<ul>
<li><input type="text" id="criteria" name="s" value="<?php echo esc_attr( get_search_query() ); ?>" placeholder="<?php _e( ‘Type and hit enter …’, ‘the7mk2′ ); ?>"></li>
<li></li><li><a href="javascript:document:frmSearch.submit();" id="actionSearch" class="bttnSearch" ><span>Search</span></a></li>
</ul>
<div class="clear"></div>
</form>
</div>
[/php]
实现样式如下：
[css]
<style>
#header-search { display: inline-block;
width: 290px;
height: 28px;}
#header-search ul { margin:0 auto; min-height:40px; list-style: none; list-style-image: none; list-style-position: none; list-style-type: none; width:300px; }
#header-search ul li { position:relative; float:left; margin:2px 3px; }
#header-search ul li:first-child { width: 200px; }
#header-search ul li span { display:block; text-align:center; text-shadow: 0 -1px 0 #04832f; margin-right:6px; }
#header-search ul li input[type="text"] { display:block; padding:2px 3px; width: 180px; height: 28px; border: 1px solid #c7c7c7; margin: 0 auto 12px; font-size: 16px; color:#000; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
.bttnSearch { display:block; background-image:url(/wp-content/uploads/2015/08/bttn-search-sprite.png); background-position: 0 0; background-repeat: no-repeat; width: 79px; height: 23px; }
.bttnSearch:hover { display:block; background-image:url(/wp-content/uploads/2015/08/bttn-search-sprite.png); background-position: 0 -23px; background-repeat: no-repeat; width: 79px; height: 23px; }
a {
text-decoration: none;
cursor: pointer;
color: #019A38;
}
</style>
[/css]
如上，使用图片代替表单提交功能submit：
<a href="javascript:document:frmSearch.submit();" id="actionSearch" class="bttnSearch" ><span>Search</span></a> 使用The7的企业用户都中彩票了，你还在等什么？相关企业需求，请联系我们。实打实的报价，实打实的做事！
相关文章
