function代码
function footer_ranking() { ?>
<div class="ranking b2-content" style="margin-top: 100px;margin-bottom: 100px;">
<div class="list clearfix">
<div id="ranking1" class="box" style="margin: 30px;">
<a class="top-icon js-rank-bottom1">最新榜</a>
<?php display_ranking_list('7 days ago'); ?>
<i class="imv2-chevrons-right"></i>
</a>
</div>
<!--热门榜-->
<div id="ranking2" class="box" style="margin: 30px;">
<a class="top-icon js-rank-bottom2">热门榜</a>
<?php get_activity_ranking('7 days ago'); ?>
<i class="imv2-chevrons-right"></i>
</a>
</div>
<!--推荐榜-->
<div id="ranking3" class="box" style="margin: 30px;">
<a class="top-icon js-rank-bottom3">推荐榜</a>
<?php get_recommendation_ranking('7 days ago'); ?>
<i class="imv2-chevrons-right"></i>
</a>
</div>
</div>
</div>
</div>
<?php }
add_action('b2_index_after', 'footer_ranking');
使用上面那段代码将会插入在b2主题网站底部,你也可以提取出html代码将其放置在b2后台的自定义区块内
排行榜函数
排行榜函数也放functions.php
文件内
CSS代码
/*排行榜区å—*/
@media screen and (max-width:768px) {
#ranking2 {
display:none;
}
#ranking3 {
display:none;
}
}.list.clearfix {
display:flex;
justify-content:space-between;
margin: auto;
}
.ranking-item {
position:relative;
width:365px;
background:#fff;
border-radius:var(--b2radius);
margin-bottom:20px;
}
a.top-icon.js-rank-bottom1 {
display:block;
width:130px;
height:105px;
line-height:256px;
position:absolute;
left:100px;
top:-93px;
background:url(https://www.vxras.com/wp-content/themes/vxras/img/logo.png) no-repeat center/100%;
font-size:30px;
color:#41ccf3fc;
font-weight:600;
text-align:center;
}
a.top-icon.js-rank-bottom2 {
display:block;
width:130px;
height:105px;
line-height:256px;
position:absolute;
left:100px;
top:-99px;
background:url(https://www.vxras.com/wp-content/themes/vxras/img/logo1.png) no-repeat center/100%;
font-size:30px;
color:#fc6976fc;
font-weight:600;
text-align:center;
}
a.top-icon.js-rank-bottom3 {
display:block;
width:130px;
height:105px;
line-height:230px;
position:absolute;
left:100px;
top:-87px;
background:url(https://www.vxras.com/wp-content/themes/vxras/img/loginll.png) no-repeat center/100%;
font-size:30px;
color:#ffa738;
font-weight:600;
text-align:center;
}
.class-box {
margin-top:60px;
background:url(https://dekoboko-majo-anime.jp/assets/images/common/line_top.png) no-repeat top center,url(https://dekoboko-majo-anime.jp/assets/images/common/line_bottom.png) no-repeat bottom center;
background-size:116px;
padding: 30px 0;
}
a.class-item.js-rank {
display:block;
width:100%;
height:80px;
display:flex;
align-items:center;
margin-bottom:20px;
}
.num-icon.num-icon1 {
width:19px;
height:22px;
background:url(https://www.vxras.com/wp-content/themes/vxras/img/top1.png) no-repeat center/100%;
margin:0 12px 0 15px;
}
img.class-pic {
width:90px;
border-radius:8px;
margin-right:5px;
height: 70px;
}
.class-info {
width:190px;
font-size:12px;
}
.name {
line-height:20px;
font-weight:400;
margin-bottom:2px;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:2;
overflow:hidden;
-webkit-box-orient:vertical;
font-size:15px;
}
.name:hover {
color:var(--b2color);
}
.price {
color:#f01414;
font-weight:600;
margin-bottom:2px;
}
.study-num {
color:#9199a1;
font-weight:400;
}
.num-icon.num-icon2 {
background:url(https://www.vxras.com/wp-content/themes/vxras/img/top2.png) no-repeat center/100%;
margin:0 12px 0 15px;
width:19px;
height:22px;
}
.num-icon.num-icon3 {
background:url(https://www.vxras.com/wp-content/themes/vxras/img/top3.png) no-repeat center/100%;
margin:0 12px 0 15px;
width:19px;
height:22px;
}
.num-icon.num-icon4 {
background:url(https://www.vxras.com/wp-content/themes/vxras/img/top4.png) no-repeat center/100%;
margin:0 12px 0 15px;
width:19px;
height:22px;
}
.num-icon.num-icon5 {
background:url(https://www.vxras.com/wp-content/themes/vxras/img/top5.png) no-repeat center/100%;
margin:0 12px 0 15px;
width:19px;
height:22px;
}
.num-icon.num-icon6 {
background:url(https://www.vxras.com/wp-content/themes/vxras/img/top6.png) no-repeat center/100%;
margin:0 12px 0 15px;
width:19px;
height:22px;
}
.num-icon.num-icon7 {
background:url(https://www.vxras.com/wp-content/themes/vxras/img/top7.png) no-repeat center/100%;
margin:0 12px 0 15px;
width:19px;
height:22px;
}
.num-icon.num-icon8 {
background:url(https://www.vxras.com/wp-content/themes/vxras/img/top8.png) no-repeat center/100%;
margin:0 12px 0 15px;
width:19px;
height:22px;
}
.num-icon.num-icon9 {
background:url(https://www.vxras.com/wp-content/themes/vxras/img/top9.png) no-repeat center/100%;
margin:0 12px 0 15px;
width:19px;
height:22px;
}
a.bottom-link.js-rank-bottom {
width:130px;
height:35px;
display:flex;
justify-content:center;
align-items:center;
margin:0 auto;
font-size:12px;
color:#fff;
line-height:12px;
font-weight:500;
background-image:url(https://www.vxras.com/wp-content/themes/vxras/img/home.55842.png);
background-repeat:no-repeat;
border-radius:12px;
margin-bottom:20px;
margin-top:15px;
}
.badg.badg-sm, .but.badg-sm {
font-size: .8em;
vertical-align: .1em;
min-width: 1.6em;
background: var(--b2color);
padding: 0 5px;
border-radius: 5px;
color: #fff;
}
css内含外链图片,记得自己本地化,随时可能会失效
THE END
暂无评论内容