WordPress 块锁定 API 完全指南：控制你的主题布局

发布于 作者:

WordPress 块编辑器（Block Editor）的块锁定功能，简单来说，就是让你能“锁住”主题里的某些部分，防止编辑者不小心弄乱设计。比如，你不想让用户删掉网站头部的 Logo，或者移动联系按钮的位置，这个功能就能派上用场。

本文将带你从零开始，了解两种锁定方式：块锁定和模板锁定。我们会通过一个“活动事件”的实战案例，一步步教你如何禁止移动、禁止删除、禁止插入新块，甚至开启“仅内容编辑”模式。如果你是主题开发者，或者正在为客户搭建网站，这篇文章能帮你减少很多不必要的售后支持。

什么是块锁定？

块锁定 API 让你能控制用户与特定区块的交互方式。你可以决定他们能否移动、删除或修改某个区块的设置。

主要锁定类型：

  • 禁止移动：让区块在编辑器中“钉”在原位。
  • 防止删除：保护关键区块（如标题、Logo）不被误删。
  • 禁止插入：防止用户在特定区域（如页脚）添加新内容。
  • 内容专属模式：用户只能修改文字或替换图片，无法调整样式或布局。

这里有两种作用范围：块级别（只影响单个块）和模板级别（影响容器内的所有子块）。注意，这里的“模板”指的是像“组（Group）”、“栏（Columns）”这样的容器块，不是指 WordPress 的主题模板文件。

块级别锁定实战

这部分教你如何锁定单个块。我们先创建一个名为“活动事件”的示例区块。

创建你的一个区块

在你的主题文件夹下创建一个 patterns 目录，然后新建一个 event.php 文件，复制以下代码：

php

<?php
/**
 * Title: 活动事件
 * Slug: themeslug/event
 * Categories: banner
 */
?>
<!-- 外层组块开始 -->
<div class="wp-block-group alignwide" style="padding:20px;background:#111;color:#fff;">

    <!-- 图片块 -->
    <figure class="wp-block-image">
        <img src="https://example.com/event-image.jpg" alt="活动主视觉图"/>
    </figure>

    <!-- 三列布局 -->
    <div class="wp-block-columns">
        <div class="wp-block-column">
            <p><strong>地点：</strong> 北京市朝阳区798艺术区</p>
        </div>
        <div class="wp-block-column">
            <p><strong>日期：</strong> 2026年8月15日</p>
        </div>
        <div class="wp-block-column">
            <div class="wp-block-button">
                <a class="wp-block-button__link">立即购票</a>
            </div>
        </div>
    </div>

</div>
<!-- 外层组块结束 -->

在文章编辑器里插入这个区块，你会看到一张图片、三段文字和一个按钮。

如何锁定“图片块”不能移动

选中图片块，点击工具栏的“选项”按钮（三个竖点），选择“锁定”。

在弹出的对话框里，勾选 “禁止移动”。这时候，WordPress 会自动在代码里加上锁：

php

<!-- 注意 lock 属性出现了 -->
<!-- wp:image {"lock":{"move":true,"remove":false}} -->

如果你想在代码里直接写死这个设置，可以这么改：

php

<!-- wp:image {"lock":{"move":true,"remove":false}} -->
<figure class="wp-block-image">
    <img src="https://example.com/event-image.jpg" alt="活动主视觉图"/>
</figure>
<!-- /wp:image -->

现在，用户插入这个区块后，图片就动不了了，但文字和按钮依然可以自由调整。

如何锁定“图片块”不能被删除

和上面类似，在锁定弹窗里勾选 “防止删除”：

php

<!-- wp:image {"lock":{"move":false,"remove":true}} -->

你也可以把两个锁都加上，让图片既不能移动也不能删除。这在保护核心视觉元素时非常有效。

模板级别锁定：控制整个布局

如果你想把整个“活动事件”区块锁死，比如用户不能往里面加新东西，或者只能改改文字，那就得用模板锁定了。

注意： 模板锁定只对特定的容器块有效：组（Group）、封面（Cover）、栏（Columns）、列（Column）、导航（Navigation）。

锁定所有子块：不能移动，不能删除

选中外层的“组块”，在锁定弹窗里勾选全部选项，并点击 “应用到所有块”。代码会变成：

php

<!-- wp:group {"templateLock":"all","lock":{"move":true,"remove":true}} -->

这样，用户对里面的任何块都只能“看看”，不能挪动位置，也不能删掉任何一个元素。

防止用户插入新块

有些场景下，你不希望用户往页脚里添加额外的内容。这没有 UI 操作界面，需要你手动编辑代码：

php

<!-- wp:group {"templateLock":"insert"} -->

加上这行属性后，用户将无法在该区域内通过“+”号添加任何新块。

内容专属模式：用户只能改文字和图片

这是我推荐的功能，特别适合做“产品详情页模板”或“文章卡片”。

php

<!-- wp:group {"templateLock":"contentOnly"} -->

设置之后，用户在编辑器中选中任何块，侧边栏只会显示 “内容” 面板，样式、尺寸、颜色等设计选项全部消失。他们能做的只有：改标题文字、换配图、编辑按钮文字。

注意： 开启“内容专属模式”后，请确保你的区块里没有必需的自定义 CSS 类或样式依赖，否则用户没法调整。

总结

锁定方式适用场景关键属性
禁止移动固定布局结构，如网站导航{"lock":{"move":true}}
防止删除保护核心内容，如 Logo、CTA 按钮{"lock":{"remove":true}}
禁止插入限制内容区域，如页脚、侧边栏{"templateLock":"insert"}
内容专属提供“模板化”编辑体验，只改文字/图片{"templateLock":"contentOnly"}

块锁定 API 是 WordPress 主题开发中控制编辑体验的利器。合理使用能大幅降低用户误操作的风险，尤其当你为客户交付项目时，能省去很多“我怎么把按钮弄回来了？”这样的烦恼。建议从简单的块锁定开始，逐步深入到模板锁定，终你能打造出既灵活又稳健的主题。