当前位置：麦风资源网-www.cnaspnetcore.com > 教程 > RiPro日主题美化教程-WordPress虚拟资源会员主题美化教程 侧边栏美化 个人中心美化 站点数据统计 底部美化

RiPro日主题美化教程-WordPress虚拟资源会员主题美化教程 侧边栏美化 个人中心美化 站点数据统计 底部美化

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

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

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

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

插入对应文件代码 
<?php else : ?>
<div class="section bgcolor-fff pt-0">

  • 文件位置二：riprofunctions.php 

最下面插入压缩包对应文件代码
// 每周更新的文章数量
function get_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 = new WP_Query( $args );
echo $query->post_count;
}
// 每日更新的文章数量
function WeeklyUpdate() {
$today = getdate();
$query = new WP_Query( 'year=' . $today["year"] . '&monthnum=' . $today["mon"] . '&day=' . $today["mday"]);
$postsNumber = $query->found_posts;
echo $postsNumber;
}

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

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

教程开始：

  • 文件位置一：导航文件：ripropartsnavbar.php

  • 文件位置二：CSS文件：riproassetscssdiy.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: searchLights 1s ease-in 1s infinite;
    animation: searchLights 1s ease-in 1s infinite;
}
.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: searchLights 1s ease-in 1s infinite;
    animation: searchLights 1s ease-in 1s infinite;
}
​
@-webkit-keyframes searchLights {
    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: solid 1px #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: 4px 8px 40px 0 rgba(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: 0 26px 40px -24px rgba(0, 36, 100, 0.3);
}
​
​
.container .row .card.ent-base {
    transition: all .3s ease-out;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
}
​
​
.container .row .card.ent-base .btn {
    background-image: -webkit-linear-gradient(bottom, #fff 30%, #fff);
    background-image: linear-gradient(to top, #fff 30%, #fff)
}
​
.container .row .card .version {
    font-weight: 700
}
​
.container .row .header {
    border-radius: 12px 12px 0 0;
    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: 5px auto 17px
}
​
.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: 5px 5px 5px 0 rgba(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: 2px solid #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)
}
​
@media screen and (max-width: 1450px) { 
.container .row .card  {width: 23.2%} 
} 
@media screen and (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-transform 0.5s;
    transition: transform 0.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代码，插入如下代码：

<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、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.cnaspnetcore.com/www_zx51_cn_01.svg);
    mask: url(https://www.cnaspnetcore.com/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: 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(https://www.cnaspnetcore.com/www_zx51_cn_02.svg);
    mask: url(https://www.cnaspnetcore.com/www_zx51_cn_02.svg);
    animation-delay: -2s;
    animation-duration: 5s;
}
#waveHorizontal3 {
    -webkit-mask: url(https://www.cnaspnetcore.com/www_zx51_cn_03.svg);
    mask: url(https://www.cnaspnetcore.com/www_zx51_cn_03.svg);
    animation-delay: -1s;
    animation-duration: 3s;
}

八、传送门如下：

暂无优惠

已有7人支付

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，请不要用于商业用途！
3. 如果你也有好源码或者教程，可以到审核区发布，分享有金币奖励和额外收入！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营和服务器所需！
7. 如遇到加密压缩包，默认解压密码为"www.cnaspnetcore.com",如还无法解压的请联系管理员！
8. 站长联系QQ：305646985 微信：fengyun88996
麦风资源网-www.cnaspnetcore.com » RiPro日主题美化教程-WordPress虚拟资源会员主题美化教程 侧边栏美化 个人中心美化 站点数据统计 底部美化
admin

admin 会员

分享到：

发表评论

相关推荐

开通永久VIP，海量资源，不限制下载，免费更新！

立即开通 了解详情