给网站添加博客说明页面

1436

前言

这个页面是在别人网站扒拉过来修改过的，代码有点乱，将就的用吧！打赏列表还没写完，也不想写了，有能力的可以自己写完，或者小伙伴打赏之后自己在线修改添加！先看图吧！

图片

给网站添加博客说明页面-猫叔栈

给网站添加博客说明页面-猫叔栈

给网站添加博客说明页面-猫叔栈

给网站添加博客说明页面-猫叔栈

给网站添加博客说明页面-猫叔栈

添加页面

在page里新建一个页面把下面的代码直接复制进去，然后添加页面就行了，还有最好你们还是把css下载到你们网站本地，要不然哪天站长舍弃这篇css代码，你们的网页就变成废页了！

<?php

/**
 * Template name: XY - 博客重地
 * Description:   XY - 重地
 */

get_header();
?>
<link rel="stylesheet" href="https://www.ffsir.com/msi/css/important.css" /> 
<style>
.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;}}
</style> 
  <main role="main" class="container"> 
   <div class="joe_detail" data-cid="36" style="margin-bottom: 40px;box-shadow: 0 0 6px 0 #a9a9a945;"> 
    <article class="joe_detail__article"> 
     <h5>打赏说明</h5>
     <div id="zm_gll">
      欢迎参与给猫叔发工资计划
     </div>
     <br />
     <ol>
      <li>感谢您对小站的支持，打赏完可在<code>留言板</code>留言，可以指定打赏金额的用途~</li>
      <li>打赏位置：本站任意文章右下方均可，或者点这里 <span style="cursor:pointer;" id="dorzs"><svg class="icon" aria-hidden="true" style="font-size:20px"><use xlink:href="#icon-qianbao"></use></svg></span></li>
      <li>也可以多点点广告呀，我至今还没有提过钱呢qaq</li>
      <li>打赏记录在下面，打赏的<code>小伙伴</code>可以在留言板留言修改备注</li>
     </ol><br/>
     <div class="joe_card__describe"> 
         <div class="joe_card__describe-title">
          打赏记录测试中
         </div> 
        <div class="joe_card__describe-content">
     <table class="wkf">
      <thead>
       <tr>
        <th align="center">打赏时间</th>
        <th align="center">打赏人昵称</th>
        <th align="center">金额</th>
        <th align="center">途径</th>
        <th align="center">备注</th>
       </tr>
      </thead>
      <tbody class="fly-list">
       <tr class="ds">
        <td style="overflow: hidden;"><code>2021</code>-<code>12</code>-<code>03</code></td>
        <td>猫叔</td>
        <td><code>100.00</code> <i class="fa fa-cny"></i></td>
        <td><i class="iconfont icon-zhifubaozhifu"></i></td>
        <td><a href="https://www.ffsir.com" target="_blank">猫叔栈客</a></td>
       </tr>
      </tbody>
     </table>
     <div style="text-align: center;">
        <div id="page" class="pagination-container"> </div>
    </div>
     </div>
     </div>
     <span class="menu-target-fix" id="menu_index_2" name="menu_index_2"></span>
     <h5>留言板说明</h5>
     <div id="zm_gll">
      留言板及用户等级说明
     </div>
     <br />
     <ol>
      <li>留言板存储在本地数据库中（2022）</li>
      <li>为了获取留言头像，请记得填好<code>QQ邮箱</code>，
       <s>
        若填写qq邮箱优先调用qq头像（2022）
       </s></li>
      <li>头像获取顺序为本站随机->第三方获取->用户上传</li>
      <li>留言板支持部分MARKDOWN及html语法，比如 文字加粗 图片引用 换行 表格等</li>
      <li><font color="red">名字乱起，邮箱乱填，网站乱写，不会回复，直接删评。</font></li>
      <li>少用<code>图片</code>功能，可以用现有的表情代替图片，请勿上传H擦边的图片</li>
      <li>根据评论数量，现实用户留言等级，未注册登录用户默认为路人，具体说明如下表</li>
     </ol>
     <section style="margin-bottom: 15px">
      <joe-card-describe title="用户等级">
       <span class="_content" style="display: block;"> 
        <div class="joe_card__describe"> 
         <div class="joe_card__describe-title">
          用户等级
         </div> 
         <div class="joe_card__describe-content">
          <section style="margin-bottom: 15px">
           <joe-gird column="7" gap="15">
            <span class="_content" style="display: block;">
             <div class="joe_gird" style="gap: 15px; grid-template-columns: repeat(7, 1fr);">
              <div class="joe_gird__item">
               <p><span class="autlv aut-0" title="评论等级LV.0">N</span><br />评论<10</p>
              </div>
              <div class="joe_gird__item">
               <p><span class="autlv aut-1" title="评论等级LV.1">R</span><br />评论11-20</p>
              </div>
              <div class="joe_gird__item">
               <p><span class="autlv aut-2" title="评论等级LV.2">SR</span><br />评论21-30</p>
              </div>
              <div class="joe_gird__item">
               <p><span class="autlv aut-3" title="评论等级LV.3">SP</span><br />评论31-40</p>
              </div>
              <div class="joe_gird__item">
               <p><span class="autlv aut-4" title="评论等级LV.4">SSR</span><br />评论41-50</p>
              </div>
              <div class="joe_gird__item">
               <p><span class="autlv aut-5" title="评论等级LV.5">UR</span><br />评论51-100</p>
              </div>
              <div class="joe_gird__item">
               <p><span class="autlv aut-6" title="评论等级LV.MAX">MR</span><br />评论>100</p>
              </div>
             </div></span>
           </joe-gird>
          </section>
         </div> 
        </div> </span>
      </joe-card-describe>
     </section>
     <section style="margin-bottom: 15px">
      <joe-card-describe title="身份名片">
       <span class="_temp" style="display: block;"><br />
       <div class="joe_card__describe"> 
         <div class="joe_card__describe-title">
          用户铭牌
         </div> 
         <div class="joe_card__describe-content">
        <section style="margin-bottom: 15px">
         <joe-gird column="7" gap="15">
          <span class="_content" style="display: block;">
           <div class="joe_gird sevent1">
            <div class="joe_gird__item">
             <p><span class="autlv aut-7" title="这是猫叔站长哦">博主</span><br /><font color="#EE33EE">猫叔专用卡片</font></p>
            </div>
            <div class="joe_gird__item">
             <p><span class="autlv aut-8" title="本站注册用户">新朋友</span><br />本站注册用户</p>
            </div>
            <div class="joe_gird__item">
             <p><span class="autlv aut-9" title="路人默认卡片">游客</span><br />路人默认卡片</p>
            </div>
           </div></span>
         </joe-gird>
        </section></div></div><br /></span>
      </joe-card-describe>
     </section>
     <section style="margin-bottom: 15px">
      <joe-card-describe title="会员名片">
       <span class="_content" style="display: block;"> 
        <div class="joe_card__describe"> 
         <div class="joe_card__describe-title">
          附加铭牌
         </div> 
         <div class="joe_card__describe-content">
          <section style="margin-bottom: 15px">
           <joe-gird column="7" gap="15">
            <span class="_content" style="display: block;">
             <div class="joe_gird sevent2">
              <div class="joe_gird__item">
               <p><span class="autlv aut-10" title="推广会员">VIP</span><br />推广会员卡片</p>
              </div>
              <div class="joe_gird__item">
               <p><span class="autlv aut-11" title="代理会员">SVIP</span><br />代理会员卡片</p>
              </div>
              <div class="joe_gird__item"></div>
              <div class="joe_gird__item"></div>
              <div class="joe_gird__item"></div>
             </div></span>
           </joe-gird>
          </section>
         </div> 
        </div> </span>
      </joe-card-describe>
     </section>
     <section style="margin-bottom: 15px">
      <joe-callout color="#f0ad4e">
       <span class="_content" style="display: block;"> 
        <div class="joe_callout" style="border-left-color: #f0ad4e;">
          已经成为<code>VIP</code>
         <code>SVIP</code>的
         <code>小伙伴</code>，可以在本站做
         <code>任务</code>，
         提升返利比例<code>上限90%</code>
         <ol>
          <li>在本站发布有效的文章并且通过审核达到一定数量</li>
          <li>在本站给猫叔站长发工资并且达到一定数量</li>
         </ol> 
        </div> </span>
      </joe-callout>
     </section>
     <span class="menu-target-fix" id="menu_index_3" name="menu_index_3"></span>
     <h5>下载声明</h5>
     <div id="zm_gll">
      资源分享或者是下载页面是一些我在网上扒的一些很不错的程序，但是也要说一下免责声明
     </div>
     <br />
     <ol>
      <li>本站上的所有软件和资料均为软件作者提供和网友推荐收集整理而来，仅供学习和研究使用。如有侵犯你版权的，请来信指出，本站将立即改正。</li>
      <li>本站保证站内提供的所有可下载资源无毒无害，但不保证本站提供的下载资源的准确性、安全性和完整性；</li>
      <li>用户必须明白，对提供下载的软件等不拥有任何权利，其版权归该下载资源的合法拥有者所有。</li>
      <li>同时本站也不承担用户因使用这些下载资源对自己和他人造成任何形式的损失或伤害。</li>
      <li>未经本站的明确许可，任何人不得盗用本站下载资源；不得复制或仿造本站。</li>
      <li>本站对其自行开发的或和他人共同开发的所有内容、技术手段和服务拥有全部知识产权，任何人不得侵害或破坏，也不得擅自使用。</li>
     </ol>
     <p>
      <joe-dotted startcolor="#ff6c6c" endcolor="#1989fa"> 
       <span class="joe_dotted" style="background-image: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%)"></span> 
      </joe-dotted></p>
     <span class="menu-target-fix" id="menu_index_4" name="menu_index_4"></span>
     <h5>隐私协议声明</h5>
     <div id="zm_gll">
      本站非常重视您的隐私和个人信息保护。在您在浏览网站时，本站可能会收集和使用您的相关信息。
     </div>
     <br />
     <ol>
      <li>本站使用第三方百度统计来统计整站页面数据。</li>
      <li>本站使用了
       <del>
        一级域（www.ffsir.com）的域名Let's Encrypt
       </del>TrustAsia TLS RSA CA证书，开启SSL及HTTP2以保障访问安全</li>
      <li>留言板中包含有昵称、邮箱、网址三项个人信息，当您填写并提交后，本站不会保存您的个人信息至浏览器本地储存。</li>
      <li>本站所收集的数据信息仅用于网站数据分析，不会与任何公司、组织和个人共享您的个人信息，不会将您的个人信息转让给任何公司、组织和个人。</li>
      <li>因不能确定资源的来源是否是正版，今后不会再标注出以上引用来源。</li>
     </ol> 
     <div id="dorzs" style="cursor:pointer;text-align:center;color: var(--color-orange);">
      - - - The Reward - - -
      </div>
    </article> 
   </div>
