怎样在WordPress中加上检索切换实际效果

摘要:WordPress将默认设置的CSS类加上到由主题内的各种各样模版标识转化成的HTML中。WordPress主题应用 模版标识来显示信息检索表单。它能够輸出两种不一样的检索表单,...

WordPress将默认设置的CSS类加上到由主题内的各种各样模版标识转化成的HTML中。WordPress主题应用<?php get_search_form(); ?>模版标识来显示信息检索表单。它能够輸出两种不一样的检索表单,1种用于HTML4主题,另外一种用于适用HTML5的主题。假如您的主题add_theme_support('html5', array('search-form'))在functions.php文档中有行,则此模版标识将輸出HTML5检索表单。不然,它将輸出HTML4检索表单。

找出主题转化成方式的另外一种方式是查询检索表单源码。

当您的主题沒有HTML5适用时,这将显示信息get_search_form()模版标识:

<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">

<div><label class="screen-reader-text" for="s">Search for:</label>

<input type="text" value="" name="s" id="s" />

<input type="submit" id="searchsubmit" value="Search" />

</div>

</form>

以便在WordPress中加上检索切换实际效果,将应用HTML5检索表单。假如您的主题转化成HTML4检索表单,则在主题的functions.php文档中加上下列编码行:

add_theme_support('html5', array('search-form'));

将切换实际效果加上到WordPress检索表单

您必须的第1件事是检索标志。WordPress中默认设置的Twenty Thirteen主题带有1个十分好看的小标志,您能够随便在Photoshop中建立自身的或从在网上免费下载1个。只需保证该文档名为search-icon.png。

如今,您必须将此检索标志提交到主题的图象文档夹中。应用Filezilla等FTP顾客端联接到您的网站,随后开启主题型录。

如今这是最终也是最重要的1步。您必须将此CSS加上到主题的款式表格中:

.site-header .search-form {

position: absolute;

right: 200px;

top: 200px;

}

.site-header .search-field {

background-color: transparent;

background-image: url(images/search-icon.png);

background-position: 5px center;

background-repeat: no-repeat;

background-size: 24px 24px;

border: none;

cursor: pointer;

height: 37px;

margin: 3px 0;

padding: 0 0 0 34px;

position: relative;

-webkit-transition: width 400ms ease, background 400ms ease;

transition: width 400ms ease, background 400ms ease;

width: 0;

}

.site-header .search-field:focus {

background-color: #fff;

border: 2px solid #c3c0ab;

cursor: text;

outline: 0;

width: 230px;

}

.search-form

.search-submit {

display:none;

}

有关这个CSS的关键留意事项是CSS3过渡实际效果,它容许大家轻轻松松建立切换实际效果。另请留意,您仍需依据主题的合理布局调剂检索标志和表单的部位。



联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:小程序社区