温馨提示:本文最后更新于
2023-10-24 12:11:19
,某些文章具有时效性,若有错误或已失效,请在文末留言。众所周知Zibll子比主题是一个非常优秀的WordPress博客主题(本站也正在采用该主题),但目前最新Zibll主题V7.3版本里面没有设计热门标签页面。今天站长分享一种简单实现展示热门标签页面的方法。
操作方法
1、本地创建一个 tags.php 文件,然后把下面的代码添加进去,保存文件。
<?php
/**
* Template name: 热门标签页面
* Description: 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 = 600;
$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、用FTP工具进入Zibll子比主题目录:/wp-content/themes/zibll/pages,将 tags.php 文件上传到pages这个目录,如下图;
3、进入WordPress后台,左侧菜单选择『页面』,新建一个页面,然后在“模板”里选择:热门标签页面,如下图;
标签页面效果
可以进入本站热门标签页面链接进行查看效果:https://www.11zhang.com/tags
下载地址
如果第1步懒得创建添加PHP文件的话,也可以下载站长创建好的PHP文件,然后继续按照第2步进行操作就好了。
●普通下载:https://url57.ctfile.com/d/16898257-57802587-de449d?p=1140,访问密码: 1140
●其它网盘:
✅来源:十一张博客
© 版权声明
●本站部分资源收集整理于互联网,仅供交流和学习使用,请于下载后24小时内删除
●版权归原作者和机构所有,严禁商用,否则产生的一切后果将由您自己承担
●如果您不喜欢本站有您信息的存在,请邮件告知我们予以删除
●版权归原作者和机构所有,严禁商用,否则产生的一切后果将由您自己承担
●如果您不喜欢本站有您信息的存在,请邮件告知我们予以删除
THE END
暂无评论内容