区块编辑器 Gutenberg 基础使用

图片[1]-区块编辑器 Gutenberg 基础使用-WP独立站学院
生成摘要
AI 生成,仅供参考

一、界面速览

打开任意文章的编辑页,界面分三块:

  • 中间画布:内容本体,所见即所得,排版什么样前台就什么样
  • 右侧边栏:顶部两个标签——「文章」管整篇的属性(分类、特色图片、发布时间),「区块」管当前选中区块的样式。选中不同区块,这里的内容会跟着变
  • 顶部工具栏:+ 号(区块插入器)、撤销重做、列表视图、预览、发布

💡 顶部工具栏里有个容易被忽略的「列表视图」:它以树状结构列出全文所有区块——内容一长,靠它定位和选中比滚动鼠标快得多。

图片[1]-WP独立站学院

二、常用区块

点 + 号能看到全部区块,日常写作用来用去就这几个:

区块用途小技巧
段落正文本体,默认区块回车即新建一个段落区块
标题章节结构,分 H2–H6正文从 H2 开始按层级递进,别为了字大跳级——标题层级同时是文章的 SEO 结构
图片插图配图支持拖图直接上传、从媒体库选、贴 URL;传完记得在区块设置里填替代文本(ALT)
列表有序和无序清单回车加项,再回车两次退出
引用引文和重点强调样式由主题决定,换主题后留意效果
分隔线段落之间的视觉断点长文切分话题,比空行体面

💡 两个实用技巧:在空白段落直接敲 / 加区块名(比如 /图片),在弹出的区块列表里回车选中即可插入,比点开插入器找快得多;输入 ## 再敲空格,直接变成二级标题——这是 Markdown 风格快捷方式,# 的数量对应标题级别,### 加空格就是三级标题。

三、区块的增删移复

选中任意区块,上方浮出一排小工具栏,核心操作都在这:

  • 添加:点区块之间的 +,或选中区块后直接回车
  • 移动:工具栏里的上下箭头逐位挪;按住六点手柄直接拖拽
  • 复制:工具栏最右三点菜单里选「复制」,快捷键 Ctrl+Shift+D
  • 删除:三点菜单里的「删除」,或选中后按 Shift+Alt+Z

💡 多选区块也支持:按住 Shift 点首尾两个区块,中间的全部选中,可以整段一起移动或删除。

四、嵌套与分组

区块可以套区块。最常用的是组(Group)区块:把几个段落、图片、标题圈进一个组,它们就成了一个整体——一起移动、统一设背景色和内边距。

想做带底色的提示框、图文混排的卡片,标准做法就是:插入组区块 → 往组里放内容 → 选中组,在侧边栏设背景、圆角、间距。

💡 列表视图里嵌套关系一目了然——选中子区块还是父组,靠它最不容易点错。

同类的容器还有「行」(横向排列)和「堆栈」(纵向排列),做多栏布局用。

图片[2]-WP独立站学院

五、区块样板

区块样板(Block Patterns)是预制的整段排版:图文并排的关于我们、三列特性展示、带按钮的行动号召……插入器切到「样板」标签就能浏览,点一下整段插入,再把里面的文字图片换成自己的。不会设计的人靠它能排出相当体面的页面。

样板分两种,行为差别很大,一张表看清:

对比项普通样板同步样板(Synced Patterns)
来源官方和主题预制自己搭好一组区块,三点菜单里「创建样板」
改动影响插入即副本,改它不影响别处全站联动:改一处,所有用到的地方跟着变
想单独改某一处直接改选中后「分离」,分离后与普通区块无异
典型用途一次性的页面排版全站统一的行动号召、联系方式模块
识别方式与普通区块无区别编辑器里紫色高亮标识,一眼能认出来

图片[3]-WP独立站学院

六、与经典编辑器切换

有些老插件、老工作流依赖经典编辑器。装官方 Classic Editor 插件后,可以在「设置 → 撰写」里选默认编辑器,也能按文章单独切换。

💡 切换时要明白一个事实:区块编辑器写的内容,存的是带区块注释的结构化标记;经典编辑器只认传统 HTML。

从区块切到经典,内容通常能看,但复杂排版(分栏、按钮样式)可能走样;再切回来,经典编辑器写的内容会被装进一个「经典」区块里,不会自动拆成段落区块。想拆,选中经典区块,三点菜单里选「转换为区块」。

⚠️ 结论:新站就别装经典编辑器了——两头切来切去是格式丢失的主要根源。除非某个必用插件明确要求,否则一路用区块编辑器到底。


七、常见问题

Q:排版在编辑器里好好的,前台错位或样式不对?
A:先分清责任:编辑器画布的样式是「编辑器模拟」,最终长相由主题决定,两边略有出入是正常的。差得离谱的话,清一清缓存插件再看;还错就看是不是在组区块里设了固定宽度,或者主题的容器宽度太窄——用「全宽」模板测试一次就能定位。

Q:从别处复制粘贴过来的内容格式一团乱?
A:Word、公众号编辑器带过来的内容夹着大量私有样式。最省事的是粘贴这步就绕开:用 Ctrl+Shift+V 纯文本粘贴,只带文字不带格式;想保留链接的,先粘进纯文本编辑器洗一遍再贴回来。别去区块工具栏找「清除格式」——核心编辑器没有这个按钮,那是 TinyMCE Advanced 这类第三方插件给经典编辑器加的功能。图片也别直接粘——那样粘进来的是外链图,对方删图你就裂图,务必下载后传媒体库。

Q:切了经典编辑器再切回来,内容变成一个整块了?
A:那就是经典区块。选中它,三点菜单选「转换为区块」,WordPress 会把内容拆回段落、图片等独立区块。拆完通读一遍,复杂排版处可能需要手动微调。

Q:想要目录(TOC)区块找不到?
A:核心的目录区块到目前仍是实验性质,默认不开放。需要文章目录的话,装 Rank Math 之类的 SEO 插件(自带目录区块)或专门的 TOC 插件,比等核心成熟现实得多。

© 版权声明
THE END
喜欢就支持一下吧
点赞15 分享
评论 共22条

请登录后发表评论