效果展示

教程开始

1.将以下css代码复制到ripro-v2主题文件css中

/*统计模块*/

.van-statistics-widget {
    background: #fff;
    padding: 0 ;
    margin-top: 30px;
}
.van-statistics-widget>.container {
    max-width: none !important;
    max-height: 355px;
    padding: 0 !important;
}
.van-statistics-widget>.container>.module.parallax {
    display: flex;
    min-height: 385px;
    position: relative;
    text-align: center;
}
.van-statistics-widget>.container>.module.parallax .container {
    margin: auto;
    padding-bottom: 60px;
    padding-top: 60px;
}

.van-statistics-widget>.container>.module.parallax:before {
    content: '';
    background-image: url(../images/statistics_pattern.png);
    height: 100%;
    width: 100%;
    opacity: 0.5;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    -webkit-transition: opacity 0.3s cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: opacity 0.3s cubic-bezier(0.77, 0, 0.175, 1);
    transition: opacity 0.3s cubic-bezier(0.77, 0, 0.175, 1);
}
.van-statistics-widget>.container>.module.parallax img {
    height: 113%;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    top: 0;
    width: 100%;
}

.van-statistics-widget>.container>.module.parallax .container {
    margin: auto;
    padding-bottom: 30px;
    padding-top: 30px;
}

.van-statistics-widget>.container>.module.parallax .entry-title {
    color: #fff;
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 0;
    position: relative;
    margin-top: 30px;
}

.van-statistics-widget>.container>.module.parallax .button,
.van-statistics-widget>.container>.module.parallax input[type="submit"],
.van-statistics-widget>.container>.module.parallax button[type="submit"],
.van-statistics-widget>.container>.module.parallax .navigation .nav-previous a,
.van-statistics-widget>.container>.module.parallax .navigation .nav-next a {
    margin: 30px 5px 0;
    position: relative;
    z-index: 60;
    background-color: #34495e;
}

/*@media (max-width: 767px) {*/
/*    .van-statistics-widget>.container>.module.parallax {*/
/*        min-height: 250px;*/
/*    }*/

/*    .van-statistics-widget>.container>.module.parallax .entry-title {*/
/*        font-size: 20px;*/
/*    }*/

/*    .van-statistics-widget>.container>.module.parallax .button,*/
/*    .van-statistics-widget>.container>.module.parallax input[type="submit"],*/
/*    .van-statistics-widget>.container>.module.parallax button[type="submit"],*/
/*    .van-statistics-widget>.container>.module.parallax .navigation .nav-previous a,*/
/*    .van-statistics-widget>.container>.module.parallax .navigation .nav-next a {*/
/*        width: 100%;*/
/*    }*/

/*    .van-statistics-widget>.container>.module.parallax .button+.button,*/
/*    .van-statistics-widget>.container>.module.parallax input[type="submit"]+input[type="submit"],*/
/*    .van-statistics-widget>.container>.module.parallax button[type="submit"]+button[type="submit"],*/
/*    .van-statistics-widget>.container>.module.parallax .navigation .nav-previous a+.navigation .nav-previous a,*/
/*    .van-statistics-widget>.container>.module.parallax .navigation .nav-next a+.navigation .nav-next a {*/
/*        margin-top: 10px;*/
/*    }*/
/*}*/

.mobanweb .data-items {
    font-size: 0;
    min-height: 85px;
    margin: 30px 0;
}

.mobanweb li {
    display: inline-block;
    vertical-align: top;
    width: 200px;
}

.mobanweb li i {
    display: inline-block;
    height: 25px;
    color: #fff;
    transition: 0.3s;
    font-size: 18px;
    margin-top: 20px;
}

.mobanweb li strong {
    display: block;
    line-height: 48px;
    font-size: 36px;
    color: #fff;
    position: relative;
    transition: 0.3s;
    font-weight: 500;
}

.mobanweb li span {
    display: block;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    transition: 0.3s;
}

.mobanweb li strong::after {
    content: '+';
    font-size: 18px;
    position: absolute;
    line-height: 1;
    padding-left: 3px;
    opacity: 0;
    transition: 0.3s;
}

.mobanweb li strong.active::after {
    opacity: 1;
}

.mobanweb li:hover i {
    color: #ec2546;
    transform: translate(0, -3px);
    text-shadow: 3px 5px 10px #1716166b;
}

