ripro主题美化教程 添加底部全局统计 wordpress主题美化

2024-11-15

本教程源码以及CSS全部来自于网络，并非本人原创。
本人只是把这美化过程单独出个教程而已。

最近一直在研究ripro主题，这款主题很适合做资源下载站，原版主题并不是很好看，所以最近网上出现各种ripro主题美化，本站也在陆续更新ripro美化教程，有兴趣的朋友可以关注一下。

本次教程主要就是美化底部，添加一个全局统计

效果展示

ripro主题美化教程 添加底部全局统计 wordpress主题美化

代码部署

1.在/functions.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 );
    return $query->post_count;
}

2. 在/footrt.php “<footer class=”site-footer”>”的上面位置(代码位置可根据主题自行调整)，加入以下代码：

<?php
	$mode_statistics = _cao('mode_statistics');
	if (is_array($mode_statistics) && isset($mode_statistics['bgimg']) && _cao('is_footer_statistics') ) : ?>

	<div class="site-data-wp" id="J_siteDataBar" data-bg="<?php echo $mode_statistics['bgimg']; ?>" style="background-image: url("<?php echo $mode_statistics['bgimg']; ?>");">
    <ul class="data-items">
    	<li>
    		<i><svg class="iconf wbdata-mb"><use xlink:href="#dict-shijian" rel="external nofollow" ></use></svg></i><span class="srctive"><?php echo floor((time()-strtotime("2019-04-13"))/86400); ?></span><strong>本站运营(天)</strong>
    	</li>
        <li>
        	<i><svg class="iconf wbdata-dl"><use xlink:href="#dict-yonghu1" rel="external nofollow" ></use></svg></i><span class="srctive"><?php $users = $wpdb->get_var("SELECT COUNT(ID) FROM $wpdb->users"); echo $users; ?></span><strong>用户总数</strong>
        </li>
        <li>
        	<i><svg class="iconf wbdata-rc"><use xlink:href="#dict-ziyuanjk" rel="external nofollow" ></use></svg></i><span class="srctive"><?php $count_posts = wp_count_posts(); echo $published_posts = $count_posts->publish;?></span><strong>资源数(个)</strong>
        </li>
        <li>
        	<i><svg class="iconf wbdata-rs"><use xlink:href="#dict-gengxin" rel="external nofollow" ></use></svg></i><span class="srctive srcshujia">7000</span><strong>资源大小(GB)</strong>
        </li>
        <li>
        	<i><svg class="iconf wbdata-um"><use xlink:href="#dict-dui" rel="external nofollow" ></use></svg></i><span class="srctive"><?php echo get_week_post_count(); ?></span><strong>近7天更新(个)</strong></li>
        </ul>
			<?php if ( $mode_statistics['statistics_text'] != '' ) : ?>
				<a class="btn btn-outlined" href="<?php echo esc_url( $mode_statistics['statistics_link'] ); ?>" rel="external nofollow"  rel="nofollow"><?php echo esc_html( $mode_statistics['statistics_text'] ); ?></a>
			<?php endif; ?>
    
	</div>
	<?php endif; ?>
	
	<script type="text/javascript">
	$('.srctive').countUp({
		delay: 10,
		time: 500
	});
</script>
<!--底部统计-->

3.将JS文件放入/assets/js 文件夹中

download

在/header.php <head> </head> 之间添加以下代码：

<script src="<?php echo get_template_directory_uri() ?>/assets/js/jquery.countup.min.js"></script>
<script src="<?php echo get_template_directory_uri() ?>/assets/js/jquery.waypoints.min.js"></script>
<script src="//at.alicdn.com/t/font_1169726_2lqdbum1zjd.js"></script>

4.CSS样式

/**底部统计**/
@media (max-width:768px) {
	.site-data-wp {
		display: none
	}
}
svg.iconf {
	display: inline-block;
	vertical-align: middle;
	width: 26px;
	height: 26px;
}

.site-data-wp svg {
	fill: #abbae5;
	-webkit-transition: fill .3s cubic-bezier(.31,1,.34,1);
	transition: fill .3s cubic-bezier(.31,1,.34,1);
}

.site-data-wp li span.active::after {
	opacity: 1
}

.site-data-wp li strong {
	display: block;
	color: #abbae5;
	font-size: 12px;
	line-height: 1;
	-webkit-transition: color .3s cubic-bezier(.31,1,.34,1);
	transition: color .3s cubic-bezier(.31,1,.34,1)
}

.site-data-wp li:hover svg {
	fill: #fff
}

.site-data-wp li:hover strong {
	color: #fff
}

.site-data-wp {
	height: 246px;
	background-size: auto 100%;
	background-repeat: repeat-x;
	background-color: #7a99f2;
	background-position: center;
	text-align: center;
	font-size: 0;
}

.site-data-wp .data-items {
	padding-top: 45px;
	padding-bottom: 32px;
	font-size: 0;
	min-height: 85px;
	margin: 0;
	padding-left: 0;
}

.site-data-wp li {
	display: inline-block;
	vertical-align: top;
	width: 220px;
}

