子比主题 – 文章详情页带Tab切换美化

飞流 · 发表于 2025-10-10 16:22:35

资源无需等待，交易就趁现在，全面资源整合网络大咖云集，让你轻松玩转互联网！

您需要登录才可以下载或查看，没有账号？立即注册

×

今天给大家分享一款自用的子比主题文章详情页，很早之前就想发出来，因为没有适配，看很多人需要所以我抓紧适配了一下，话不多说直接开始，喜欢的自行部署！

白天

黑夜

代码部署

一共两个代码，一个是PHP代码，一个是CSS代码，PHP代码里面我已经引入了CSS文件，你可以引入文件也可以放到：子比主题–>>自定义CSS样式即可！
记得关闭：子比主题–>>文章页面–>>作者信息板块，要不然不美观

PHP代码

定位：/wp-content/themes/zibll/inc/functions/zib-single.php文件，我们找到下面的函数，如下图
tengfei_down - 2025-10-10T162121.069.webp

然后我们将一整块替换我下面的代码，直接替换我修改过的代码

function zib_single() {
zib_single_header();
do_action('zib_single_before');
wp_enqueue_style('tengfei-single-top-style', '/wp-content/themes/ZibTF/css/tengfei/single_top.css', array(), '1.0.0');
echo '<article class="article main-bg theme-box box-body radius8 main-shadow">';
echo '
<div class="tabs">
<div class="tab active" data-target="#postsposcontent"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-view"></use></svg> 详情</div>
<div class="tab" data-target="#commentscontent"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-comment"></use></svg> 评论</div>
<div class="tab" data-target="#accordionhelpcontent"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-like"></use></svg> 问答</div>
</div>';
echo '<div id="postsposcontent" style="display: block;">';
zib_single_box_header();
zib_single_box_content();
echo '</div>';
echo '<div id="commentscontent" style="display: none;">';
if (_pz('post_authordesc_s') && !is_single()) {
$args = array(
'user_id' => get_the_author_meta('ID'),
'show_button' => false,
'show_img_bg' => false,
'class' => 'author',
);
zib_get_user_card_box($args, true);
}
echo '</div>';
echo '
<div id="accordionhelpcontent" class="tab2_content" style="display: none;">
<div class="wp-block-zibllblock-collapse">';
$faq_list = [
'如何下载资源？' => '您可以通过搜索或浏览分类列表来寻觅您期望下载的资源。随后，点击资源介绍页右侧的下载链接按钮，依据提示信息进行操作即可。',
'是否需要充值才能下载？' => '大部分资源可积分免费下载，部分资源须付费才能下载。',
'下载的资源是否有版权？' => '本网站提供的下载资源均为网络搜集，仅供个人学习和交流使用。对于版权问题，请用户自行判断并承担相应责任。',
];
$i = 1;
foreach ($faq_list as $title => $content) {
echo '<div class="panel" data-theme="panel" data-isshow="true">
<div class="panel-heading collapsed" href="#collapse_'.$i.'" data-toggle="collapse" aria-expanded="false">
<i class="fa fa-plus"></i>
<strong class="biaoti">'.$title.'</strong>
</div>
<div class="collapse" id="collapse_'.$i.'">
<div class="panel-body">
<p>'.$content.'</p>
</div>
</div>
</div>';
$i++;
}
echo '</div></div>';
echo '
<script>
document.addEventListener("DOMContentLoaded", function () {
document.querySelectorAll(".tab").forEach(tab => {
tab.addEventListener("click", function () {
document.querySelectorAll(".tab").forEach(t => t.classList.remove("active"));
document.querySelectorAll("#postsposcontent, #commentscontent, #accordionhelpcontent").forEach(c => c.style.display = "none");
this.classList.add("active");
document.querySelector(this.dataset.target).style.display = "block";
});
});
document.querySelectorAll(".panel-heading").forEach(panel => {
panel.addEventListener("click", function () {
let targetId = panel.getAttribute("href");
let target = document.querySelector(targetId);
if (!target) return;
let icon = panel.querySelector(".fa");
let isCollapsed = target.classList.contains("in");
document.querySelectorAll(".collapse").forEach(c => {
c.classList.remove("in");
c.previousElementSibling.classList.add("collapsed");
c.previousElementSibling.querySelector(".fa").style.transform = "rotate(-45deg)";
});
if (!isCollapsed) {
target.classList.add("in");
panel.classList.remove("collapsed");
icon.style.transform = "rotate(0deg)";
}
});
});
});
</script>';
echo '</article>';
do_action('zib_single_after');
}

