文章
文章用户赖铺文档快讯圈子网址导航
当前位置：首页>WordPress专区>WordPress美化>zibll主题美化>子比主题美化 – 首页排名榜样式美化[最新优化版]

子比主题美化 – 首页排名榜样式美化[最新优化版]

感觉这个排名榜挺好看的，所以就扒过来了，感谢MAC站长允许，我扒过来就是给大家分享的，这个排名榜非常的不错，我改了一下图标，加了几个图标，我感觉好看点，所以给大家分享一下吧

演示

子比主题美化 – 首页排名榜样式美化[最新优化版]

我这次我给这个搞了两个样式，第一个就是很多人喜欢就是手机显示嘛，然后我就放出来一个手机显示的，然后写一个手机不显示的教程，话不多说直接开始

首先我们要知道这个排名榜一共是三个文件代码，HTML、CSS和图片，话不多说直接开始：

将HTML代码放到自己的主题或子主题index.php里面 我目前是放到/wp-content/themes/zibll/index.php里面搜下面的代码，然后放到他下面，然后进行CSS

<?php get_sidebar(); ?>

也可以HTML代码放在 zibll/index.php 里面的底部 get_footer(); 之前HTML代码放在 zibll/index.php 里面的底部 get_footer(); 之前

有一句话我一定要说的，那些搬运的别太恶心人，买过的如果搬运请留版权谢谢支持，下面是手机不显示和手机显示，我都适配了，自己看着玩吧

首先看下图，第一个是分类ID，第二个是在首页出现几个

子比主题美化 – 首页排名榜样式美化[最新优化版]

手机不限制代码HTML

<!--排名榜开始-->
  <div class="wapnone">
        <div id="syphb" class="container list clearfix">
      <div class="ranking-item">
        <a   class="top-icon js-rank-bottom1">建站资源</a>
        <div class="class-box">
              <?php query_posts('cat=4&showposts=5&orderby=views'); ?>
<?php while (have_posts()) : the_post(); ?>
            <a class="class-item js-rank" href="<?php esc_url(the_permalink()); ?>" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  target="_blank">
             <div class="num-icon num-icon<?php   
                   ++$phnum1;
                       echo $phnum1; 
                    ?>"></div> 

                      <span class="syphimg" >  <?php echo zib_post_thumbnail(); ?></span>
             <div class="class-info">
            <div class="name"><?php the_title(); ?></div>
            <span class="badg b-theme badg-sm" style="margin-left: 5px;"><?php echo get_post_view_count('', ''); ?>热度值</span>
            <span class="badg b-green badg-sm" style="margin-left: 5px;"><?php echo get_post_comment_count($before = '评论[', $after = ']', $post_id = 0); ?></span>
            <span class="badg b-yellow badg-sm" style="margin-left: 5px;"><?php echo get_post_favorite_count($before = '收藏[', $after = ']', $post_id = 0); ?></span>
            
             </div>
          </a>
        <?php endwhile;?> 
          </div>
        <a class="bottom-link js-rank-bottom" target="_blank" data-tab="随机榜" data-title="查看完整榜单" href="/tops" rel="noopener nofollow ugc">
          <span>查看完整榜单</span>
          <i class="imv2-chevrons-right"></i>
        </a>
      </div>
      
      
        <div class="ranking-item">
        <a class="top-icon js-rank-bottom2" >子比美化</a>
        <div class="class-box">
            
              <?php query_posts('cat=3&showposts=5&orderby=views'); ?>
<?php while (have_posts()) : the_post(); ?>
            <a class="class-item js-rank" href="<?php esc_url(the_permalink()); ?>" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  target="_blank">
             <div class="num-icon num-icon<?php   
                   ++$phnum2;
                       echo $phnum2; 
                    ?>"></div> 

                        <span class="syphimg" >  <?php echo zib_post_thumbnail(); ?></span>
             <div class="class-info">
            <div class="name"><?php the_title(); ?></div>
            <span class="badg b-theme badg-sm" style="margin-left: 5px;"><?php echo get_post_view_count('', ''); ?>热度值</span>
            <span class="badg b-green badg-sm" style="margin-left: 5px;"><?php echo get_post_comment_count($before = '评论[', $after = ']', $post_id = 0); ?></span>
            <span class="badg b-yellow badg-sm" style="margin-left: 5px;"><?php echo get_post_favorite_count($before = '收藏[', $after = ']', $post_id = 0); ?></span>
            
             </div>
          </a>
          
        <?php endwhile;?> 
        </div>
        <a class="bottom-link js-rank-bottom" target="_blank" data-tab="随机榜" data-title="查看完整榜单" href="/tops" rel="noopener nofollow ugc">
          <span>查看完整榜单</span>
          <i class="imv2-chevrons-right"></i>
        </a>
      </div>
        <div class="ranking-item">
        <a   class="top-icon js-rank-bottom3" >软件基地</a>
        <div class="class-box">
              <?php query_posts('cat=5&showposts=5&orderby=views'); ?>