<?php comments_template('/template/comments.php', true); ?>
</main>
<?php
get_footer();

新增评论榜单

此次增加评论榜单我就不偷懒直接发整页了，这样可以省去小伙伴修改的时间，添加有两处functions跟css！

给网站添加博客说明页面-猫叔栈

functions代码

//评论等级榜单
function top_comment_authors($amount = 4) {
  global $wpdb;
  $i=0;
  $prepared_statement = $wpdb->prepare(
        'SELECT *,COUNT(comment_author) AS comments_count, comment_author, comment_author_url
         FROM '.$wpdb->comments.'
         WHERE comment_author != "" AND comment_type = "comment" AND comment_approved = 1
         GROUP BY comment_author
         ORDER BY comments_count DESC, comment_author ASC 
         LIMIT %d',
         $amount);
  $results = $wpdb->get_results($prepared_statement);
  $output = '<ul class="mod-list row"><h5 style="color: var(--main);margin-bottom:0;position: relative;font-weight: 600;">评论榜单</h5>';
  foreach($results as $result) {
      $i++;
      $com_n=$result->comments_count;
      if($result->user_id == 1){
          $com_n+=94;
      };
      if($com_n<10){
          $pllv='<span class="autlvt aut-0" data-toggle="tooltip" data-original-title="评论等级LV.0">N</span>';
      }elseif($com_n>=10&&$com_n<21){
          $pllv='<span class="autlvt aut-1" data-toggle="tooltip" data-original-title="评论等级LV.1">R</span>';
      }elseif($com_n>=21&&$com_n<31){
          $pllv='<span class="autlvt aut-2" data-toggle="tooltip" data-original-title="评论等级LV.2">SR</span>';
      }elseif($com_n>=31&&$com_n<41){
          $pllv='<span class="autlvt aut-3" data-toggle="tooltip" data-original-title="评论等级LV.3">SP</span>';
      }elseif($com_n>=41&&$com_n<51){
          $pllv='<span class="autlvt aut-4" data-toggle="tooltip" data-original-title="评论等级LV.4">SSR</span>';
      }elseif($com_n>=51&&$com_n<100){
          $pllv='<span class="autlvt aut-5" data-toggle="tooltip" data-original-title="评论等级LV.5">UR</span>';
      }elseif($com_n>=100){
          $pllv='<span class="autlvt aut-6" data-toggle="tooltip" data-original-title="评论等级LV.MAX">MR</span>';
      };
      $usertx=get_avatar($result->user_id, 32);
    $output .='
    <li style="margin:15px;" class="li'.$i.'"><div class="box box'.$i.'"><a href="'.$result->comment_author_url.'" target="_blank" data-toggle="tooltip" data-original-title="访问用户网站">'.$usertx.'</a></div>
        <div style="margin: 10px;">
                <div class="username" title="" style="margin: auto;font-size: large;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"><a href="https://www.ffsir.com/archives/author/'.$result->user_id.'"><code>'.$result->comment_author.'</code></a></div>
                '.$pllv.'
                <div style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;margin-top:-14px;">评论'.$result->comments_count.'条</div>
                <svg class="icon icon'.$i.'" aria-hidden="true"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-huangguan'.$i.'"></use></svg>
            </div>
        </li>';
  }
  $output .= '</ul>';
  echo $output;
}

