智能摘要

前言：为什么需要阅读进度条与动态目录导航

在内容为王的时代，文章详情页的用户体验直接影响读者留存率。传统的长篇文章缺乏视觉引导，用户容易迷失在大量文字中。通过CSS与JavaScript结合，为子比Zibll主题添加阅读进度条和动态目录导航，可以显著提升可读性。本教程将手把手教你实现这两个功能，代码经过实际测试，兼容最新版子比主题（v8.0+）和主流浏览器。

一张展示最终效果的截图，左侧为文章正文，右侧悬浮着带有高亮当前章节的目录，顶部有蓝色渐变进度条。风格：现代极简，色调以黑白灰为主，点缀蓝色。构图：居中显示文章页面，突出进度条和目录交互。

准备工作

在开始前，确保你已具备以下条件：

子比zibll主题：版本v8.0以上，已正确安装并激活。
WordPress站点：建议使用子主题（child theme）进行自定义，避免更新时丢失修改。
基础CSS/JS知识：了解如何添加自定义CSS和JavaScript到WordPress。
编辑器：推荐使用VS Code或Sublime Text，便于代码高亮。

第一步：创建子主题（可选但推荐）

为了避免主题更新覆盖你的修改，建议创建一个子主题。如果你已经使用子主题，可跳过此步。

在WordPress后台，找到外观 > 主题文件编辑器，或通过FTP访问 /wp-content/themes/ 目录。
新建文件夹，命名为 zibll-child。

在文件夹内创建 style.css 文件，内容如下：

/*
Theme Name: Zibll Child
Template: zibll
*/

创建 functions.php 文件，内容如下：

<?php
add_action( 'wp_enqueue_scripts', 'zibll_child_enqueue_styles' );
function zibll_child_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

在WordPress后台，外观 > 主题 中启用 Zibll Child 主题。

第二步：添加阅读进度条（顶部固定）

阅读进度条固定在页面顶部，随滚动填充，给用户直观的阅读进度反馈。

2.1 HTML结构

在子主题的 functions.php 中添加钩子，将进度条容器注入到页面头部：

<?php
add_action( 'wp_body_open', 'add_reading_progress_bar' );
function add_reading_progress_bar() {
    if ( is_single() ) { // 仅在文章页显示
        echo '<div id="reading-progress-bar"></div>';
    }
}

如果你无法使用 wp_body_open，也可以将代码直接粘贴到子比主题的 header.php 中，放在 <body> 标签之后。

2.2 CSS样式

在子主题的 style.css 中添加：

/* 阅读进度条 */
#reading-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 4px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    z-index: 9999;
    transition: width 0.1s ease-out;
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.4);
}

你可以根据网站配色调整渐变颜色和高度。

2.3 JavaScript逻辑

在子主题的 functions.php 中添加脚本排队：

<?php
add_action( 'wp_footer', 'reading_progress_script' );
function reading_progress_script() {
    if ( is_single() ) { ?>
    <script>
    (function() {
        const progressBar = document.getElementById('reading-progress-bar');
        if (!progressBar) return;
        
        window.addEventListener('scroll', function() {
            const scrollTop = window.scrollY;
            const docHeight = document.documentElement.scrollHeight - window.innerHeight;
            const scrollPercent = (scrollTop / docHeight) * 100;
            progressBar.style.width = scrollPercent + '%';
        });
    })();
    </script>
    <?php }
}

第三步：添加动态目录导航（侧边悬浮）

动态目录导航会提取文章中的 <h2> 和 <h3> 标题，生成可点击的目录，并高亮当前阅读的章节。

3.1 生成目录HTML

在 functions.php 中添加一个函数，在文章内容前注入目录容器：

<?php
add_filter( 'the_content', 'add_dynamic_toc' );
function add_dynamic_toc( $content ) {
    if ( !is_single() ) return $content;
    
    $toc_html = '<div id="article-toc">
        <h4 class="toc-title">📖 目录</h4>
        <ul class="toc-list"></ul>
    </div>';
    
    return $toc_html . $content;
}

3.2 CSS美化

在 style.css 中添加：

/* 目录导航样式 */
#article-toc {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 220px;
    max-height: 70vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    padding: 16px 12px;
    z-index: 1000;
    transition: all 0.3s ease;
    border: 1px solid rgba(0,0,0,0.05);
}

.toc-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}

.toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.toc-list li {
    margin-bottom: 6px;
}

.toc-list a {
    text-decoration: none;
    color: #666;
    font-size: 13px;
    line-height: 1.6;
    display: block;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.2s;
}

.toc-list a:hover {
    background: #f0f4ff;
    color: #667eea;
}

.toc-list a.active {
    color: #667eea;
    font-weight: 600;
    background: #f0f4ff;
    border-left: 3px solid #667eea;
    padding-left: 10px;
}

/* 移动端隐藏 */
@media (max-width: 768px) {
    #article-toc {
        display: none;
    }
}

3.3 JavaScript构建目录与滚动监听

在 functions.php 的脚本部分追加：

<script&gt
document.addEventListener('DOMContentLoaded', function() {
    const content = document.querySelector('.article-content'); // 子比主题文章内容容器
    if (!content) return;
    
    const headings = content.querySelectorAll('h2, h3');
    const tocList = document.querySelector('.toc-list');
    if (!tocList || headings.length === 0) return;
    
    // 生成目录项
    headings.forEach(function(heading, index) {
        const id = 'toc-heading-' + index;
        heading.id = id;
        
        const li = document.createElement('li');
        const a = document.createElement('a');
        a.href = '#' + id;
        a.textContent = heading.textContent;
        a.dataset.target = id;
        
        // 根据标签级别缩进
        if (heading.tagName === 'H3') {
            a.style.paddingLeft = '20px';
            a.style.fontSize = '12px';
        }
        
        li.appendChild(a);
        tocList.appendChild(li);
    });
    
    // 滚动监听高亮
    const tocLinks = tocList.querySelectorAll('a');
    
    window.addEventListener('scroll', function() {
        let current = '';
        headings.forEach(function(heading) {
            const rect = heading.getBoundingClientRect();
            if (rect.top <= 100) {
                current = heading.id;
            }
        });
        
        tocLinks.forEach(function(link) {
            link.classList.remove('active');
            if (link.dataset.target === current) {
                link.classList.add('active');
            }
        });
    });
    
    // 平滑滚动
    tocList.addEventListener('click', function(e) {
        if (e.target.tagName === 'A') {
            e.preventDefault();
            const targetId = e.target.getAttribute('href').substring(1);
            const target = document.getElementById(targetId);
            if (target) {
                target.scrollIntoView({ behavior: 'smooth', block: 'start' });
            }
        }
    });
});
</script>