复制代码

CSS代码

CSS这里就不多说，我PHP代码里面有一个引入文件的，你可以引入文件，如果不会引入直接无脑丢到子比主题：子比主题–>>自定义CSS样式即可！

.panel-heading .fa{transition:transform 0.3s ease;transform:rotate(-45deg);padding:5px;color:#556af1;}.panel-heading:not(.collapsed) .fa{transform:rotate(0deg);}.question-container{border-radius:6px;border:solid 1px var(--main-border-color);overflow:hidden;border-bottom:solid 0px rgba(50,50,50,0);}.question{cursor:pointer;position:relative;margin-bottom:10px;padding:2.5rem 4rem;margin-bottom:0;border-bottom:solid 1px var(--main-border-color);}.question i{position:absolute;right:0;top:50%;transform:translateY(-50%);}.question.active i.fa.fa-plus{display:none;}.question.active i.fa.fa-minus{display:inline-block;}.answer.active{display:unset;background-color:var(--focus-color);flex:1 1 auto;min-height:1px;color:#fff !important;padding:2.5rem 4.5rem;display:block;}@keyframes bounce{0%{transform:scaleY(0.3);background-color:green;}50%{transform:scaleY(1);background-color:orange;}100%{transform:scaleY(0.3);background-color:green;};}.tab2_content.active{display:block;}.tab2_content.active{display:block;}#accordionhelp-content{margin-bottom:20px;}.tab-container{width:80%;margin:auto;}.tabs{display:flex;cursor:pointer;padding:20px 0;}.tab{padding:10px 15px;transition:background-color 0.3s;border-radius:10px;background:var(--muted-bg-color);margin:0px 5px;font-size:14px;}.tab.active{color:#fff;background-color:#556af1;transform:scale(1.05);box-shadow:0 6px 12px rgba(0,0,0,0.3);transition:all 0.3s ease;}.tab-content{position:relative;overflow:hidden;}.tab2_content{display:none;}.button{display:inline-block;padding:10px 20px;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;cursor:pointer;border:none;border-radius:5px;background-color:#556af1;color:#fff;box-shadow:0 4px 8px rgba(0,0,0,0.2);transition:all 0.3s ease;}.button:hover{background-color:#3e53c4;box-shadow:0 6px 12px rgba(0,0,0,0.3);}

复制代码

	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	10-30 17:02
	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	10-09 09:07
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	09-24 09:00
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	09-11 11:40
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	09-02 09:17
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	08-27 08:56
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	08-20 15:12
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	08-03 10:22
	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	06-30 08:57
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	06-18 09:14
	系统消息：清风网络已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	04-11 09:40
	系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-10 09:31
	系统消息：IXM77777已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-09 13:44
	系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-09 09:22
	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	04-09 08:52
	系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-08 09:24
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-07 09:02
	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	02-27 09:35
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	02-26 09:06
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	02-25 08:49

[代码技巧] 子比主题 – 文章详情页带Tab切换美化

资源无需等待，交易就趁现在，全面资源整合网络大咖云集，让你轻松玩转互联网！

代码部署

本帖被以下淘专辑推荐:

相关帖子

飞流广播+ 发布

会员LV.1

会员LV.2

会员LV.3

会员LV.4

会员LV.5

会员LV.6

会员LV.7

会员LV.8

会员LV.9

会员LV.10

关于我们

常用功能

服务引导

fl@fllt.cn