AI摘要
AI生成
教程开始
第一步
在主题的func.php中引入
第二步
引入区块文件
然后再去主题目录下的index.php中引入以下代码，放置于<?php get_footer();前
第三步
主题后台自定义头部HTML代码内引入JS
上传文件放置于主题目录下即可，需要配合本站排行榜页面一起使用，已打包整合，排行榜页面（rankList.php）放置于pages目录内
小工具版本
代码部署
本代码由站长亲自做成小工具版 添加到 func.php 文件子比主题更新也不会被覆盖。方便站长维护管理！
func.php代码
require_once get_theme_file_path('/widgets-ranking.php');require_once get_theme_file_path(‘/widgets-ranking.php’);
将下载的压缩包放进子比主题根目录即可
小工具版本来自炙焰博客
改版代码
如果需要这个样式的话，只需要在原教程的基础上替换Index_rankinglist.php这个文件内的代码
代码如下
第二版（狗大户版本）
添加CSS代码
}
.price {
color: #f01414;
font-weight: 600;
margin-bottom: 2px;
}
.study-num {
color: #9199a1;
font-weight: 400;
}
.num-icon.num-icon2 {
background: url(/pic/top2.png) no-repeat center/100%;
margin: 0 12px 0 15px;
width: 19px;
height: 22px;
}
.num-icon.num-icon3 {
background: url(/pic/top3.png) no-repeat center/100%;
margin: 0 12px 0 15px;
width: 19px;
height: 22px;
}
.num-icon.num-icon4 {
background: url(/pic/top4.png) no-repeat center/100%;
margin: 0 12px 0 15px;
width: 19px;
height: 22px;
}
.num-icon.num-icon5 {
background: url(/pic/top5.png) no-repeat center/100%;
margin: 0 12px 0 15px;
width: 19px;
height: 22px;
}
.num-icon.num-icon6 {
background: url(/pic/top6.png) no-repeat center/100%;
margin: 0 12px 0 15px;
width: 19px;
height: 22px;
}
a.bottom-link.js-rank-bottom {
width: 120px;
height: 24px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
font-size: 12px;
color: #fff;
line-height: 12px;
font-weight: 500;
background-image: linear-gradient(270deg,#ff4f39 0,#fd6400 100%);
border-radius: 12px;
margin-bottom: 20px;
}
/** 首页排行榜列表结束 **/
html代码放在zibll/index.php里面的底部get_footer(); 之前
以下是html代码，搜索cat=，后面的数字就是调用的文章分类ID，改成你的就行。
如果只需要首页版本的排行榜就使用第二版吧，初一的是加了一个单独的排行榜页面。
更新时间1.27日，获取到文章分类的链接，优化布局
THE END
暂无评论内容