CSS代码

嘿嘿！这里我偷个懒直接复制全部css出来，直接覆盖在前面新建的php文件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) ?>

结语

页面里评论等级铭牌用到的css在下方文章里，我就不添加了，加了底部导航的可以直接忽略此处！

给子比主题博客加个好看底部导航【更新】 - 猫叔栈
给子比主题博客加个好看底部导航【更新】 - 猫叔栈
私密：给子比主题博客加个好看底部导航【更新】
5个月前
04512

© 版权声明
版权声明
本站网络名称： 猫叔栈
本站永久网址： https://www.ffsir.com/
网站侵权说明： 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长删除处理。
1 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
2 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
3 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
THE END
技术教程
# Wordpress# wp美化# 子比主题# 说明页面# 等级说明# 排行榜单
点赞6 分享
评论 共1条
头像
请认真评论，发表纯数字纯表情做禁言处理！
提交
头像

昵称

取消
昵称

请填写用户信息：

  • 昵称(必填)
  • 邮箱(必填)
表情
[aoman][baiyan][bishi][bizui][cahan][ciya][dabing][daku][deyi][doge][fadai][fanu][fendou][ganga][guzhang][haixiu][hanxiao][zuohengheng][zhuakuang][zhouma][zhemo][zhayanjian][zaijian][yun][youhengheng][yiwen][yinxian][xu][xieyanxiao][xiaoku][xiaojiujie][xia][wunai][wozuimei][weixiao][weiqu][tuosai][tu][touxiao][tiaopi][shui][se][saorao][qiudale][se][qinqin][qiaoda][piezui][penxue][nanguo][liulei][liuhan][lenghan][leiben][kun][kuaikule][ku][koubi][kelian][keai][jingya][jingxi][jingkong][jie][huaixiao][haqian][aini][OK][qiang][quantou][shengli][woshou][gouyin][baoquan][aixin][bangbangtang][xiaoyanger][xigua][hexie][pijiu][lanqiu][juhua][hecai][haobang][caidao][baojin][chi][dan][kulou][shuai][shouqiang][yangtuo][youling]
代码

请输入代码：

确认
图片