WordPress子比主题添加打赏说明页面和评论排行榜页面

WordPress子比主题添加打赏说明页面，可以记载打赏会员的相关信息，页面非常漂亮，喜欢的便宜可以下载使用，界面如下：

具体方法：

在后台仪表盘，页面，里面添加页面，输入以下隐藏框里的代码即可。到时候前台页面调用这个单页面链接即可。

上面代码中的CSS文件建议下载保存到你的服务器，链接修改为你的链接，这样可以永不失效。https://www.xbwx.cc/wp-includes/css/important.css

下面是评论榜单的截图，添加有两处functions跟css 方法在下面：

functions代码：

拿这些覆盖在原来的css上就行了

.mod-list code:not([class]){border-radius: var(--radius-inner);padding: 0 8px;margin: 4px;font-family: 'Joe Font';font-size: 14px;word-break: keep-all;border: 1px solid var(--color-purple);vertical-align: baseline;background-color: white;color: inherit;margin: 2px;}

.li1{width: 100% !important;}

.icon1,.icon2,.icon3,.icon4{font-size: 50px;display: inline-block;vertical-align: text-top !important;font-weight: 400;margin-top: -102px;margin-right: -92px;position: relative;}

.box1 img{box-shadow: 5px 5px 5px rgb(255 129 0/55%);-webkit-box-shadow: 5px 5px 5px rgb(255 129 0/55%);width: 125px;border-radius: 20%;border: 1px solid #ffbc78d6;}

.box2 img{box-shadow: 5px 5px 5px rgb(39 0 255/50%);-webkit-box-shadow: 5px 5px 5px rgb(39 0 255/50%);width: 125px;border-radius: 20%;border: 1px solid #9480ffe0;}

.box3 img{box-shadow: 5px 5px 5px rgb(251 0 255/50%);-webkit-box-shadow: 5px 5px 5px rgb(251 0 255/50%);width: 125px;border-radius: 20%;border: 1px solid #fd80ffcc;}

.box4 img{box-shadow: 5px 5px 5px rgb(251 255 0 / 50%);-webkit-box-shadow: 5px 5px 5px rgb(251 255 0 / 50%);width: 125px;border-radius: 20%;border: 1px solid #feff84;}

.autlvt{font-size: 20px;color: #fff;display: inline-block;vertical-align: text-top;font-weight: 400;border-radius: 6px;line-height: 1.4;padding: 0 6px;letter-spacing: 0px;margin-top: -165px;margin-left: -110px;position: relative;}

.mod-list{display:flex;margin-bottom:20px !important;margin: auto;padding: 15px;border-radius: var(--radius-wrap);box-shadow: 0 0 6px 0 #a9a9a945;background-color: #fff;text-align: center;flex-wrap: wrap;border:1px dashed var(--classA)}

.mod-list li{list-style: none;box-sizing: border-box;width: 30%;}

@media screen and (max-width: 768px){.box img {width: 100px;}.autlvt{margin-top: -140px;margin-left: -82px;font-size: 16px;}.icon1, .icon2, .icon3{margin-right: -70px;}}

.mod-list h5:before {content: '「';color: var(--theme);font-weight: 600;margin-right: 5px;}

.mod-list h5:after {content: '」';color: var(--theme);font-weight: 600;margin-left: 5px;}

.mod-list h5 {font-size: 28px;line-height: 32px;padding:20px 0 40px 0;text-align: center;width: 100%;}

.joe_detail__article code:not([class]){background-color: white;color: inherit;margin:2px}

.joe_detail{padding: 30px;}

.joe_detail__article table thead th{text-align:center}

.joe_detail__article p{line-height: 36px;margin: auto;font-size: 14px;text-align: center;}

.aut-11{background: linear-gradient(317deg, #4d4c4c 30%, #878787 70%, #5f5c5c 100%);}

.joe_detail{padding: 0 30px 30px 30px;}

.ds td{text-align:center}

.wkf:hover{opacity:0.2;}

.sevent1,.sevent2{grid-template-columns: repeat(7, 1fr);}

.layui-laypage>a:last-child, .layui-laypage>a:last-child em{margin-bottom: 5px !important;}

@media (max-width:420px){.joe_detail{padding:20px}.joe_detail__article ol,.joe_detail__article ul{margin-bottom: 18px;padding-left: 30px;}.sevent1,.sevent2{grid-template-columns: repeat(3, 1fr);}}

@media (max-width:760px){.joe_gird__item{margin-right: 10px;}}

@media (max-width:680px){.wkf,.joe_gird{white-space: nowrap;overflow-y: scroll;}}

@media (max-width:585px){.wkf{display: -webkit-box;}}

@media (max-width:1185px){.mod-list li{width:30%;}}

@media (max-width:1020px){.mod-list li{width:28%;}}

@media (max-width:625px){.mod-list li{width:26%;}}

@media (max-width:460px){.mod-list li{width:25%;}}

@media (max-width:460px){.mod-list li{width:100%;}}

我是在“article“上一行添加的，还是截个图吧

<?php top_comment_authors(4) ?>