<?php while (have_posts()) : the_post(); ?>
    <a class="class-item js-rank" href="<?php esc_url(the_permalink()); ?>" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  target="_blank">
             <div class="num-icon num-icon<?php   
                   ++$phnum3;
                       echo $phnum3; 
                    ?>"></div> 
              <span class="syphimg" >  <?php echo zib_post_thumbnail(); ?></span>
             <div class="class-info">
            <div class="name"><?php the_title(); ?></div>
            <span class="badg b-theme badg-sm" style="margin-left: 5px;"><?php echo get_post_view_count('', ''); ?>热度值</span>
            <span class="badg b-green badg-sm" style="margin-left: 5px;"><?php echo get_post_comment_count($before = '评论[', $after = ']', $post_id = 0); ?></span>
            <span class="badg b-yellow badg-sm" style="margin-left: 5px;"><?php echo get_post_favorite_count($before = '收藏[', $after = ']', $post_id = 0); ?></span>
             </div>
          </a>
        <?php endwhile;?> 
        </div>
        <a class="bottom-link js-rank-bottom" target="_blank" data-tab="随机榜" data-title="查看完整榜单" href="/tops" rel="noopener nofollow ugc">
          <span>查看完整榜单</span>
          <i class="imv2-chevrons-right"></i>
        </a>
      </div>
    </div>
  </div>
    <!--排行榜结束-->

CSS代码放到后台主题自定义内

/*************************** 首页排行榜列表baicaima.com******************/

@media screen and (max-width: 1221px) { .wapnone{display:none; }
}
.syphimg{
    width: 90px;
    height:60px;
    
    margin-right: 5px;
}
.syphimg img{
       border-radius: 8px;
    
}
.list.clearfix {
  display: flex;
  justify-content: space-between;
    flex-wrap: wrap;
}

.ranking-item {
    margin:0 auto;
  position: relative;
  width: calc(33.333% - 10px );
  /* height: 400px; */
  /* margin-right: 10px; */
  /* margin-left: 10px; */
  background:var(--main-bg-color);
  /* box-shadow: 0 2px 6px 0 rgb(55 55 55 / 7%); */
  /* border-radius: 8px; */
  box-shadow: 0 0 10px var(--main-shadow);
  border-radius: var(--main-radius);
  margin-bottom: 20px;
}

a.top-icon.js-rank-bottom1 {
  display: block;
  width: 129px;
  height: 43px;
  line-height: 32px;
  position: absolute;
  left: 150px;
  top: -7px;
  background: url(/pic/ranking1.png) no-repeat center/100%;
  font-size: 18px;
  color: #fff;
  font-weight: 600;
  text-align: center;
}

a.top-icon.js-rank-bottom2 {
  display: block;
  width: 129px;
  height: 43px;
  line-height: 32px;
  position: absolute;
  left: 150px;
  top: -7px;
  background: url(/pic/ranking2.png) no-repeat center/100%;
  font-size: 18px;
  color: #fff;
  font-weight: 600;
  text-align: center;
}

a.top-icon.js-rank-bottom3 {
  display: block;
  width: 129px;
  height: 43px;
  line-height: 32px;
  position: absolute;
  left: 150px;
  top: -7px;
  background: url(/pic/ranking3.png) no-repeat center/100%;
  font-size: 18px;
  color: #fff;
  font-weight: 600;
  text-align: center;
}
.class-box {
  margin-top: 60px;
}

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(/pic/top1.png) no-repeat center/100%;
  margin: 0 12px 0 15px;
}

img.class-pic {
  width: 90px;
  border-radius: 8px;
  margin-right: 5px;
}

.class-info {
  width: 190px;
  font-size: 12px;
}

.name {
  color: var(--key-color);
  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;
}

.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, #4063ffa3 0, #409eff 100%);
  border-radius: 12px;
  margin-bottom: 20px;
}
/*********************** 首页排行榜列表结束baicaima.com **********************/

第二种手机显示HTML版

<!--排名榜开始-->
        <div id="syphb" class="container list clearfix">
      <div class="ranking-item">
        <a   class="top-icon js-rank-bottom1">建站资源</a>
        <div class="class-box">
              <?php query_posts('cat=4&showposts=5&orderby=views'); ?>
