一、RiPro前端显示资源统计、会员统计、日更周更统计数据

对很多的小伙伴来说，需要统计已发布的文章和会员数据并显示在前端，让用户一目了然的知道网站是否每日都在更新数据，是否这个网站值开通VIP会员玩玩……

1、本次教程统计信息包含：资源总数、注册会员数量、本周更新、今日更新，当然也可以灵活修改名称和自己扩展其他统计项。

2、使用方法：

文件位置一： /ripro/parts/home-mode/slider.php

插入对应文件代码

<?phpelse:?>

<divclass=”section bgcolor-fff pt-0″>

文件位置二：ripro\functions.php

最下面插入压缩包对应文件代码

// 每周更新的文章数量

functionget_week_post_count(){

$date_query=array(

array(

‘after’=>’1 week ago’

)

);$args=array(

‘post_type’=>’post’,

‘post_status’=>’publish’,

‘date_query’=>$date_query,

‘no_found_rows’=>true,

‘suppress_filters’=>true,

‘fields’=>’ids’,

‘posts_per_page’=>-1

);

$query=newWP_Query($args);

echo$query->post_count;

}

// 每日更新的文章数量

functionWeeklyUpdate() {

$today=getdate();

$query=newWP_Query(‘year=’.$today[“year”] .’&monthnum=’.$today[“mon”] .’&day=’.$today[“mday”]);

$postsNumber=$query->found_posts;

echo$postsNumber;

}

二、RiPro主题Logo加闪光动画效果

最近看到很多的网站LOGO都有个闪光动画效果，怎么做的呢？小编也研究了下，适合所有网站，下面把代码分享给大家……

教程开始：

文件位置一：导航文件：\ripro\parts\navbar.php

文件位置二：CSS文件：\ripro\assets\css\diy.css

/*

*LOGO闪光动画

*/

.logo-wrapper{

position:relative;

font-size:2em;

font-weight:700;

line-height:39px;

overflow:hidden;

margin:0;

}

​

.logo-wrapper::before{

content:””;

position:absolute;

width:150px;

height:10px;

background-color:rgba(255,255,255,.5);

-webkit-transform:rotate(-45deg);

transform:rotate(-45deg);

-webkit-animation:searchLights1sease-in1sinfinite;

animation:searchLights1sease-in1sinfinite;

}

.ripro-dark.logo-wrapper::before{

content:””;

position:absolute;

width:150px;

height:10px;

background-color:rgba(25,22,22,0.55);

-webkit-transform:rotate(-45deg);

transform:rotate(-45deg);

-webkit-animation:searchLights1sease-in1sinfinite;

animation:searchLights1sease-in1sinfinite;

}

​

@-webkit-keyframessearchLights{

0%{left:-90px;top:0; }

to{left:90px;top:0; }

}

三、RiPro主题导航头像下拉菜单美化

在原版基础上增加头像下拉菜单美化功能，让网站提高了不少档次，下面教大家如何美化头像下拉菜单……

教程开始：

1、文件位置一：导航文件：/ripro/parts/navbar.php

直接复制替换整个文件

2、文件位置二：CSS文件：/ripro/assets/css/diy.css

直接复制粘贴到diy.css文件最下面即可

四、RIpro主题整站侧边导航条

在原版基础上增加侧边栏美化功能，让网站更容易引导会员添加站长联系方式，最终做了一个整站侧边悬浮导航菜单，带签到、客服、加群、风格切换、全屏等功能

教程开始：

1、文件位置一：导航文件： /ripro/footer.php

直接复制替换整个文件

2、文件位置二：CSS文件： /ripro/assets/css/diy.css

直接复制粘贴到diy.css文件最下面即可

3、修改成你自己的qq、微信二维码、qq群等

五、VIP自定义美化

使用自定义VIP会员等级引导替换原版会员引导功能，让网站更容易会员分级和特权更清晰，最终做了如下VIP会员引导，废话不多说，直接上图：

教程开始：

1、文件位置一：VIP原文件： ripro/parts/home-mode/vip.php

直接复制替换整个文件

2、文件位置二：CSS文件： /ripro/assets/css/diy.css

/*VIP开通*/

.container.row.card{

border:solid1px#e5e5e5;

width:23.5%;

background-color:#fff;

display:-webkit-box;

display:-webkit-flex;

display:-ms-flexbox;

display:flex;

-webkit-box-orient:vertical;

-webkit-box-direction:normal;

-webkit-flex-direction:column;

-ms-flex-direction:column;

flex-direction:column;

border-radius:12px;

}

​

.container.row.card.active{

box-shadow:4px8px40px0rgba(0,0,0,.1)

}/*.container .row .card:not(:last-of-type) {*/

.container.row.card{

margin:10px;

}

​

.container.row.card.ent-base:hover{

transform:translate(0,-10px);

-webkit-transform:translate(0,-10px);

-moz-transform:translate(0,-10px);

-o-transform:translate(0,-10px);

box-shadow:026px40px-24pxrgba(0,36,100,0.3);

}

​

​

.container.row.card.ent-base{

transition:all.3sease-out;

-webkit-transition:all.3sease-out;

-moz-transition:all.3sease-out;

-o-transition:all.3sease-out;

}

​

​

