一戚揭、RiPro前端顯示資源統(tǒng)計(jì)搓译、會(huì)員統(tǒng)計(jì)、日更周更統(tǒng)計(jì)數(shù)據(jù)
對(duì)很多的小伙伴來說捧请，需要統(tǒng)計(jì)已發(fā)布的文章和會(huì)員數(shù)據(jù)并顯示在前端凡涩，讓用戶一目了然的知道網(wǎng)站是否每日都在更新數(shù)據(jù)，是否這個(gè)網(wǎng)站值開通VIP會(huì)員玩玩……
1疹蛉、本次教程統(tǒng)計(jì)信息包含：資源總數(shù)活箕、注冊會(huì)員數(shù)量、本周更新可款、今日更新育韩，當(dāng)然也可以靈活修改名稱和自己擴(kuò)展其他統(tǒng)計(jì)項(xiàng)。
2闺鲸、使用方法：
文件位置一： /ripro/parts/home-mode/slider.php
插入對(duì)應(yīng)文件代碼
<?phpelse:?>
<divclass="section bgcolor-fff pt-0">
文件位置二：ripro\functions.php
最下面插入壓縮包對(duì)應(yīng)文件代碼
// 每周更新的文章數(shù)量
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;
}
// 每日更新的文章數(shù)量
functionWeeklyUpdate() {
$today=getdate();
$query=newWP_Query('year='.$today["year"] .'&monthnum='.$today["mon"] .'&day='.$today["mday"]);
$postsNumber=$query->found_posts;
echo$postsNumber;
}
二筋讨、RiPro主題Logo加閃光動(dòng)畫效果
最近看到很多的網(wǎng)站LOGO都有個(gè)閃光動(dòng)畫效果，怎么做的呢摸恍？小編也研究了下悉罕，適合所有網(wǎng)站，下面把代碼分享給大家……
教程開始：
文件位置一：導(dǎo)航文件：\ripro\parts\navbar.php
文件位置二：CSS文件：\ripro\assets\css\diy.css
/*
*LOGO閃光動(dòng)畫
*/
.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主題導(dǎo)航頭像下拉菜單美化
在原版基礎(chǔ)上增加頭像下拉菜單美化功能壁袄，讓網(wǎng)站提高了不少檔次，下面教大家如何美化頭像下拉菜單……
教程開始：
1谜慌、文件位置一：導(dǎo)航文件：/ripro/parts/navbar.php
直接復(fù)制替換整個(gè)文件
2然想、文件位置二：CSS文件：/ripro/assets/css/diy.css
直接復(fù)制粘貼到diy.css文件最下面即可
四、RIpro主題整站側(cè)邊導(dǎo)航條
在原版基礎(chǔ)上增加側(cè)邊欄美化功能欣范，讓網(wǎng)站更容易引導(dǎo)會(huì)員添加站長聯(lián)系方式变泄，最終做了一個(gè)整站側(cè)邊懸浮導(dǎo)航菜單令哟，帶簽到、客服妨蛹、加群屏富、風(fēng)格切換、全屏等功能
教程開始：
1蛙卤、文件位置一：導(dǎo)航文件： /ripro/footer.php
直接復(fù)制替換整個(gè)文件
2狠半、文件位置二：CSS文件： /ripro/assets/css/diy.css
直接復(fù)制粘貼到diy.css文件最下面即可
3、修改成你自己的qq颤难、微信二維碼神年、qq群等
五、VIP自定義美化
使用自定義VIP會(huì)員等級(jí)引導(dǎo)替換原版會(huì)員引導(dǎo)功能行嗤，讓網(wǎng)站更容易會(huì)員分級(jí)和特權(quán)更清晰已日，最終做了如下VIP會(huì)員引導(dǎo)，廢話不多說栅屏，直接上圖：
教程開始：
1飘千、文件位置一：VIP原文件： ripro/parts/home-mode/vip.php
直接復(fù)制替換整個(gè)文件
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栈雳、修改成你自己的會(huì)員等級(jí)價(jià)格护奈、特權(quán)等
六、RiPro主題設(shè)置高級(jí)分類文章菜單
RiPro內(nèi)置一個(gè)高級(jí)菜單哥纫，這個(gè)菜單的作用是可以直接在菜單鼠標(biāo)移動(dòng)顯示此菜單分類下的文章霉旗，許多會(huì)員不太熟悉，這里介紹一下磺箕，方法很簡單奖慌。
教程開始：
首先，在wordpress后臺(tái)松靡，打開外觀-菜單，如圖建椰，打開wp菜單的自定義css類選項(xiàng)：
然后即可在每個(gè)菜單看到多出一個(gè)填寫“CSS類（可選）”的輸入框：
這里要設(shè)置的必須是一個(gè)分類菜單雕欺，否則無法找到文章，輸入以下標(biāo)簽即可自動(dòng)調(diào)用：
輸入：menu-item-mega
此功能菜單可以同時(shí)多個(gè)設(shè)置棉姐，方便的狠
之后保存菜單即可屠列，愛你么么噠
七、底部波浪線
效果如下：
教程開始：
1伞矩、在網(wǎng)站底部自定義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;
}
八乃坤、傳送門如下：