<?php while (have_posts()) : the_post(); ?>
            <a class="class-item js-rank" href="<?php esc_url(the_permalink()); ?>" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  target="_blank">
             <div class="num-icon num-icon<?php   
                   ++$phnum1;
                       echo $phnum1; 
                    ?>"></div> 

                      <span class="syphimg" >  <?php echo zib_post_thumbnail(); ?></span>
             <div class="class-info">
            <div class="name"><?php the_title(); ?></div>
            <span class="badg b-theme badg-sm" style="margin-left: 5px;"><?php echo get_post_view_count('', ''); ?>热度值</span>
            <span class="badg b-green badg-sm" style="margin-left: 5px;"><?php echo get_post_comment_count($before = '评论[', $after = ']', $post_id = 0); ?></span>
            <span class="badg b-yellow badg-sm" style="margin-left: 5px;"><?php echo get_post_favorite_count($before = '收藏[', $after = ']', $post_id = 0); ?></span>
            
             </div>
          </a>
        <?php endwhile;?> 
          </div>
        <a class="bottom-link js-rank-bottom" target="_blank" data-tab="随机榜" data-title="查看完整榜单" href="/tops" rel="noopener nofollow ugc">
          <span>查看完整榜单</span>
          <i class="imv2-chevrons-right"></i>
        </a>
      </div>
      
      
        <div class="ranking-item">
        <a class="top-icon js-rank-bottom2" >子比美化</a>
        <div class="class-box">
            
              <?php query_posts('cat=3&showposts=5&orderby=views'); ?>
<?php while (have_posts()) : the_post(); ?>
            <a class="class-item js-rank" href="<?php esc_url(the_permalink()); ?>" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  target="_blank">
             <div class="num-icon num-icon<?php   
                   ++$phnum2;
                       echo $phnum2; 
                    ?>"></div> 

                        <span class="syphimg" >  <?php echo zib_post_thumbnail(); ?></span>
             <div class="class-info">
            <div class="name"><?php the_title(); ?></div>
            <span class="badg b-theme badg-sm" style="margin-left: 5px;"><?php echo get_post_view_count('', ''); ?>热度值</span>
            <span class="badg b-green badg-sm" style="margin-left: 5px;"><?php echo get_post_comment_count($before = '评论[', $after = ']', $post_id = 0); ?></span>
            <span class="badg b-yellow badg-sm" style="margin-left: 5px;"><?php echo get_post_favorite_count($before = '收藏[', $after = ']', $post_id = 0); ?></span>
            
             </div>
          </a>
          
        <?php endwhile;?> 
        </div>
        <a class="bottom-link js-rank-bottom" target="_blank" data-tab="随机榜" data-title="查看完整榜单" href="/tops" rel="noopener nofollow ugc">
          <span>查看完整榜单</span>
          <i class="imv2-chevrons-right"></i>
        </a>
      </div>
        <div class="ranking-item">
        <a   class="top-icon js-rank-bottom3" >软件基地</a>
        <div class="class-box">
              <?php query_posts('cat=5&showposts=5&orderby=views'); ?>
<?php while (have_posts()) : the_post(); ?>
    <a class="class-item js-rank" href="<?php esc_url(the_permalink()); ?>" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  target="_blank">
             <div class="num-icon num-icon<?php   
                   ++$phnum3;
                       echo $phnum3; 
                    ?>"></div> 
              <span class="syphimg" >  <?php echo zib_post_thumbnail(); ?></span>
             <div class="class-info">
            <div class="name"><?php the_title(); ?></div>
            <span class="badg b-theme badg-sm" style="margin-left: 5px;"><?php echo get_post_view_count('', ''); ?>热度值</span>
            <span class="badg b-green badg-sm" style="margin-left: 5px;"><?php echo get_post_comment_count($before = '评论[', $after = ']', $post_id = 0); ?></span>
            <span class="badg b-yellow badg-sm" style="margin-left: 5px;"><?php echo get_post_favorite_count($before = '收藏[', $after = ']', $post_id = 0); ?></span>
             </div>
          </a>
        <?php endwhile;?> 
        </div>
        <a class="bottom-link js-rank-bottom" target="_blank" data-tab="随机榜" data-title="查看完整榜单" href="/tops" rel="noopener nofollow ugc">
          <span>查看完整榜单</span>
          <i class="imv2-chevrons-right"></i>
        </a>
      </div>
    </div>
    <!--排行榜结束-->

CSS代码放到后台主题自定义内

/** 首页排行榜列表 **/
.syphimg{
    width: 90px;
    height:60px;
    
    margin-right: 5px;
}
.syphimg img{
       border-radius: 8px;
    
}
.list.clearfix {
  display: flex;
  justify-content: space-between;
    flex-wrap: wrap;
}

.ranking-item {
    margin:0 auto;
  position: relative;
  width: calc(33.333% - 10px );
  /* height: 400px; */
  /* margin-right: 10px; */
  /* margin-left: 10px; */
  background:var(--main-bg-color);
  /* box-shadow: 0 2px 6px 0 rgb(55 55 55 / 7%); */
  /* border-radius: 8px; */
  box-shadow: 0 0 10px var(--main-shadow);
  border-radius: var(--main-radius);
  margin-bottom: 20px;
}

