WordPress插件–Block_ITwuyu – WordPress 可编辑自定义区块插件

10.10.2025 92

夸克网盘分享了「Block_call_itwuyu」
链接：https://pan.quark.cn/s/eeb605b7ca45
提取码：KFjv

## 🌟 核心特性

### 🔥 **智能HTML解析**

– 自动识别并提取HTML中的可编辑元素

– 支持图片、链接、标题、段落、纯文本等所有常见元素

– 智能去重，避免重复提取相同内容

### 🎯 **真正的可视化编辑**

– 每个代码块自动注册为独立的Gutenberg区块

– 在右侧属性面板中实时编辑内容

– 所见即所得的编辑体验

– 居中显示，100%宽度适配

### 📁 **智能分组管理**

– 支持创建和选择分组

– 可以在添加和编辑时灵活选择现有分组或创建新分组

– 分组统计和数据展示

### 🛠️ **完整的后台管理**

– 代码块添加、编辑、删除

– 状态管理（启用/禁用）

– 分组管理和统计

– 功能开关控制

### 🔐 **安全可靠**

– HTML内容安全过滤，保持兼容性

– 所有操作包含nonce安全验证

– 权限控制，仅管理员可操作

## 🚀 快速开始

### 安装插件

1. 将插件文件夹上传到 `wp-content/plugins/` 目录

2. 在WordPress后台激活插件

3. 自动创建数据库表并初始化设置

### 安装示例数据（推荐）

“`php

// 访问以下URL安装示例代码块

your-website.com/wp-content/plugins/Block_call_itwuyu/install-samples.php

“`

## 📖 详细使用指南

### 1️⃣ 添加自定义代码块

1. **进入后台管理**

– WordPress后台 → `Block_ITwuyu` → `添加代码`

2. **填写基本信息**

“`

代码名称: 产品介绍卡片

HTML代码: <div>…</div>

分组管理: 可选择现有分组或创建新分组

简码: 自动生成或手动输入

“`

3. **HTML代码示例**

“`html

<p>这是产品描述文字，可以在编辑器中修改。</p>

</div>

“`

### 2️⃣ 在Gutenberg编辑器中使用

1. **添加区块**

– 点击编辑器中的 `+` 按钮

– 搜索您的代码块名称（如：”产品介绍卡片”）

– 或搜索 `Block_call_itwuyu` 使用通用选择器

2. **实时编辑内容**

– 选中区块后，右侧会显示属性面板

– 可编辑的元素包括：

– 📷 **图片设置**：修改图片地址和alt描述

– 🔗 **链接设置**：修改链接URL和显示文字

– 📝 **文本设置**：修改标题、段落等文本内容

3. **区块特性**

– 居中显示，宽度100%

– 区块名称后显示”此名称在页面不显示”提示

– 蓝色虚线边框标识可编辑区块

### 3️⃣ 后台管理功能

#### 管理代码块

– **查看列表**：显示所有代码块，包含名称、分组、简码、状态

– **编辑功能**：点击编辑修改代码块内容和分组

– **状态切换**：一键启用/禁用代码块

– **删除操作**：彻底删除不需要的代码块

#### 设置管理

– **编辑器功能**：控制是否在Gutenberg中显示区块

– **前端显示**：控制前端样式和脚本加载

– **自动简码**：控制是否自动生成简码

– **插件状态**：查看数据库状态、版本信息、分组统计

## 🛠️ 技术细节

### 文件结构

“`

Block_call_itwuyu/

├── Block_call_itwuyu.php # 主插件文件

├── includes/ # 功能模块

│ ├── class-block-call-itwuyu-core.php # 核心功能

│ ├── class-block-call-itwuyu-admin-menu.php # 管理菜单

│ ├── class-block-call-itwuyu-add-code.php # 添加代码

│ ├── class-block-call-itwuyu-manage-code.php # 管理代码

│ ├── class-block-call-itwuyu-settings.php # 设置功能

│ └── class-block-call-itwuyu-editor.php # 编辑器集成

├── css/ # 样式文件

│ ├── editor.css # 编辑器样式

│ ├── frontend.css # 前端样式

│ └── Itwuyu_qd.css # 扩展样式

├── js/ # 脚本文件

│ ├── editor.js # Gutenberg区块脚本

│ ├── individual-blocks.js # 独立区块脚本

│ └── itwuyu_qd.js # 扩展脚本

├── install-samples.php # 示例数据安装脚本

├── README.md # 说明文档

└── USAGE.md # 使用指南

“`

### 数据库结构

插件创建 `wp_custom_blocks` 表：

“`sql

CREATE TABLE wp_custom_blocks (

id mediumint(9) NOT NULL AUTO_INCREMENT,

name varchar(255) NOT NULL, — 代码块名称

code longtext NOT NULL, — HTML代码内容

group_name varchar(100) DEFAULT ”, — 分组名称

shortcode varchar(100) NOT NULL, — 简码名称

status tinyint(1) DEFAULT 1, — 状态(1=启用,0=禁用)

created_at datetime DEFAULT CURRENT_TIMESTAMP,

updated_at datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,

PRIMARY KEY (id),

UNIQUE KEY shortcode (shortcode)

);

“`

### 支持的HTML元素

|———|———-|————|——|

| 图片 | `<img>` | src, alt | `<img src=”…” alt=”…”>` |

