RIPRO主题美化：添加首页滚动公告+资源统计模块教程

本教程是RIPRO主题美化教程，主要是添加滚动公告和资源统计模块，新手一定要主要文件路径，子主题可能有点难度，可查看底部注意事项。

美化教程：

1.下载附件将“images”文件夹上传至：“ripro/assets”。

2.将下载包中的“census.php”上传至：“ripro/parts/home-mode”。

3.找到“ripro/diy.css”，将下面代码添加到最下面：

/*首页网站快讯统计*/
.fa-volume-up:before {
    content: "\f028";
    color: #07aefc;
}
.deanggwrap {
	width: 100%;
	padding-top: 30px;
	padding-right: 40px;
    background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
}
.deangg {
	width:900px;
	float:left;
	/*height:30px;*/
	line-height:30px;
	background:#f0f4ff;
	margin-right: 30px;
	padding:10px 0;
	border-radius:30px;
}
@media (max-width:767px) {
	.deangg {
		display: none
	}
}
.deanggspan {
	float:left;
	width:105px;
	margin:0 auto;
	color:#333;
	font-size:14px;
}
.deanggspan i {
	display:block;
	float:left;
	font-size:18px;
	color:#f60;
	margin-top:7px;
	margin-left:15px;
	margin-right:6px;
}
.deanggspan span {
	display:block;
	float:left;
	color: #2575fc;
}
.deangg b {
	height:12px;
	margin-top:9px;
	width:1px;
	display:block;
	float:left;
	background:#a8a8a8;
}
.deanggc {
	float:left;
	width:730px;
	margin-left:20px;
}
.announce-wrap {
	height:30px;
	overflow:hidden;
}
.deanggc ul {
	}
.deanggc ul li {
	font-size:14px;
	width:730px;
	display:block;
	clear:both;
	height:30px;
	/* line-height:30px;*/
	
}
.deanggc ul li a {
	font-weight: 400;
	color:#6b798e;
	float:left;
}
.deanggc ul li a:hover {
	color:#2575fc;
	text-decoration: blink;
}
.deanggc ul li span {
	float:right;
	color:#999;
	font-size:12px;
	width:120px
}
.deanchart {
	float:right;
	height:50px;
	width:400px;
	color:#fff;
	margin-left: 20px;
}
.deanchart ul {
	width: 460px;
	margin: 0;
	padding: 0;
	word-wrap: break-word;
}
.deanchart ul li {
	float:left;
	height:100%;
	margin-right:20px;
	font-size:14px;
}
.deanchart ul li i {
	display:block;
	float:left;
	width:35px;
	height:35px;
	margin-top:8px;
	background:url(../images/zhuti.png) 0 0 no-repeat;
}
.deanchart ul li.deanchart2 i {
	background:url(../images/icon1.png) 0 0 no-repeat;
}
.deanchart ul li.deanchart3 i {
	background:url(../images/icon2.png) 0 0 no-repeat;
}
.deanchart ul li.deanchart4 i {
	background:url(../images/icon3.png) 0 0 no-repeat;
}
.deanchart ul li.deanchart5 i {
	background:url(../images/icon5.png) 0 0 no-repeat;
}
.deanchartdiv {
	float:left;
	margin-left:8px;
	margin-top:6px;
	text-align:center;
}
.deanchartdiv em {
	font-size:12px;
	color:#999;
	font-style: inherit;
}
.deanchartdiv span {
	font-size:12px;
	color:#999;
}
.deanchartdiv a {
	font-size:12px;
	color:#999;
}
.clear{
	margin-top: -5px;
}
.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.aligncenter p.wp-caption-text {
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
/*首页网站快讯统计*/

4.找到：“ripro/footer.php”底部文件，在“</body>”标签前添加下面的js代码：

<script>
(function($) {
    $.fn.FontScroll = function(options) {
        var d = { time: 3000, s: 'fontColor', num: 1 }
        var o = $.extend(d, options);


        this.children('ul').addClass('line');
        var _con = $('.line').eq(0);
        var _conH = _con.height(); 
        var _conChildH = _con.children().eq(0).height(); 
        var _temp = _conChildH; 
        var _time = d.time; 
        var _s = d.s; 


        _con.clone().insertAfter(_con); 

        
        var num = d.num;
        var _p = this.find('li');
        var allNum = _p.length;

        _p.eq(num).addClass(_s);


        var timeID = setInterval(Up, _time);
        this.hover(function() { clearInterval(timeID) }, function() { timeID = setInterval(Up, _time); });

        function Up() {
            _con.animate({ marginTop: '-' + _conChildH });
            
            _p.removeClass(_s);
            num += 1;
            _p.eq(num).addClass(_s);

            if (_conH == _conChildH) {
                _con.animate({ marginTop: '-' + _conChildH }, "normal", over);
            } else {
                _conChildH += _temp;
            }
        }

        function over() {
            _con.attr("style", 'margin-top:0');
            _conChildH = _temp;
            num = 1;
            _p.removeClass(_s);
            _p.eq(num).addClass(_s);
        }
    }
})(jQuery);


$(function() {
    $('.marquee_box').FontScroll({ time: 5000, num: 1 });
});
</script>

5.找到主题目录下的“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 );
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;
}

6.找到：“ripro/inc/codestar-framework/options/”目录下找到options.theme.php并搜索关键词如下关键词

'vip' => '会员介绍模块

7.然后再下面一行添加如下代码即可整合到后台：

'census' => '统计模块',

注意：本教程是以“RIPRO主题”为案例讲解的，子主题下如没有找到相应文件，是因为没有在子主题“functions.php”文件引入核心文件，如遇到此类情况，请复制父级主题下到的文件到子主题中，然后在子主题“functions.php”文件中引入，新手可参考父级主题是怎么引入的。