.mobanweb li:hover strong {

    transform: translate(0, -3px);
    text-shadow: 3px 5px 10px #1716166b;
}

.mobanweb li:hover span {

    transform: translate(0, -3px);
    text-shadow: 3px 5px 10px #1716166b;
}

.van-statistics-widget>.container>.module.parallax .container {
    padding-top: 1px;
    padding-bottom: 38px;
}

a.button.transparent.go_pay_vip_box {
    color: #1e1e1e;
    background: linear-gradient(50deg, #FFAB00 0, #fff800 100%) !important;
    box-shadow: 4px 3px 16px 0px #ffc1072e;
}

.footer-widget .widget--newsletter button {
    color: #0056ff;
}

.van-statistics-widget>.container>.module.parallax .button,
.van-statistics-widget>.container>.module.parallax input[type="submit"],
.van-statistics-widget>.container>.module.parallax button[type="submit"],
.van-statistics-widget>.container>.module.parallax .navigation .nav-previous a,
.navigation .nav-next a {
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-family: Lato, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 1;
    outline: none;
    padding: 12px 20px;
    text-align: center;
    background-color: #34495e;
}

.van-statistics-widget>.container>.module.parallax .button,
.van-statistics-widget>.container>.module.parallax input[type="submit"],
.van-statistics-widget>.container>.module.parallax button[type="submit"],
.van-statistics-widget>.container>.module.parallax .navigation .nav-previous a,
.van-statistics-widget>.container>.module.parallax .navigation .nav-next a {
    margin: 30px 5px 0;
    position: relative;
    z-index: 60;
    background-color: #34495e;
}

.button,
input[type="submit"] {
    background: linear-gradient(-125deg, #0295f9 0%, #2f49fd 100%);
    box-shadow: 0 3px 10px -1px #2c63ff !important;
    color: #FFF;
}

.van-statistics-widget>.container>.module.parallax .button,
.van-statistics-widget>.container>.module.parallax input[type="submit"],
.van-statistics-widget>.container>.module.parallax button[type="submit"],
.van-statistics-widget>.container>.module.parallax .navigation .nav-previous a,
.van-statistics-widget>.container>.module.parallax .navigation .nav-next a {
    width: 200px;
}

@media (max-width: 767px) {
    .van-statistics-widget>.container>.module.parallax {
        display: none;
    }
}


/*统计模块结束*/

2.将以下代码添加到ripro-v2/inc/options/widget-options.php底部

<?php
/**
 * 网站统计
 */
CSF::createWidget('ripro_v2_module_statistics', array(
    'title' => esc_html__('RI-首页模块 : 网站统计', 'ripro-v2'),
    'classname' => 'ripro_v2-widget-parallax van-statistics-widget',
    'description' => esc_html__('VAN主题 a 网站统计模块.', 'ripro-v2'),
    'fields' => array(

        array(
            'id' => 'image',
            'type' => 'upload',
            'title' => esc_html__('背景图', 'ripro-v2'),
            'button_title' => '上传',
            'remove_title' => '删除',
            'default' => trailingslashit(get_stylesheet_directory_uri()) .'assets/images/statistics_bg.jpg',
        ),
        array(
            'id' => 'is_text',
            'type' => 'switcher',
            'title' => esc_html__('显示内容介绍', 'ripro-v2'),
            'default' => true,
            'sanitize' => false,
        ),
        array(
            'id' => 'is_button',
            'type' => 'switcher',
            'title' => esc_html__('显示按钮', 'ripro-v2'),
            'default' => true,
            'sanitize' => false,
        ),
        array(
            'id' => 'text',
            'type' => 'text',
            'title' => esc_html__('内容介绍', 'ripro-v2'),
            'default' => esc_html__('内容介绍', 'ripro-v2'),
            'dependency' => array('is_text', '==', 'true'),
            'sanitize' => false,
        ),
        array(
            'id' => 'button_one',
            'type' => 'fieldset',
            'title' => '按钮一',
            'dependency' => array('is_button', '==', 'true'),
            'fields' => array(
                array(
                    'id' => '_title',
                    'type' => 'text',
                    'title' => '标题',
                    'default' => '开通VIP',
                ),
                array(
                    'id' => '_link',
                    'type' => 'text',
                    'title' => '链接',
                    'default' => '/user?action=vip',
                ),
            ),
        ),
        array(
            'id' => 'button_two',
            'type' => 'fieldset',
            'title' => '按钮二',
            'dependency' => array('is_button', '==', 'true'),
            'fields' => array(
                array(
                    'id' => '_title',
                    'type' => 'text',
                    'title' => '标题',
                    'default' => '资源推荐',
                ),
                array(
                    'id' => '_link',
                    'type' => 'text',
                    'title' => '链接',
                    'default' => '#',
                ),
            ),
        ),
        array(
            'id' => 'user_count',
            'type' => 'fieldset',
            'title' => '会员总数统计',
            'fields' => array(
                array(
                    'id' => '_count',
                    'type' => 'text',
                    'title' => '数量',
                    'desc' => '留空调用系统数据',
                    'default' => '',
                ),
                array(
                    'id' => '_color',
                    'type' => 'color',
                    'title' => '悬浮颜色',
                    'default' => '#ec2546',
                ),
                array(
                    'id' => '_icon',
                    'type' => 'text',
                    'title' => '图标',
                    'default' => 'fa fa-home',
                    'desc' => '请使用<a target="_blank" href="https://fontawesome.com/icons">Font Awesome</a>图标,例子<code>fa fa-home</code>',
                ),
            ),
        ),
        array(
            'id' => 'post_count',
            'type' => 'fieldset',
            'title' => '资源总数统计',
            'fields' => array(
                array(
                    'id' => '_count',
                    'type' => 'text',
                    'title' => '数量',
                    'desc' => '留空调用系统数据',
                    'default' => '',
                ),
                array(
                    'id' => '_color',
                    'type' => 'color',
                    'title' => '悬浮颜色',
                    'default' => '#ec2546',
                ),
                array(
                    'id' => '_icon',
                    'type' => 'text',
                    'title' => '图标',
                    'default' => 'fa fa-home',
                    'desc' => '请使用<a target="_blank" href="https://fontawesome.com/icons">Font Awesome</a>图标,例子<code>fa fa-home</code>',
                ),
            ),
        ),
        array(
            'id' => 'post_count_for_week',
            'type' => 'fieldset',
            'title' => '本周发布统计',
            'fields' => array(
                array(
                    'id' => '_count',
                    'type' => 'text',
                    'title' => '数量',
                    'desc' => '留空调用系统数据',
                    'default' => '',
                ),
                array(
                    'id' => '_color',
                    'type' => 'color',
                    'title' => '悬浮颜色',
                    'default' => '#ec2546',
                ),
                array(
                    'id' => '_icon',
                    'type' => 'text',
                    'title' => '图标',
                    'default' => 'fa fa-home',
                    'desc' => '请使用<a target="_blank" href="https://fontawesome.com/icons">Font Awesome</a>图标,例子<code>fa fa-home</code>',
                ),
            ),
        ),
        array(
            'id' => 'post_count_for_day',
            'type' => 'fieldset',
            'title' => '今日发布统计',
            'fields' => array(
                array(
                    'id' => '_count',
                    'type' => 'text',
                    'title' => '数量',
                    'desc' => '留空调用系统数据',
                    'default' => '',
                ),
                array(
                    'id' => '_color',
                    'type' => 'color',
                    'title' => '悬浮颜色',
                    'default' => '#ec2546',
                ),
                array(
                    'id' => '_icon',
                    'type' => 'text',
                    'title' => '图标',
                    'default' => 'fa fa-home',
                    'desc' => '请使用<a target="_blank" href="https://fontawesome.com/icons">Font Awesome</a>图标,例子<code>fa fa-home</code>',
                ),
            ),
        ),
        array(
            'id' => 'run_date',
            'type' => 'fieldset',
            'title' => '稳定运行时长统计',
            'fields' => array(
                array(
                    'id' => '_count',
                    'type' => 'date',
                    'title' => '数量',
                    'desc' => '设置一个起始时间,系统将自动计算经过的天数',
                    'default' => '12/1/2020',
                ),
                array(
                    'id' => '_color',
                    'type' => 'color',
                    'title' => '悬浮颜色',
                    'default' => '#ec2546',
                ),
                array(
                    'id' => '_icon',
                    'type' => 'text',
                    'title' => '图标',
                    'default' => 'fa fa-home',
                    'desc' => '请使用<a target="_blank" href="https://fontawesome.com/icons">Font Awesome</a>图标,例子<code>fa fa-home</code>',
                ),
            ),
        ),

    ),
));
if (!function_exists('ripro_v2_module_statistics')) {
    function ripro_v2_module_statistics($args, $instance)
    {
        if (!is_page_template_modular()) {
            return false;
        } //非模块页面不显示

        echo $args['before_widget'];

        ob_start(); 
         //排行榜CSS
        wp_enqueue_style('statistics_style', trailingslashit(get_stylesheet_directory_uri()) . 'assets/css/statistics.css?van_ver=' . VAN_VER);
        ?>
        
        <div class="module parallax">
            <?php if (!empty($instance['image'])): ?>
                <img class="jarallax-img lazyload" data-src="<?php echo esc_url($instance['image']); ?>"
                     src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                     alt="<?php echo esc_attr($instance['title']); ?>">
            <?php endif;

            if ($instance['text'] != ''): ?>
                <?php
                $users = wp_list_authors('echo=0&exclude_admin=0&hide_empty=0&optioncount=1&style=0');
                $users = explode(',', $users);
                ?>
                <div class="container">
                    <div class="mobanweb">
                        <ul class="data-items">
                            <li><i class="mdi <?php echo $instance['user_count']['_icon'] ?>"></i><strong
                                        data-count="97596"
                                        class="active"><?php echo $instance['user_count']['_count'] ?: count($users) ?></strong><span>会员总数(位)</span>
                            </li>
                            <li><i class="mdi <?php echo $instance['post_count']['_icon'] ?>"></i><strong
                                        data-count="34774"
                                        class="active"><?php echo $instance['post_count']['_count'] ?: wp_count_posts()->publish ?></strong><span>资源总数(个)</span>
                            </li>
                            <li><i class="mdi <?php echo $instance['post_count_for_week']['_icon'] ?>"></i><strong
                                        data-count="841940"
                                        class="active"><?php echo $instance['post_count_for_week']['_count'] ?: ft_get_posts_count_from_this_week() ?></strong><span>本周发布(个)</span>
                            </li>
                            <li><i class="mdi <?php echo $instance['post_count_for_day']['_icon'] ?>"></i><strong
                                        data-count="2377"
                                        class="active"><?php echo $instance['post_count_for_day']['_count'] ?: ft_get_posts_count_from_today() ?></strong><span>今日发布(个)</span>
                            </li>
                            <li><i class="mdi <?php echo $instance['run_date']['_icon'] ?>"></i><strong
                                        data-count="7082"
                                        class="active"><?php echo (int)((time() - strtotime($instance['run_date']['_count'])) / 86400); ?></strong><span>稳定运行(天)</span>
                            </li>
                        </ul>
                    </div>
                    <?php if($instance['is_text'] === null ? true : $instance['is_text']):?>
                    <h4 class="entry-title"><?php echo $instance['text'] ?></h4>
                    <?php endif;?>
                    <?php if($instance['is_button'] === null ? true : $instance['is_button']):?>
                    <a target="_blank" class="button"
                       href="<?php echo $instance['button_one']['_link'] ?>"><?php echo $instance['button_one']['_title'] ?></a>
                    <a target="_blank" class="button transparent"
                       href="<?php echo $instance['button_two']['_link'] ?>"><?php echo $instance['button_two']['_title'] ?></a>
                    <?php endif;?>
                </div>
            <?php endif;

            if (!empty($instance['link'])): ?>
                <a class="u-permalink"
                   href="<?php echo esc_url($instance['link']); ?>"<?php echo esc_attr($instance['new_tab'] ? ' target="_blank"' : ''); ?>></a>
            <?php endif; ?>
        </div> <?php

        echo ob_get_clean();

        echo $args['after_widget'];

    }
}

3.外观-小工具,拖动到显示的位置,添加相应数据即可

本教学根据源分享van子主题制作,转载请留好主题作者信息

发表评论

后才能评论

本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。

最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。 若排除这种情况,可在对应资源底部留言,或联络我们。

对于会员专享、整站源码、程序插件、网站模板、网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。

如果您已经成功付款但是网站没有弹出成功提示,请联系站长提供付款信息为您处理

源码素材属于虚拟商品,具有可复制性,可传播性,一旦授予,不接受任何形式的退款、换货要求。请您在购买获取之前确认好 是您所需要的资源

@www.mitaobo.com