WordPress模板插件定制

您现在的位置是:首页 > WordPress教程WordPress教程

从零上手WordPress Gutenberg:别再用老编辑器啦,这才是2024年的正确打开方式!

查看 WP集市 的更多文章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。以后写文章点“+”→“设计”→“作者信息”,一秒插入,爽吧?

踩过的坑:这些“坑”我替你踩过了

  1. 区块冲突:有些老插件(比如某些排版插件)和Gutenberg不兼容,装了之后编辑器直接白屏。解决办法:先禁用所有插件,一个个开,找到冲突的那个,换个替代品(比如“经典编辑器”插件就别用了,早该淘汰了)。
  2. 撤销键别狂按:Gutenberg撤销是“区块级”的——你删了一个区块,按Ctrl+Z能恢复,但如果改了区块内容(比如段落文字),撤销会回到改之前的状态。别跟老编辑器似的狂按撤销,容易乱。
  3. 多区块排版用“组”区块:想把“标题+图片+段落”打包成一个整体移动?选这些区块,点顶部“组”按钮(或直接搜“组”区块),瞬间变成一个大区块,拖来拖去不拆散。

最后说句大实话

Gutenberg刚出来时我也骂过——“不好用,不如老编辑器直观”。但用了3个月后回不去了:排版效率至少提了50%,代码块再也没乱过,自定义区块省了我多少复制粘贴的时间。

别犹豫了,打开你WordPress后台,新建一篇文章,点那个“+”按钮试试——先拖个“段落”写标题,再插个“图片”放封面,最后用“代码”区块贴段示例代码。10分钟搞定一篇像样的文章,香不香?

对了,要是遇到问题,评论区喊我,我教你怎么把Gutenberg玩出花!

Tags:

WordPress模板插件定制