.site-data-wp li i {
	display: inline-block;
	height: 25px;
}

address,caption,cite,code,dfn,em,i,strong,th,var {
	font-style: normal;
	font-weight: 400;
}

.site-data-wp li strong {
	display: block;
	color: #abbae5;
	font-size: 12px;
	line-height: 1;
	-webkit-transition: color .3s cubic-bezier(.31,1,.34,1);
	transition: color .3s cubic-bezier(.31,1,.34,1);
}

.site-data-wp li span {
	display: block;
	line-height: 48px;
	font-size: 36px;
	color: #fff;
	position: relative;
}

.site-data-wp li span::after {
	content: '+';
	font-size: 18px;
	position: absolute;
	line-height: 1;
	padding-left: 3px;
	opacity: 0;
}

.site-data-wp li span.srcshujia::after {
	opacity: 1;
}

.site-data-wp .btn-outlined {
	min-width: 100px;
	height: 40px;
	line-height: 36px;
	color: #fff;
	background-color: transparent;
	border: 2px solid #fff;
}

.site-data-wp .btn-outlined:active,.site-data-wp .btn-outlined:hover {
	background-color: rgba(255,255,255,.2)
}

.btn-outlined {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	position: relative;
	display: inline-block;
	height: 43px;
	line-height: 43px;
	min-width: 80px;
	padding: 0 10px;
	font-size: 14px;
	font-weight: 500;
	color: inherit;
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	background-color: #fff;
	border-radius: 5px;
	border: 0 none;
	position: relative;
	overflow: hidden;
} 
 /**底部统计**/

5.后台添加控制

//
// 39笔记博客二次开发
//
CSF::createSection($prefix, array(
    'title'       => '二次开发',
    'icon'        => 'fa fa-magic',
    'description' => '来自39笔记博客',
    'fields'      => array(

        array(
            'id'      => 'is_footer_statistics',
            'type'    => 'switcher',
            'title'   => '是否开启底部统计',
            'default' => true,
        ),
        array(
            'id'         => 'mode_statistics',
            'type'       => 'fieldset',
            'title'      => 'banner背景图块',
            'fields'     => array(
                array(
                    'id'      => 'bgimg',
                    'type'    => 'upload',
                    'title'   => '背景图',
                    'default' => '' ,
                ),
                array(
                    'id'      => 'statistics_text',
                    'type'    => 'text',
                    'title'   => '按钮1名称',
                    'default' => '39笔记博客',
                ),
                array(
                    'id'      => 'statistics_link',
                    'type'    => 'text',
                    'title'   => '按钮1链接',
                    'default' => 'https://www.39ip.cn',
                ),
            ),
            'dependency' => array('is_footer_statistics', '==', 'true'),
        ),

    ),
));

 

阅读剩余
十一 15

本站历史上的今天
    "吼吼~~~，往年的今天站长不知道跑哪里偷懒去了~~~"
提示：本文最后更新于2024年11月15日，如有错误或者已经失效，请留言告知。
加入QQ群图标 加入QQ群 微信公众号图标 关注微信公众号 联系我们图标 联系我们 请求更新图标 请求更新
重要声明

本站资源大多来自网络，如有侵犯你的权益请联系管理员E-mail:6447834@qq.com 我们会第一时间进行审核删除。站内资源为网友个人学习或测试研究使用，未经原版权作者许可,禁止用于任何商业途径！请在下载24小时内删除！

如果遇到关注公众号才可观看的文章，建议关注公众号。全站所有资源“任意下免费看”。本站资源少部分采用zip压缩，为防止有人压缩软件不支持7z格式，7z解压，建议下载7-zip，zip、rar解压，建议下载WinRAR。

本文链接：
文章作者
39笔记
隐私政策
PrivacyPolicy
用户协议
UseGenerator
许可协议
NC-SA 4.0
THE END
RiProWordPress美化
子比主题美化 – 独立下载页面美化
<<上一篇
8uftp上传工具((FTP客户端) V3.8.2.0 绿色版
下一篇>>
相关推荐
WordPress主题-ripro-V2主题菜单角标
WordPress主题-ripro-V2主题会员介绍模块
WordPress主题-ripro-V2主题其他业务模块
WordPress主题-ripro-V2主题轮播图样式圆角修改
WordPress主题-ripro-V2主题分类文章模块美化
WordPress主题-ripro-V2主题菜单分类美化
WordPress主题-ripro-V2主题侧边栏加入QQ群小小工具
WordPress主题-ripro-V2主题Logo扫光
WordPress主题-ripro-V2主题注册赠送会员模块
WordPress主题-ripro-V2主题去掉分类category模块
赶紧收藏我们,查看更多心仪的内容？按Ctrl+D收藏我们 或 发现更多
39笔记(39IP.CN),分享丰富网络资源。提供实用工具软件、VM虚拟机,涵盖手游、UI素材等。还有WordPress指南、主题、插件,及Windows优化系统下载。与您共探互联网和技术的变革。
提供云服务 | 提供云储存

Copyright© 2024 39笔记 - 39IP.CN 网站地图