| 链接 | `<a>` | href, 文本内容 | `<a href=”…”>文字</a>` |

| 标题 | `<h1>-<h6>` | 文本内容 | `<h3>标题文字</h3>` |

| 段落 | `<p>` | 文本内容 | `<p>段落文字</p>` |

### 区块命名规则

– 通用选择器：`block-call-itwuyu/selector`

– 独立区块：`block-call-itwuyu/代码块名称`

– 简码格式：``

## 💡 最佳实践

### ✅ 推荐的HTML结构

“`

<!– 完整的卡片组件 –>

<p>这里是产品的详细描述信息，用户可以在编辑器中修改。</p>

</div>

“`

### ⚠️ 注意事项

– 使用语义化的HTML标签

– 为图片添加有意义的alt属性

– 链接使用描述性的文字

– 保持HTML结构的完整性

– 使用内联样式确保样式正确显示

### 🎨 样式建议

– 使用响应式设计

– 保持一致的间距和颜色

– 确保在不同主题下的兼容性

– 考虑深色模式的显示效果

## 🔧 高级功能

### 自定义CSS类

插件会自动为前端渲染的内容添加 `.custom-block-wrapper` 类：

“`css

.custom-block-wrapper {

/* 在主题中添加自定义样式 */

}

“`

### JavaScript扩展

插件支持加载自定义JavaScript文件，可以添加交互功能。

### 简码使用

在任何支持简码的地方使用：

“`php

// 调用特定代码块

// 在PHP中使用

echo do_shortcode(‘‘);

“`

## 🆘 故障排除

### 常见问题

**Q: 代码块在编辑器中不显示？**

“`

A: 检查以下几点：

1. 插件是否正确激活

2. 代码块状态是否为启用

3. 浏览器缓存是否已清理

4. 是否有JavaScript错误

“`

**Q: 编辑功能无效？**

“`

A: 确认：

1. HTML代码格式正确

2. 没有CSS冲突

3. 可编辑元素是否被正确识别

4. 检查控制台是否有错误信息

“`

**Q: 前端样式异常？**

“`

A: 可能原因：

1. 主题CSS冲突

2. 其他插件干扰

3. 缓存问题

4. 添加自定义CSS解决

“`

### 调试模式

在 `wp-config.php` 中启用调试：

“`php

define(‘WP_DEBUG’, true);

define(‘WP_DEBUG_LOG’, true);

“`

## 📊 性能优化

– 仅在需要时加载JavaScript和CSS

– 使用缓存减少数据库查询

– 优化图片大小和格式

– 定期清理未使用的代码块

## 🔄 更新与维护

### 数据备份

建议定期备份：

– `wp_custom_blocks` 数据表

– 插件设置选项

– 自定义CSS和JS文件

### 版本更新

– 自动检查兼容性

– 保留用户数据和设置

– 提供版本升级指南

## 📋 系统要求

– **WordPress**: 5.0 或更高版本

– **PHP**: 7.0 或更高版本

– **MySQL**: 5.6 或更高版本

– **浏览器**: 支持ES6的现代浏览器

– **编辑器**: Gutenberg编辑器

## 🔗 相关链接

– [WordPress官方文档](https://wordpress.org/support/)

– [Gutenberg开发指南](https://developer.wordpress.org/block-editor/)

– [HTML最佳实践](https://developer.mozilla.org/en-US/docs/Web/HTML)

## 📝 更新日志

### v1.3.2.2 (最新版本)

– 🎨 备份恢复页面样式调整，参考license_manager_itwuyu插件的备份恢复页面样式进行重构

– 🛠️ 样式架构优化，分离备份页面专用样式，避免与编辑器样式冲突

– 📋 用户体验提升，与license_manager_itwuyu插件保持视觉风格统一

### v1.3.2.1

– 🔧 紧急修复 wpdb::prepare() 参数错误

– 🔧 重构查询参数管理，增强代码可维护性

### v1.3.2

– ✨ 新增批量删除功能

– ✨ 添加代码权限控制

– ✨ 备份和恢复权限控制

– ✨ 管理代码页面分页功能

– ✨ 分组筛选功能

– 🔧 修复文件类型检测问题

– 🔧 重大修复批量删除功能

– 🔧 增强恢复流程调试能力

### v1.1.0 (最新版本)

– ✨ 新增智能HTML元素解析功能

– ✨ 每个代码块独立注册为Gutenberg区块

– ✨ 右侧属性面板实时编辑功能

– ✨ 智能分组管理，支持创建和选择

– ✨ 完整的编辑和状态管理功能

– ✨ 模块化代码架构重构

– 🐛 修复区块居中和宽度显示问题

– 🐛 修复元素提取重复问题

– 🐛 修复编辑器依赖警告

– 💄 优化区块显示样式和用户体验

### v1.0.0

– 🎉 初始版本发布

– 📦 基础代码管理功能

– 🔌 Gutenberg编辑器集成

– 📁 分组功能

– 🔗 简码支持

—

« 上一篇: WordPress插件—Code_itwuyu插件一款代码添加插件，用于代码前端显示
下一篇: WordPress插件–Information_ITwuyu »

选择语言

栏目导航

WordPress插件系列

WordPress插件–Block_ITwuyu – WordPress 可编辑自定义区块插件

WordPress插件系列

WordPress插件–Block_ITwuyu – WordPress 可编辑自定义区块插件

订阅我们的更新