文档大纲

为你的WordPress添加"笔记折叠"文章模板

WordPress 折叠模板信息图

"可折叠"笔记模板

将静态 WordPress 文章转化为交互式的专业知识库。

为什么要自定义？解决信息过载问题

在信息爆炸的时代，读者经常面临"文字墙"带来的视觉疲劳。本教程提供了一个技术方案：通过自定义 WordPress 模板引入交互式折叠功能。通过将长篇内容（如 FAQ、文档或学习笔记）重构为可切换的部分，我们能够显著提升用户体验。

提升阅读体验

实施"笔记折叠"模板将阅读范式从被动滚动转变为主动导航。对比指标显示，与标准模板相比，可扫描性和移动端易用性有了显著提升。

  • ✔ 结构化： 将线性文本转化为层级结构。
  • ✔ 移动端： 减少小屏幕上的无限滚动。
  • ✔ 专注度： 用户只展开他们需要的内容。

图 1. 用户体验指标对比

核心实施三步走

该教程将技术过程拆分为三个清晰的阶段。无需插件——仅需高效的代码即可实现。

🎨

1. 样式 (CSS)

创建 note-style.css。定义视觉层级、呼吸间距，并绘制基于 CSS 的交互箭头。

.section-collapsed { display: none }
⚙️

2. 逻辑 (PHP/JS)

创建 my-note-template.php。载入样式并注入 JS 事件监听器以处理点击切换动作。

wp_enqueue_style(…)
🚀

3. 应用 (后台)

在 WordPress 编辑器侧边栏选择新模板。发布文章并体验交互功能。

选择"智能笔记模板"

图 2. 代码库构成

技术内幕：轻量级工程

该方案的精妙之处在于其简洁性。它依赖于标准 Web 技术，无需臃肿的插件。逻辑部分采用现代 JavaScript（如 :scope 选择器）以确保健壮性。

CSS
视觉与动画

处理箭头旋转、过渡动画以及"呼吸感"布局。

JS
交互逻辑

检测 H1/H2/H3 的点击动作并切换后续元素的可见性。

PHP
系统集成

将模板连接到 WordPress 主体系统并排队加载资源。

模拟影响：内容深度 vs. 参与度

分析使用折叠标题结构化内容如何影响不同长度文章的用户留存率。

图 3. 用户留存指标 3D 分析 (WebGL 渲染)

最终结论

对于任何专注于文档或长文内容的 WordPress 网站，实施自定义"折叠笔记"模板都是一项高价值、低投入的升级。

专业技巧：

  • • 务必将 CSS 和 PHP 保持在同一目录下。
  • • 更新后使用 Ctrl + F5 清除缓存。
  • • 保持标准的 #primary 类名以确保侧边栏兼容性。

预计性能收益

信息图制作：段燚

一、 为什么你的网站需要"可折叠"模板？

在信息爆炸的时代，读者的耐心非常有限。可折叠模板（Toggle List）具有极高的实用价值：

  1. 结构清晰，重点突出：读者可以先通过标题概览全文大纲，只点击自己感兴趣的部分深入阅读，避免被长篇大论劝退。
  2. 极佳的移动端体验：在手机窄小的屏幕上，折叠功能能让页面瞬间变短，减少疯狂滑动屏幕的疲劳。
  3. 沉浸式笔记体验：非常适合知识库、FAQ、操作指南或个人学习笔记。你可以先"隐藏"答案或细节，辅助记忆。
  4. 提升专业感：这种交互式设计能让你的网站看起来更像一个专业的知识管理系统。

二、 核心操作：三步打造你的自定义模板

我们将这个功能拆分为两个文件：一个负责功能的 PHP 模板文件，一个负责样式的 CSS 外部文件。

第一步：创建样式文件 note-style.css

在你的 WordPress 当前主题文件夹内（通常路径为 /wp-content/themes/你的主题名/），新建一个文件命名为 note-style.css，粘贴以下代码：

.site-content .content-area {
    width: 70%;
}
main {    
    unicode-bidi: isolate;
    margin-right:30px;
}
/* 设置文章区域背景为白 */
.note-template-wrapper {
    
}

/* 仅针对文章正文区域进行美化 */
.note-content-container {
    background-color: #ffffff !important;
    line-height: 2 !important;
    font-size: 17px;
    color: #333;
    padding: 40px 30px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* 标题样式：增加左侧边距放箭头 */
.entry-content > h1, 
.entry-content > h2, 
.entry-content > h3 {
    position: relative;
    padding-left: 30px !important;
    cursor: pointer;
    margin-top: 1.6em !important;
    margin-bottom: 0.6em !important;
}

/* 箭头绘制 */
.entry-content > h1::before, 
.entry-content > h2::before, 
.entry-content > h3::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 0.6em;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid #888;
    transition: transform 0.3s ease;
}

