RIPRO主题美化-首页简洁搜索框美化教程

教程开始

1、找到wp-content/themes/ripro/assets/css/diy.css并将附件内的diy.css内容整体复制进去并保存

抱歉，隐藏内容须成功 评论本文 后刷新可见！

2、找到/wp-content/themes/ripro/parts/home-mode/search.php找到如下代码

<div class="section pt-0 pb-0"><div class="row"><div class="home-filter--content lazyload" data-bg="<?php echo esc_url( @$home_search_mod['bg'] ); ?>"><div class="container"><h3 class="focusbox-title"><?php echo $title = ($home_search_mod['title']) ? $home_search_mod['title'] : '搜索本站精品资源' ;?></h3><p class="focusbox-desc"><?php echo $desc = ($home_search_mod['desc']) ? $home_search_mod['desc'] : '本站所有资源均为高质量资源，各种姿势下载。' ;?></p>    <form class="mb-0" method="get" autocomplete="off" action="<?php echo home_url(); ?>">        <div class="form-box search-properties">            <div class="row">                <div class="col-xs-12 col-sm-6 col-md-9">                    <div class="form-group mb-0">                        <input type="text" class="home_search_input" name="s" placeholder="输入关键词搜索...">                    </div>                </div>                <div class="col-xs-12 col-sm-6 col-md-3">                    <input type="submit" value="搜索"  class="btn btn--block">                </div>            </div>            <div class="home-search-results"></div>        </div>    </form></div></div></div></div>

3、将以上代码替换为以下代码即可

<div class="section bgcolor-fff search_section"><div class="container"><div class="row"><div class="home-filter--content"><form class="mb-0" method="get" autocomplete="off" action="<?php echo home_url(); ?>"><div class="form-box search-properties mb-0">    <div class="row">        <div class="col-xs-12 col-sm-6 col-md-9">            <div class="form-group mb-0">                <input type="text" class="home_search_input" name="s" placeholder="希望您有前戏的探索，不要粗暴的深入...">                </div>            </div>        <div class="col-xs-12 col-sm-6 col-md-3">            <input type="submit" value="搜索"  class="button transparent home_search">        </div>    </div>    <div class="home-search-results"></div></div></form></div></div></div></div>

4、大功告成，素材虎祝您网站芝麻开花节节高。