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

效果图

教程开始

1.找到下面路径中的文件

/wp-content/themes/zibll/inc/functions/zib-single.php

2.找到下面的函数，复制下面代码替换

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

本文隐藏内容 – 登录可见

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>’;

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 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”>

<strong class=”biaoti”>’.$title.‘</strong>

</div>

<p>’.$content.‘</p>

</div>

</div>’;

$i++;

}

echo ‘</div></div>’;

echo ‘

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代码添加进去即可

本文隐藏内容 – 登录可见

.panel-heading .fa{transition:transform 0.3s ease;transform:rotate(-45deg);padding:5px;color:#556af1;}.panel-heading:not(.collapsed) .fa{

Ctrl+D收藏我们

部分内容来自于网络如有不妥联系站长删除！

本站用户发帖仅代表本站用户个人观点，并不代表本站赞同其观点和对其真实性负责。

本站代码模板仅供学习交流使用请勿商业运营,严禁从事违法,侵权等任何非法活动,否则后果自负！

本站收集的资源仅供内部学习研究软件设计思想和原理使用，学习研究后请自觉删除，请勿传播，因未及时删除所造成的任何后果责任自负。

如果用于其他用途，请购买正版支持作者，谢谢！若您认为「CHUANGFUYE.COM」发布的内容若侵犯到您的权益，请联系站长邮箱:554286@qq.com 进行删除处理。
本站资源大多存储在云盘，如发现链接失效，请联系我们，我们会第一时间更新。