a.top-icon.js-rank-bottom1 {
  display: block;
  width: 129px;
  height: 43px;
  line-height: 32px;
  position: absolute;
  left: 112px;
  top: -7px;
  background: url(/pic/ranking1.png) no-repeat center/100%;
  font-size: 18px;
  color: #fff;
  font-weight: 600;
  text-align: center;
}

a.top-icon.js-rank-bottom2 {
  display: block;
  width: 129px;
  height: 43px;
  line-height: 32px;
  position: absolute;
  left: 112px;
  top: -7px;
  background: url(/pic/ranking2.png) no-repeat center/100%;
  font-size: 18px;
  color: #fff;
  font-weight: 600;
  text-align: center;
}

a.top-icon.js-rank-bottom3 {
  display: block;
  width: 129px;
  height: 43px;
  line-height: 32px;
  position: absolute;
  left: 112px;
  top: -7px;
  background: url(/pic/ranking3.png) no-repeat center/100%;
  font-size: 18px;
  color: #fff;
  font-weight: 600;
  text-align: center;
}
.class-box {
  margin-top: 60px;
}

a.class-item.js-rank {
  display: block;
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.num-icon.num-icon1 {
  width: 40px;
  height: 22px;
  background: url(/pic/top1.png) no-repeat center/100%;
  margin: 0 12px 0 15px;
}

img.class-pic {
  width: 90px;
  border-radius: 8px;
  margin-right: 5px;
}

.class-info {
  width: 190px;
  font-size: 12px;
}

.name {
  color: var(--key-color);
  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;
}

.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: 40px;
  height: 22px;
}

.num-icon.num-icon3 {
  background: url(/pic/top3.png) no-repeat center/100%;
  margin: 0 12px 0 15px;
  width: 40px;
  height: 22px;
}

.num-icon.num-icon4 {
  background: url(/pic/top4.png) no-repeat center/100%;
  margin: 0 12px 0 15px;
  width: 40px;
  height: 22px;
}

.num-icon.num-icon5 {
  background: url(/pic/top5.png) no-repeat center/100%;
  margin: 0 12px 0 15px;
  width: 40px;
  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, #4063ffa3 0, #409eff 100%);
  border-radius: 12px;
  margin-bottom: 20px;
}

下载权限
查看
  • ￥
    免费下载
    评论并刷新后下载
    登录后下载
查看演示
  • {{attr.name}}：
您当前的等级为
登录后免费下载登录 小黑屋反思中，不准下载！ 评论后刷新页面下载评论 支付以后下载 请先登录 您今天的下载次数（次）用完了，请明天再来 支付积分以后下载立即支付 支付以后下载立即支付 您当前的用户组不允许下载升级会员
您已获得下载权限 您可以每天下载资源次，今日剩余次
免责声明 1：本站的课程与素材，都是电子版课件，非实物光盘，课件由百度网盘发送.（百度网盘下载教程）2：本站所有涉及视频及素材，软件等由互联网搜索收集而来，本站不拥有此类资料的版权。3：本站所有视频，素材及软件不加密、不限时、可永久观看或使用！禁止二次销售，否则因此引起的一切问题与本站无关。4：本站所有的资源均为免费提供，提供资料的目的是让大家学习和交流，所收取的相关费用非资料销售费用，而是资料收集整理手工费。5：无意侵害您的权益，请发送邮件至 590173@qq.com 或点击左侧 私信：站长反馈，我们将尽快处理。

给TA打赏
共{{data.count}}人
人已打赏
zibll美化子主题子比美化首页排名
zibll主题美化

子比主题 – 文章封面角标美化（可单独设置）

2024-6-15 4:38:07

zibll主题美化

子比主题给文章标题文字添加彩色渐变效果

2024-6-15 12:58:24

18 条回复 A文章作者 M管理员
  1. 壁虎

    谢谢

  2. 浅吟清歌

    谢谢

  3. wdw

    谢谢

  4. 娃娃

    拜读了，是的

  5. 辻弎

    谢谢

  6. 娃娃694

    拜读了，很好

  7. 鹰瞳爆料

    谢谢

  8. 鹰瞳爆料

    谢谢009

  9. user700

    qq

  11. bushiba

    站长大大,能不能出一期推广返佣的排行榜美化丫~

  12. Stubborn

    谢谢

  13. 柳枫

    看看

  14. Stubborn

    66

  15. 🐭Mars

    谢谢

  16. 张

    不错，挺好看，学习了

  17. A橘猫

    谢谢

  18. 学会成熟

    哈哈哈哈

❯

解锁会员权限

开通会员

解锁海量优质VIP资源

立刻开通
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索

  • 扫码打开当前页

返回顶部