子比主题添加热门标签页面[子比主题教程]

19312
I can accept failure but I can’t accept not trying.
可以接受暂时的失败，但绝对不能接受未曾奋斗过的自己

【活动】：会员128元永久会员早开早划算!

子比主题添加热门标签页面[子比主题教程]

子比主题添加热门标签页面[子比主题教程]

热门标签页面其实很早以前就想做了，但是没有正式学过前端相关的语言，自己写也写不出来，再加自己学业的原因一直没有时间去网上资料，所以就把这件事放到了脑后。昨天考完了试，终于把有时间把网站升了一下级，顺便把热门标签这个页面给弄了一下。自己写不出来，所以热门标签页面的样式借鉴了B2主题的标签聚合页样式进行了一些修改，尽量的适应子比主题，所以昨天一晚上都在弄热门标签页面适配手机端的问题。但还是有一些小小小的不足，熟悉前端的大佬提一下修改的建议。

废话不多说，O(∩_∩)O哈哈~，下面就分享教程给大家！

食用教程

尝鲜版
<?php
/**
 * Template name: WIIUII-热门标签页面
 * Description:   WIUII - Hot_Tags
 */
// 获取链接列表
get_header();
$header_style = zib_get_page_header_style();
?>
<main class="container">
    <div class="content-wrap">
        <div class="content-layout">
            <?php while (have_posts()) : the_post(); ?>
                <?php if ($header_style != 1) {
                    echo zib_get_page_header();
                } ?>
                <div class="box-body theme-box radius8 main-bg main-shadow">
                    <?php if ($header_style == 1) {
                        echo zib_get_page_header();
                    } ?>
                    <div class="tagslist tags-page wrapper">
                        <ul>
                          <?php 
                            $tags_count = 60;
                            $tagslist = get_tags('orderby=count&order=DESC&number='.$tags_count);
                            foreach($tagslist as $tag) {
                              echo '<li style="list-style-type:none;"><a class="name box b2-radius b2-mg" href="'.get_tag_link($tag).'"><h2>'. $tag->name .'</h2><small></br><p>共'. $tag->count .'篇文章</p></a></li>';} 
                          ?>
                        </ul>
                    </div>
                    <?php wp_link_pages('link_before=<span>&link_after=</span>&before=<div class="article-paging">&after=</div>&next_or_number=number'); ?>
                <?php endwhile;  ?>
                </div>
                <?php comments_template('/template/comments.php', true); ?>
        </div>
    </div>
    <?php get_sidebar(); ?>
