
您现在的位置是:首页 > WordPress教程WordPress教程
从零上手WordPress Gutenberg:别再用老编辑器啦,这才是2024年的正确打开方式!
WP集市
2025-08-21
【WordPress教程】
319人已围观
说实话,WordPress老编辑器(TinyMCE)用了这么多年,我早看它不顺眼了——想加个图片得调半天格式,代码块粘贴进去直接乱码,排版稍微复杂点就跟打仗似的。直到Gutenberg出来,才算救了命。今天就掏心窝子跟你说:这编辑器到底咋用,咱程序员和普通用户都能看懂的那种。
先搞明白:Gutenberg到底是个啥?
你可以理解成“区块编辑器”——页面上所有内容(文字、图片、按钮、代码块…)都是独立的“积木块”,拖过来、摆好、改改样式,就完事。不像老编辑器,所有内容揉在一个框里,改个标题格式能把下面的列表全带跑偏。
举个例子:写技术博客时,你需要“标题+段落+代码块+图片+引用”,老编辑器得手动调每个部分的HTML;Gutenberg直接点左边的“+”,选“代码”区块,粘贴进去自动高亮,爽得很。
核心玩法:把“区块”玩明白
Gutenberg的灵魂就是“区块(Block)”,你打开编辑器第一眼看到的那个“+”按钮,就是召唤区块的入口。常用的区块就那几个,咱一个个说:
- 段落区块:最基础的,写文字用。但别小瞧它——选中文本直接改“标题1/2/3”“引用”“代码”,不用切区块,跟Word里格式刷似的方便。
- 图片区块:拖张图片进来,右边栏直接调“对齐方式”“链接”“尺寸”,甚至能加“图片标题”(老编辑器得手动插div)。对了,记得勾“懒加载”,优化速度!
- 列表区块:分“有序”和“无序”,重点是能嵌套!比如写教程步骤,“1. 安装插件”下面可以加“- 下载安装包”“- 激活插件”,层级清清楚楚,老编辑器嵌套列表能把人逼疯。
- 代码区块:程序员必用!选好语言(PHP/JavaScript/HTML)自动高亮,还能显示行号,粘贴代码再也不用怕格式乱了。我上次贴了段Python脚本,连缩进都没动,舒服。
进阶操作:自定义区块,程序员的“偷懒神器”
咱程序员写代码最烦啥?重复劳动!比如每个文章末尾都要加“作者信息”(头像+简介+公众号二维码),用老编辑器得复制粘贴,改一次所有文章都得改。Gutenberg自定义区块直接解决——写个固定模板,以后点一下就插入,改模板所有文章自动同步。
举个简单例子,写个“作者信息”区块(代码不长,咱直接上):
// 注册一个自定义区块
wp.blocks.registerBlockType('my-plugin/author-info', {
title: '作者信息', // 区块名称(编辑器里显示)
category: 'design', // 分类(左边栏“设计”分类下能找到)
icon: 'admin-users', // 图标(用WordPress自带图标)
// 编辑界面(后台看到的样子)
edit: () => {
return wp.element.createElement('div', { className: 'author-info' }, [
wp.element.createElement('img', { src: '头像URL', alt: '作者头像' }), // 头像
wp.element.createElement('p', null, '我是XXX,5年WordPress开发,专注前端优化...') // 简介
]);
},
// 保存到数据库的内容(前台显示的样子)
save: () => {
return wp.element.createElement('div', { className: 'author-info' }, [
wp.element.createElement('img', { src: '头像URL', alt: '作者头像' }),
wp.element.createElement('p', null, '我是XXX,5年WordPress开发,专注前端优化...')
]);
}
});
代码啥意思?简单说:注册一个叫“作者信息”的区块,后台编辑时显示头像+简介,保存后前台直接输出带样式的HTML。以后写文章点“+”→“设计”→“作者信息”,一秒插入,爽吧?
踩过的坑:这些“坑”我替你踩过了
- 区块冲突:有些老插件(比如某些排版插件)和Gutenberg不兼容,装了之后编辑器直接白屏。解决办法:先禁用所有插件,一个个开,找到冲突的那个,换个替代品(比如“经典编辑器”插件就别用了,早该淘汰了)。
- 撤销键别狂按:Gutenberg撤销是“区块级”的——你删了一个区块,按Ctrl+Z能恢复,但如果改了区块内容(比如段落文字),撤销会回到改之前的状态。别跟老编辑器似的狂按撤销,容易乱。
- 多区块排版用“组”区块:想把“标题+图片+段落”打包成一个整体移动?选这些区块,点顶部“组”按钮(或直接搜“组”区块),瞬间变成一个大区块,拖来拖去不拆散。
最后说句大实话
Gutenberg刚出来时我也骂过——“不好用,不如老编辑器直观”。但用了3个月后回不去了:排版效率至少提了50%,代码块再也没乱过,自定义区块省了我多少复制粘贴的时间。
别犹豫了,打开你WordPress后台,新建一篇文章,点那个“+”按钮试试——先拖个“段落”写标题,再插个“图片”放封面,最后用“代码”区块贴段示例代码。10分钟搞定一篇像样的文章,香不香?
对了,要是遇到问题,评论区喊我,我教你怎么把Gutenberg玩出花!
Tags:
文章版权声明:除非注明,否则均为WP集市原创文章,转载或复制请以超链接形式并注明出处。

相关文章
- WordPress经典编辑器没了?别急,这几招直接给它拽回来!
- 手把手教你搞懂WordPress主题翻译!本地化成中文就这么简单
- 手把手教你给WordPress绑域名!别再让网站裸奔了喂
- WordPress主机怎么选?程序员掏心窝子指南
- WordPress缓存插件咋配?看完这篇,网站嗖嗖快!
- 手把手教你给WordPress装SSL证书,从此网站“绿锁”到手!
- WordPress数据库前缀咋改?别慌,手把手教你避坑
- 别等网站被黑了才后悔!WordPress安全扫描手把手教程
- 手把手教你把WordPress木马删干净!别再让网站裸奔了
- WordPress主题更新避坑指南:从“删库跑路”到“稳如老狗”的实操手册
热门文章
