【Ripro美化】RiPro主题美化：美化底部搜索栏 添加底部波浪效果

美化底部搜索栏:

1. ripro > parts > diy-footer.php 文件， 搜索“<h6><?php echo _cao(‘site_footer_copdesc’);?></h6>”，将其整体替换为如下代码:

<p class="fr xk-data" id="wp_vip_stats">
	<em>资源数</em> <strong class="hl"><?php echo wp_count_posts()->publish;?></strong>
	<em>最后更新</em><strong class="hl"><?php $last = $wpdb->get_results("SELECT MAX(post_modified) AS MAX_m FROM $wpdb->posts WHERE (post_type = 'post' OR post_type = 'page') AND (post_status = 'publish' OR post_status = 'private')");$last = date('Y-n-j', strtotime($last[0]->MAX_m));echo $last; ?></strong>
</p>

2. ripro > assets > css > diy.css 添加如下样式:

.xk-data em{display:inline-block;font-size:12px;padding-right:8px;padding-left:20px;}
em,strong{font-style:normal;font-weight:normal;}
.xk-data strong{line-height:1;font-size:24px;color:#f9b015;}

注：左下角Logo默认未居中（想要居中得请在 ripro -> assets -> css-> diy.css 添加如下样式）

.footer-widget .footer--logo{margin-bottom:44px;max-width:180px;margin:0 auto;}

添加底部波浪效果:

1. ripro > footer.php 文件，在“<?php wp_footer(); ?>”前添加如下代码:

<div class="waveHorizontals mobile-hide">
    <div id="waveHorizontal1" class="waveHorizontal"></div>
    <div id="waveHorizontal2" class="waveHorizontal"></div>
    <div id="waveHorizontal3" class="waveHorizontal"></div>
</div>

2. ripro > assets > css > diy.css 添加如下样式:

.waveHorizontals{width:100%;height:20px;position:relative;overflow:hidden;z-index:1;background-color:#fff !important}
.ripro-dark .waveHorizontals{width:100%;height:20px;position:relative;overflow:hidden;z-index:1;background-color:#181616 !important}
#waveHorizontal1{-webkit-mask:url(../images/augsc_01.svg);mask:url(../images/augsc_01.svg);animation-delay:-2s;animation-duration:12s;}
#waveHorizontal1,#waveHorizontal2,#waveHorizontal3{background-image:linear-gradient(20deg,#f84270 0,#fe803b 100%)!important;}
.ripro-dark #waveHorizontal1{background-color:#f1f1f1!important;}
.ripro-dark  #waveHorizontal2{background-color:#f1f1f1!important;}
.ripro-dark  #waveHorizontal3{background-color:#f1f1f1!important;}
.waveHorizontal{width:200%;height:100%;display:block;position:absolute;left:0;bottom:0;background-repeat:repeat-x;background-position:left bottom;background-size:350px 100%;transform-origin:0 100% 0;animation-name:move;animation-timing-function:linear;animation-iteration-count:infinite;}
@keyframes move{0%{transform:translate(-175px,0px) scale(1,1)}50%{transform:translate(-87px,0px) scale(1,0.5)}100%{transform:translate(0px,0px) scale(1,1)}}
#waveHorizontal2{-webkit-mask:url(../images/augsc_02.svg);mask:url(../images/augsc_02.svg);animation-delay:-2s;animation-duration:5s;}
#waveHorizontal3{-webkit-mask:url(../images/augsc_03.svg);mask:url(../images/augsc_03.svg);animation-delay:-1s;animation-duration:3s;}

3. 附上所需图标，请自行下载，放入 ripro > assets > images 目录下:

感谢您的来访，获取更多精彩文章请收藏本站。