.entry-content > h1.collapsed::before, 
.entry-content > h2.collapsed::before, 
.entry-content > h3.collapsed::before {
    transform: rotate(-90deg);
}

/* 核心折叠逻辑 - 必须保留 */
.section-collapsed {
    display: none !important;
}

/* 辅助：确保文章中的图片和段落有足够的间距 */
.entry-content p, .entry-content figure {
    margin-top: 1em !important;
    margin-bottom: 0.2em !important;
    color:#333;
}
.entry-header h1 {
    margin-top: 15px;
    font-size: 1.8rem !important;
    color:#444;
}
.entry-content h1 {
    font-size: 1.8rem !important;
    line-height: 3.2rem !important;
    margin: 10px auto 6px 0;
    text-align: left;
    font-weight: bold;
    color:#074d8b;
}
.entry-content h2 {
    font-size: 1.6rem !important;
    line-height: 2rem !important;
    margin: 3px auto 0 0;
    text-align: left;
    font-weight: bold;
    color:#1e73be;
}
.entry-content h3 {
    font-size: 1.4rem !important;
    line-height: 1.8rem !important;
    margin: 6px auto 3px 0;
    text-align: left;
    font-weight: bold;
    color:#222;
}

第二步：创建模板文件 notebook_template.php

在同一个主题文件夹内，新建一个文件命名为 notebook_template.php，粘贴以下代码：

<?php
/*
Template Name: 笔记折叠模板Pro
Template Post Type: post, page
*/

function enqueue_note_styles_final() {
    $css_url = get_stylesheet_directory_uri() . '/note-style.css';
    wp_enqueue_style('note-custom-style', $css_url, array(), '1.2');
}
add_action('wp_enqueue_scripts', 'enqueue_note_styles_final');

get_header(); ?>

<div id="primary" class="content-area note-template-wrapper">
    <main id="main" class="site-main" role="main">
        <div class="note-content-container">
            <?php
            while ( have_posts() ) : the_post();
                ?>
                <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                    <header class="entry-header">
                        <h1 class="entry-title"><?php the_title(); ?></h1>
                    </header>

                    <div class="entry-content" id="foldable-content">
                        <?php the_content(); ?>
                    </div>
                </article>
                <?php
            endwhile;
            ?>
        </div>
    </main>
</div>

<?php get_sidebar(); ?>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const container = document.getElementById('foldable-content');
    if (!container) return;

    const headers = container.querySelectorAll(':scope > h1, :scope > h2, :scope > h3');
    headers.forEach(header => {
        header.addEventListener('click', function() {
            this.classList.toggle('collapsed');
            let nextEl = this.nextElementSibling;
            const currentLevel = parseInt(this.tagName.substring(1));

            while (nextEl) {
                if (nextEl.tagName.match(/^H[1-3]$/)) {
                    const nextLevel = parseInt(nextEl.tagName.substring(1));
                    if (nextLevel <= currentLevel) break;
                }
                nextEl.classList.toggle('section-collapsed');
                nextEl = nextEl.nextElementSibling;
            }
        });
    });
});
</script>

<?php get_footer(); ?>

第三步：在后台应用模板

1. 登录 WordPress 后台，进入或新建一篇 文章。

2. 在右侧栏（经典编辑器寻找"文章属性"面板，区块编辑器寻找"模板"设置），你会惊喜地发现多了一个选项："笔记折叠模板pro"。

3. 选择该模板，点击发布或更新。

4. 前往前台查看，点击任何 H1、H2 或 H3 标题，你会发现内容可以随心所欲地折叠和展开了！

使用效果，查看我这篇文章，这篇文章，使用的就是这个模板。

三、 避坑小贴士

  • 路径问题：确保 note-style.css 和 my-note-template.php 都在同一个文件夹下（通常是你的主题或子主题根目录）。
  • 缓存问题：修改 CSS 后如果没反应，请按下 Ctrl + F5 强制刷新浏览器缓存。
  • 侧边栏：本模板使用了标准 WordPress 类名，如果侧边栏依然显示异常，通常是因为你的主题有特殊的外层包裹容器（如 site-content），你只需在 PHP 模板的最外层套上对应的类名即可。

祝你的网站内容更有逻辑，阅读体验更上一层楼！

阅读量： 289

网站备案号：沪ICP备2025137870号