前言
热门标签页面其实很早以前就想做了，但是没有正式学过前端相关的语言，自己写也写不出来，再加自己工作的原因一直没有时刻去网上材料，所以就把这件事放到了脑后。昨日休息了一天，终于把有时间把网站升了一下级，顺便把热门标签这个页面给弄了一下。自己写不出来，所以热门标签页面的款式学习了B2主题的标签聚合页款式进行了一些修改，尽量的适应子比主题，所以昨日一晚上都在弄热门标签页面适配手机端的问题。但还是有一些小小小的不足，熟悉前端的大佬提一下修改的建议在评论区。
演示图
教程
1、进入子比主题目录—>pages这个目录下创建PHP文件，然后把下面的代码添加进去。
<?php/*** Template name: LIZLL-热门标签页面* Description: LIZLL - 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><?phpget_footer();<?php /** * Template name: LIZLL-热门标签页面 * Description: LIZLL - 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();<?php /** * Template name: LIZLL-热门标签页面 * Description: LIZLL - 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();
2、把上面的代码添加进行保存后，进入到后台—>页面—>新建页面—->选择热门标签页面即可使用
© 版权声明
THE END
暂无评论内容