大绵羊折叠框插件(开源)

「大绵羊折叠框」是一款专为WordPress编辑器打造的交互式内容区块,采用现代前端技术栈开发,完美融入Gutenberg编辑器生态。该区块支持可视化折叠/展开效果,可显著优化长文内容的呈现方式,特别适合制作常见问题解答、产品说明等需要分层展示的场景。

核心功能

1. 交互

  • 可视化开关状态(展开时显示↑图标,收起时显示↓图标)
  • 实时预览内容展开效果
  • 点击标题区域即可切换状态
大绵羊折叠框插件(开源)

2. 个性化定制

  • 四色标题背景方案(默认提供天蓝/浅绿/粉红/米黄)
  • 支持通过颜色选择器扩展更多色系
  • 独立CSS样式文件确保主题兼容性
大绵羊折叠框插件(开源)

实现方法

1. 架构设计

registerBlockType('dmy/accordion', {
    // 注册区块类型
    attributes: {
        title: { type: 'string' },    // 标题文本
        content: { type: 'string' },  // 正文内容 
        isOpen: { type: 'boolean' },  // 状态标记
        headerColor: { type: 'string' } // 颜色配置
    },
    edit: ({ attributes, setAttributes }) => {
        // 编辑器逻辑...
    },
    save: ({ attributes }) => {
        // 前端保存逻辑...
    }
});

2. 关键技术点

  • 动态状态管理:通过isOpen属性实现开合状态持久化
  • 颜色配置系统:采用WordPress原生ColorPalette组件
  • 模块化样式
/* editor.css */
.accordion.is-open { transition: all 0.3s ease; }

/* style.css */
.accordion-header { padding: 15px; border-radius: 5px; }

使用场景

  1. 知识库建设:整理技术文档时分层展示详细信息
  2. 电商页面:商品参数的多级展示
  3. 教学课件:逐步展开的习题答案解析
  4. 活动页面:分项说明参与细则

开发指南

1. 开发环境集成

# 通过@wordpress/scripts创建区块
wp-scripts start

2. 编辑器操作流程

  1. 插入区块 → 选择「大绵羊折叠框」
  2. 编辑标题内容(支持加粗/斜体等格式)
  3. 在右侧面板选择标题背景色
  4. 点击预览按钮测试交互效果
大绵羊折叠框插件(开源)

测试建议

  1. 移动端适配建议保持标题文字在20字以内
  2. 颜色搭配:深色文字建议搭配浅黄背景
  3. SEO优化:展开和不展开 状态的内容会被完整抓取
  4. 性能优化:单页建议不超过20个折叠区块
  5. 目前只测试了7B2主题,其他主题暂时没测试
大绵羊折叠框插件(开源)

版本规划路线(v1.1(规划中/想法)

添加自定义图标功能
集成动画速度设置
支持AJAX动态加载内容

站长Ps1:v1.0.1版本难免出一些问题可以在评论区跟我讲有空我会修复的

站长Ps2:可通过子主题的style.css覆盖默认样式,或使用区块过滤器扩展颜色选项。区块代码已遵循WordPress编码规范,适合可以二次开发!。

大绵羊折叠框插件(开源)

开源链接

dmmyblog/dmy-fold

(如果可以的话可以点个Starred嘛(((),好了我要去修跳转插件了 脑,真的是天天报错,天天不一样

下载权限
查看
  • 免费下载
    评论并刷新后下载
    登录后下载
  • {{attr.name}}:
您当前的等级为
登录后免费下载登录 小黑屋反思中,不准下载! 评论后刷新页面下载评论 支付以后下载 请先登录 您今天的下载次数(次)用完了,请明天再来 支付积分以后下载立即支付 支付以后下载立即支付 您当前的用户组不允许下载升级会员
您已获得下载权限 您可以每天下载资源次,今日剩余

给TA给糖
共{{data.count}}人
人已给糖
经验分享

Error establishing a Redis connection:一场由NOAUTH引发的报错

2025-4-10 0:20:14

经验分享

css毛玻璃布局

2023-8-25 23:40:58

5 条回复 A文章作者 M管理员
  1. 齐小波

    😎😎😎😎😎😎太强了

  2. 齐小波

    大绵羊头号黑粉😎

  3. 齐小波
    齐小波给作者打赏了¥22