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

演示截图

详细教程

定位：/wp-content/themes/zibll/inc/functions/zib-single.php文件，找到 function zib_single() 函数，替换为以下代码。

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样式插入。

.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);
}

记得关闭：子比主题–>>文章页面–>>作者信息板块，要不然不美观。