.container.row.card.ent-base.btn{

background-image:-webkit-linear-gradient(bottom,#fff30%,#fff);

background-image:linear-gradient(totop,#fff30%,#fff)

}

​

.container.row.card.version{

font-weight:700

}

​

.container.row.header{

border-radius:12px12px00;

color:#fff;

font-size:14px;

line-height:1;

display:-webkit-box;

display:-webkit-flex;

display:-ms-flexbox;

display:flex;

-webkit-box-orient:vertical;

-webkit-box-direction:normal;

-webkit-flex-direction:column;

-ms-flex-direction:column;

flex-direction:column;

-webkit-box-align:center;

-webkit-align-items:center;

-ms-flex-align:center;

align-items:center;

padding-top:23px;

font-weight:300;

z-index:1;

}

​

.container.row.header.price-year{

margin-top:12px;

display:-webkit-box;

display:-webkit-flex;

display:-ms-flexbox;

display:flex;

-webkit-box-align:end;

-webkit-align-items:flex-end;

-ms-flex-align:end;

align-items:flex-end;

font-weight:400

}

​

.container.row.header.pricing-deco{

width:100%;

}

​

.container.row.header.price-year.dollar{

font-size:18px;

-webkit-align-self:flex-start;

-ms-flex-item-align:start;

align-self:flex-start;

margin-top:3px;

font-weight:300

}

​

.container.row.header.price-year.price{

font-size:46px;

letter-spacing:1.7px;

font-weight:700;

font-family:Helvetica

}

​

​

.container.row.header.price-quarter{

font-size:12px;

margin:5pxauto17px

}

​

.container.row.header.btn{

width:160px;

/*line-height: 12px;*/

border-radius:2px;

color:rgba(0,0,0,.7);

font-size:14px;

border:0;

font-weight:500;

font-family:PingFangSC;

cursor:pointer

}

​

.container.row.header.btn:hover{

box-shadow:5px5px5px0rgba(0,0,0,.14)

}

​

.container.row.content{

position:relative;

font-size:12px;

/* padding-top: 24px; */

-webkit-box-flex:1;

-webkit-flex:1;

-ms-flex:1;

flex:1;

z-index:99;

top:-10px;

background-color:#fff;

}

​

.container.row.content.desc{

line-height:1;

padding-left:37px;

margin-bottom:18px;

color:rgba(62,62,62,.8);

position:relative

}

​

.container.row.content.desc:before{

position:absolute;

content:””;

height:6px;

width:9px;

border:2pxsolid#3e3e3e;

-webkit-transform:rotate(-45deg);

-ms-transform:rotate(-45deg);

transform:rotate(-45deg);

top:20%;

left:16px;

border-top:0;

border-right:0;

opacity:.6;

filter:alpha(opacity=60)

}

​

@mediascreenand(max-width:1450px) {

.container.row.card{width:23.2%}

}

@mediascreenand(max-width:750px) {

.container.row.card{width:100%}

}

@media(min-width:1460px) {

.container.row.card{

width:23.5%;

}

}

​

.container.row.pricing-deco.deco-layer{

-webkit-transition:-webkit-transform0.5s;

transition:transform0.5s;

}

​

.container.row.pricing-deco:hover.deco-layer–1{

-webkit-transform:translate3d(15px,0,0);

transform:translate3d(15px,0,0);

}

​

.container.row.pricing-deco:hover.deco-layer–2{

-webkit-transform:translate3d(-15px,0,0);

transform:translate3d(-15px,0,0);

}

​

3、修改成你自己的会员等级价格、特权等

六、RiPro主题设置高级分类文章菜单

RiPro内置一个高级菜单，这个菜单的作用是可以直接在菜单鼠标移动显示此菜单分类下的文章，许多会员不太熟悉，这里介绍一下，方法很简单。

教程开始：

首先，在wordpress后台，打开外观-菜单，如图，打开wp菜单的自定义css类选项：

然后即可在每个菜单看到多出一个填写“CSS类（可选）”的输入框：

这里要设置的必须是一个分类菜单，否则无法找到文章，输入以下标签即可自动调用：

输入：menu-item-mega

此功能菜单可以同时多个设置，方便的狠

之后保存菜单即可，爱你么么哒

七、底部波浪线

效果如下：

教程开始：

1、在网站底部自定义JS代码，插入如下代码：

<divclass=”waveHorizontals mobile-hide”>

<divid=”waveHorizontal1″class=”waveHorizontal”></div>

<divid=”waveHorizontal2″class=”waveHorizontal”></div>

<divid=”waveHorizontal3″class=”waveHorizontal”></div>

</div>

2、diy.css插入如下css:

/*

* 底部波浪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(https://www.zx51.cn/www_zx51_cn_01.svg);

mask:url(https://www.zx51.cn/www_zx51_cn_01.svg);

animation-delay:-2s;

animation-duration:12s;

}

#waveHorizontal1,#waveHorizontal2,#waveHorizontal3{

background-color:#2a52fd!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:leftbottom;

background-size:350px100%;

transform-origin:0100%0;

animation-name:move;

animation-timing-function:linear;

animation-iteration-count:infinite;

}

@keyframesmove{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(https://www.zx51.cn/www_zx51_cn_02.svg);

mask:url(https://www.zx51.cn/www_zx51_cn_02.svg);

animation-delay:-2s;

animation-duration:5s;

}

#waveHorizontal3{

-webkit-mask:url(https://www.zx51.cn/www_zx51_cn_03.svg);

mask:url(https://www.zx51.cn/www_zx51_cn_03.svg);

animation-delay:-1s;

animation-duration:3s;

}