<!--CSS样式-->
  <style type="text/css">
 body{padding: 0px; margin: 0px;} *, *::before, *::after{box-sizing: border-box;} a, abbr, acronym, address, applet, big, blockquote, body, caption, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, figure, font, form, h1, h2, h4, h5, h6, html, iframe, ins, kbd, label, legend, li, object, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, ul, var{border: 0; font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline; box-sizing: border-box;} a{cursor: pointer;} a{color: inherit; text-decoration: none; vertical-align: top;} ol, ul{list-style: none;}.wrapper{width: 1142px; max-width: 100%; margin: 0 auto; padding: 0;} .b2-mg{margin: 16px;} .b2-radius{border-radius: 5px;} .box,.side-fixed{background-color: #fff;-webkit-transition: all .2s cubic-bezier(.455,.03,.515,.955); -webkit-box-shadow: 0 0 22px -12px rgba(0,36,100,.3);-moz-box-shadow:0 0 22px -12px rgba(0,36,100,.3);box-shadow: 0 0 22px -12px rgba(0,36,100,.3)box-shadow: 0 0 0 1px #ebebed;box-shadow: 0 1px 3px rgba(26,26,26,.1);box-shadow: 0px 5px 40px -1px rgba(2, 10, 18, 0.1);}/*标签页面*/.tags-page ul{display: flex; flex-flow: wrap;}.tags-page ul li{width: 16.66667%;}.tags-page ul li a{display: block; padding: 20px 10px; text-align: center; border-radius: 10px;}.tags-page ul li a{background-color: #FF6666; border: 2px solid rgba(255, 255, 255, 0);}.tags-page ul li a:hover{box-shadow: 0 3px 10px #ccc; border: 2px solid #fff;}.tags-page ul li:nth-child(7n + 2) a{background-color: #FF9900;}.tags-page ul li:nth-child(7n + 3) a{background-color: #339966;}.tags-page ul li:nth-child(7n + 4) a{background-color: #339999;}.tags-page ul li:nth-child(7n + 5) a{background-color: #6699CC;}.tags-page ul li:nth-child(7n + 6) a{background-color: #8f82bc;}.tags-page ul li:nth-child(7n + 7) a{background-color: #FF99CC;}.tags-page ul li h2{display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; height: 25px; overflow: hidden; margin-bottom: -20px; font-weight: 800; font-size: 17px; color: #fff;}.tags-page ul li p{font-size: 12px; color: rgba(255, 255, 255, 0.63);}.tags-page h1{font-size: 28px; text-align: center; margin: 30px 0;}@media screen and (max-width: 768px){.tags-page ul li{width: 50%;} .tags-page h1{margin: 20px 0;} .tags-page ul li a{padding: 10px 5px;}}
  </style>
</main>
<?php
get_footer();
generic
3.98 KB
© 紫禁源码资源站
尝鲜版
<?php
/**
 * Template name: WIIUII-热门标签页面
 * Description:   WIUII - Hot_Tags
 */
// 获取链接列表
get_header();
$header_style = zib_get_page_header_style();
?>
<main class="container">
    <div class="content-wrap">
        <div class="content-layout">
            <?php while (have_posts()) : the_post(); ?>
                <?php if ($header_style != 1) {
                    echo zib_get_page_header();
                } ?>
                <div class="box-body theme-box radius8 main-bg main-shadow">
                    <?php if ($header_style == 1) {
                        echo zib_get_page_header();
                    } ?>
                    <div class="tagslist tags-page wrapper">
                        <ul>
                          <?php 
                            $tags_count = 60;
                            $tagslist = get_tags('orderby=count&order=DESC&number='.$tags_count);
                            foreach($tagslist as $tag) {
                              echo '<li style="list-style-type:none;"><a class="name box b2-radius b2-mg" href="'.get_tag_link($tag).'"><h2>'. $tag->name .'</h2><small></br><p>共'. $tag->count .'篇文章</p></a></li>';} 
                          ?>
                        </ul>
                    </div>
                    <?php wp_link_pages('link_before=<span>&link_after=</span>&before=<div class="article-paging">&after=</div>&next_or_number=number'); ?>
                <?php endwhile;  ?>
                </div>
                <?php comments_template('/template/comments.php', true); ?>
        </div>
    </div>
    <?php get_sidebar(); ?>
<!--CSS样式-->
  <style type="text/css">
 body{padding: 0px; margin: 0px;} *, *::before, *::after{box-sizing: border-box;} a, abbr, acronym, address, applet, big, blockquote, body, caption, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, figure, font, form, h1, h2, h4, h5, h6, html, iframe, ins, kbd, label, legend, li, object, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, ul, var{border: 0; font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline; box-sizing: border-box;} a{cursor: pointer;} a{color: inherit; text-decoration: none; vertical-align: top;} ol, ul{list-style: none;}.wrapper{width: 1142px; max-width: 100%; margin: 0 auto; padding: 0;} .b2-mg{margin: 16px;} .b2-radius{border-radius: 5px;} .box,.side-fixed{background-color: #fff;-webkit-transition: all .2s cubic-bezier(.455,.03,.515,.955); -webkit-box-shadow: 0 0 22px -12px rgba(0,36,100,.3);-moz-box-shadow:0 0 22px -12px rgba(0,36,100,.3);box-shadow: 0 0 22px -12px rgba(0,36,100,.3)box-shadow: 0 0 0 1px #ebebed;box-shadow: 0 1px 3px rgba(26,26,26,.1);box-shadow: 0px 5px 40px -1px rgba(2, 10, 18, 0.1);}/*标签页面*/.tags-page ul{display: flex; flex-flow: wrap;}.tags-page ul li{width: 16.66667%;}.tags-page ul li a{display: block; padding: 20px 10px; text-align: center; border-radius: 10px;}.tags-page ul li a{background-color: #FF6666; border: 2px solid rgba(255, 255, 255, 0);}.tags-page ul li a:hover{box-shadow: 0 3px 10px #ccc; border: 2px solid #fff;}.tags-page ul li:nth-child(7n + 2) a{background-color: #FF9900;}.tags-page ul li:nth-child(7n + 3) a{background-color: #339966;}.tags-page ul li:nth-child(7n + 4) a{background-color: #339999;}.tags-page ul li:nth-child(7n + 5) a{background-color: #6699CC;}.tags-page ul li:nth-child(7n + 6) a{background-color: #8f82bc;}.tags-page ul li:nth-child(7n + 7) a{background-color: #FF99CC;}.tags-page ul li h2{display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; height: 25px; overflow: hidden; margin-bottom: -20px; font-weight: 800; font-size: 17px; color: #fff;}.tags-page ul li p{font-size: 12px; color: rgba(255, 255, 255, 0.63);}.tags-page h1{font-size: 28px; text-align: center; margin: 30px 0;}@media screen and (max-width: 768px){.tags-page ul li{width: 50%;} .tags-page h1{margin: 20px 0;} .tags-page ul li a{padding: 10px 5px;}}
  </style>
</main>
<?php
get_footer();
  • 修改版（最终版）
  • 本站推荐使用的版本，php文件暂时没时间上传，请复制粘贴即可，谢谢。
  • 修改版（最终版）
  • 本站推荐使用的版本，php文件暂时没时间上传，请复制粘贴即可，谢谢。 
    <?php
    /**
     * Template name: WIIUII-热门标签页面
     * Description:   WIUII - Hot_Tags
     */
    // 获取链接列表
    get_header();
    $header_style = zib_get_page_header_style();
    ?>
    <main class="container">
        <div class="content-wrap">
            <div class="content-layout">
                <?php while (have_posts()) : the_post(); ?>
                    <?php if ($header_style != 1) {
                        echo zib_get_page_header();
                    } ?>
                    <div class="box-body theme-box radius8 main-bg main-shadow">
                        <?php if ($header_style == 1) {
                            echo zib_get_page_header();
                        } ?>
                        <div class="tagslist tags-page wrapper">
                            <ul>
                              <?php 
                                $tags_count = 60;
                                $tagslist = get_tags('orderby=count&order=DESC&number='.$tags_count);
                                foreach($tagslist as $tag) {
                                  echo '<li style="list-style-type:none;"><a class="name box b2-radius b2-mg" href="'.get_tag_link($tag).'"><h2>'. $tag->name .'</h2><small></br><p>共'. $tag->count .'篇文章</p></a></li>';} 
                              ?>
                            </ul>
                        </div>
                        <?php wp_link_pages('link_before=<span>&link_after=</span>&before=<div class="article-paging">&after=</div>&next_or_number=number'); ?>
                    <?php endwhile;  ?>
                    </div>
                    <?php comments_template('/template/comments.php', true); ?>
            </div>
        </div>
        <?php get_sidebar(); ?>
    <!--CSS样式-->
      <style type="text/css">
     .wrapper{/*width: 1142px; max-width: 100%;*/ margin: 0 auto; padding: 0;} .b2-mg{margin: 16px;} .b2-radius{border-radius: 5px;} .box,.side-fixed{background-color: #fff;-webkit-transition: all .2s cubic-bezier(.455,.03,.515,.955); -webkit-box-shadow: 0 0 22px -12px rgba(0,36,100,.3);-moz-box-shadow:0 0 22px -12px rgba(0,36,100,.3);box-shadow: 0 0 22px -12px rgba(0,36,100,.3)box-shadow: 0 0 0 1px #ebebed;box-shadow: 0 1px 3px rgba(26,26,26,.1);box-shadow: 0px 5px 40px -1px rgba(2, 10, 18, 0.1);}/*标签页面*/.tags-page ul{display: flex; flex-flow: wrap;}.tags-page ul li{width: 16.66667%;}.tags-page ul li a{display: block; padding: 20px 10px; text-align: center; border-radius: 10px;}.tags-page ul li a{background-color: #FF6666; border: 2px solid rgba(255, 255, 255, 0);}.tags-page ul li a:hover{box-shadow: 0 3px 10px #ccc; border: 2px solid #fff;}.tags-page ul li:nth-child(7n + 2) a{background-color: #FF9900;}.tags-page ul li:nth-child(7n + 3) a{background-color: #339966;}.tags-page ul li:nth-child(7n + 4) a{background-color: #339999;}.tags-page ul li:nth-child(7n + 5) a{background-color: #6699CC;}.tags-page ul li:nth-child(7n + 6) a{background-color: #8f82bc;}.tags-page ul li:nth-child(7n + 7) a{background-color: #FF99CC;}.tags-page ul li h2{display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; height: 25px; overflow: hidden; margin-bottom: -20px; font-weight: 700; font-size: 17px; color: #fff;}.tags-page ul li p{font-size: 12px; color: rgba(255, 255, 255, 0.63);}.tags-page h1{font-size: 28px; text-align: center; margin: 30px 0;}@media screen and (max-width: 768px){.tags-page ul li{width: 50%;} .tags-page h1{margin: 20px 0;} .tags-page ul li a{padding: 10px 5px;}}.b2-radius:not(article){transition: all 0.3s;}.b2-radius:not(article):hover{transform: translateY(-10px);}
      </style>
    </main>
    <?php
    get_footer();
    generic
    3.4 KB
    © 紫禁源码资源站
    <?php

/**
 * Template name: WIIUII-热门标签页面
 * Description:   WIUII - Hot_Tags
 */

// 获取链接列表
get_header();
$header_style = zib_get_page_header_style();
?>
<main class="container">
    <div class="content-wrap">
        <div class="content-layout">
            <?php while (have_posts()) : the_post(); ?>
                <?php if ($header_style != 1) {
                    echo zib_get_page_header();
                } ?>
                <div class="box-body theme-box radius8 main-bg main-shadow">
                    <?php if ($header_style == 1) {
                        echo zib_get_page_header();
                    } ?>
                    <div class="tagslist tags-page wrapper">
                        <ul>
                          <?php 
                            $tags_count = 60;
                            $tagslist = get_tags('orderby=count&order=DESC&number='.$tags_count);
                            foreach($tagslist as $tag) {
                              echo '<li style="list-style-type:none;"><a class="name box b2-radius b2-mg" href="'.get_tag_link($tag).'"><h2>'. $tag->name .'</h2><small></br><p>共'. $tag->count .'篇文章</p></a></li>';} 
                          ?>
                        </ul>
                    </div>
                    <?php wp_link_pages('link_before=<span>&link_after=</span>&before=<div class="article-paging">&after=</div>&next_or_number=number'); ?>
                <?php endwhile;  ?>
                </div>
                <?php comments_template('/template/comments.php', true); ?>
        </div>
    </div>
    <?php get_sidebar(); ?>
<!--CSS样式-->
  <style type="text/css">
 .wrapper{/*width: 1142px; max-width: 100%;*/ margin: 0 auto; padding: 0;} .b2-mg{margin: 16px;} .b2-radius{border-radius: 5px;} .box,.side-fixed{background-color: #fff;-webkit-transition: all .2s cubic-bezier(.455,.03,.515,.955); -webkit-box-shadow: 0 0 22px -12px rgba(0,36,100,.3);-moz-box-shadow:0 0 22px -12px rgba(0,36,100,.3);box-shadow: 0 0 22px -12px rgba(0,36,100,.3)box-shadow: 0 0 0 1px #ebebed;box-shadow: 0 1px 3px rgba(26,26,26,.1);box-shadow: 0px 5px 40px -1px rgba(2, 10, 18, 0.1);}/*标签页面*/.tags-page ul{display: flex; flex-flow: wrap;}.tags-page ul li{width: 16.66667%;}.tags-page ul li a{display: block; padding: 20px 10px; text-align: center; border-radius: 10px;}.tags-page ul li a{background-color: #FF6666; border: 2px solid rgba(255, 255, 255, 0);}.tags-page ul li a:hover{box-shadow: 0 3px 10px #ccc; border: 2px solid #fff;}.tags-page ul li:nth-child(7n + 2) a{background-color: #FF9900;}.tags-page ul li:nth-child(7n + 3) a{background-color: #339966;}.tags-page ul li:nth-child(7n + 4) a{background-color: #339999;}.tags-page ul li:nth-child(7n + 5) a{background-color: #6699CC;}.tags-page ul li:nth-child(7n + 6) a{background-color: #8f82bc;}.tags-page ul li:nth-child(7n + 7) a{background-color: #FF99CC;}.tags-page ul li h2{display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; height: 25px; overflow: hidden; margin-bottom: -20px; font-weight: 700; font-size: 17px; color: #fff;}.tags-page ul li p{font-size: 12px; color: rgba(255, 255, 255, 0.63);}.tags-page h1{font-size: 28px; text-align: center; margin: 30px 0;}@media screen and (max-width: 768px){.tags-page ul li{width: 50%;} .tags-page h1{margin: 20px 0;} .tags-page ul li a{padding: 10px 5px;}}.b2-radius:not(article){transition: all 0.3s;}.b2-radius:not(article):hover{transform: translateY(-10px);}
  </style>
</main>
<?php
get_footer();

     

1、进入子比主题目录—>pages这个目录下创建PHP文件，然后把下面的代码添加进去。

代码作了隐藏，昨天弄了一晚上，饭都没吃上，嘿嘿，评论点赞一下！热门标签页面其实很早以前就想做了，但是没有正式学过前端相关的语言，自己写也写不出来，再加自己学业的原因一直没有时间去网上资料，所以就把这件事放到了脑后。昨天考完了试，终于把有时间把网站升了一下级，顺便把热门标签这个页面给弄了一下。自己写不出来，所以热门标签页面的样式借鉴了B2主题的标签聚合页样式进行了一些修改，尽量的适应子比主题，所以昨天一晚上都在弄热门标签页面适配手机端的问题。但还是有一些小小小的不足，熟悉前端的大佬提一下修改的建议。

废话不多说，O(∩_∩)O哈哈~，下面就分享教程给大家！

食用教程

1、进入子比主题目录—>pages这个目录下创建PHP文件，然后把下面的代码添加进去。

代码作了隐藏，昨天弄了一晚上，饭都没吃上，嘿嘿，评论点赞一下！

效果截图

效果可以点击下方链接进入本站热门标签页面进行查看效果

效果截图

效果可以点击下方链接进入本站热门标签页面进行查看效果子比主题添加热门标签页面[子比主题教程]

子比主题添加热门标签页面[子比主题教程]
------本页已结束，新年特惠限时98元尊贵特权------

感谢您的来访，获取更多精彩文章请收藏本站。

展开阅读全文
Believe you can and you’re halfway there.
相信自己，你也就成功了一半
© 版权声明
文章版权声明 1、本网站名称：紫禁资源网
2、本站永久网址：https://www.51ckp.com
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ271478045进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END
其他源码资源教程
# 主题美化# WP教程# H5
点赞12打赏 分享
Worrying does not empty tomorrow of its troubles, it empties today of its strength.
担忧不会清空明日的烦恼，它只会丧失今日的勇气
紫禁总裁的头像-紫禁源码资源站
相关推荐
评价 共1条

请登录后发表评论

客服问题反馈（24小时内答复）本站提供任何技术支持发布文章投稿赚取分成）链接失效(反馈后只要能找回，包补链接）侵权举报