编辑又在群里问：“这个三栏卡片怎么复制？为什么我一改字，按钮就跑下面去了？”
这类问题不用每次手把手教。把常用版块注册成 WordPress 区块模式（block pattern），编辑在页面编辑器里点一下就能插入一套排好的版块，再替换文字和图片。下面按一个可落地的小插件来做，做完后编辑看到的是“首屏”“服务三栏”“常见问题”几个入口，不用碰代码。
先想清楚哪些内容值得做成模式
不要按页面规划，按编辑每天要改的内容规划。一个公司站通常这几类会反复出现：
- 首屏：标题、一句说明、两个按钮
- 服务或产品卡片：三栏，每栏标题、两行说明、一个链接
- 常见问题：折叠问答，方便放售前问题
- 行动区：一句话加一个按钮，放在页面底部
每个模式只放编辑真的会改的内容。不要把页头页脚也塞进去，那些通常由主题负责。模式里用核心区块（段落、标题、按钮、分组、栏、详情）就够了，少依赖插件，换主题时不容易散。
建一个小插件，不要塞进主题
模式注册在主题里，换主题就没了。建一个独立插件，目录大概这样：
wp-content/plugins/company-patterns/
├── company-patterns.php
└── patterns/
├── hero.php
├── services.php
└── faq.php
主文件负责注册分类和按文件注册模式。下面代码可以直接放进 company-patterns.php：
<?php
/**
* Plugin Name: Company Block Patterns
* Description: 注册公司站常用的区块模式。
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
add_action( 'init', function () {
register_block_pattern_category(
'company-sections',
array(
'label' => __( '公司常用版块', 'company-patterns' ),
)
);
$patterns = array(
'hero' => '首屏：标题、说明和两个按钮',
'services' => '服务：三栏卡片',
'faq' => '常见问题：折叠问答',
);
foreach ( $patterns as $slug => $title ) {
$file = __DIR__ . '/patterns/' . $slug . '.php';
if ( ! file_exists( $file ) ) {
continue;
}
register_block_pattern(
'company/' . $slug,
array(
'title' => $title,
'categories' => array( 'company-sections' ),
'content' => include $file,
'keywords' => array( '公司', '版块', $slug ),
)
);
}
} );
register_block_pattern() 的 content 要的是区块标记字符串。把每个模式单独放一个 PHP 文件，文件里直接 return 一段字符串，维护起来比在主文件里拼一大堆 HTML 清楚。
首屏模式：给编辑一个能改的起点
patterns/hero.php：
<?php
return <<<'HTML'
<!-- wp:group {
"layout":{
"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:heading {
"level":1} -->
<h1 class="wp-block-heading">这里写主标题，控制在两行以内</h1>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>这里写一句说明：客户是谁、你解决什么问题、下一步做什么。不要写公司历史。</p>
<!-- /wp:paragraph -->
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="#">主按钮：预约咨询</a></div>
<!-- /wp:button -->
<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="#">次按钮：查看服务</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group -->
HTML;
这段标记只用了分组、标题、段落和按钮。编辑插入后可以直接改字、换链接。href="#" 是占位，交付前要改成真实地址。占位文字故意写得像“填写说明”，编辑不容易漏掉；上线前仍然要搜一遍“这里写”。
三栏服务模式：用栏块，但别锁死
patterns/services.php：
<?php
return <<<'HTML'
<!-- wp:group {
"layout":{
"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:heading -->
<h2 class="wp-block-heading">服务</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>下面每栏写一项服务，标题尽量短，说明控制在两行左右。</p>
<!-- /wp:paragraph -->
<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {
"level":3} -->
<h3 class="wp-block-heading">服务一</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>一句话说明这项服务解决什么问题，以及适合谁。</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p><a href="#">了解详情</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {
"level":3} -->
<h3 class="wp-block-heading">服务二</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>一句话说明这项服务解决什么问题，以及适合谁。</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p><a href="#">了解详情</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {
"level":3} -->
<h3 class="wp-block-heading">服务三</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>一句话说明这项服务解决什么问题，以及适合谁。</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p><a href="#">了解详情</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->
HTML;
栏块在手机上会自动堆叠。编辑如果删掉一栏，剩下两栏会变宽，这是正常行为；如果你要求必须三栏，可以在交付说明里写清楚，而不是把块锁死。锁死之后编辑连标题都改不了，反而增加沟通。
常见问题模式：用详情块，少装插件
patterns/faq.php：
<?php
return <<<'HTML'
<!-- wp:group {
"layout":{
"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:heading -->
<h2 class="wp-block-heading">常见问题</h2>
<!-- /wp:heading -->
<!-- wp:details -->
<details class="wp-block-details"><summary>问题一：你们多久能上线？</summary><!-- wp:paragraph -->
<p>答案写在这里。把条件写清楚，比如从什么时间开始算，不要只写“尽快”。</p>
<!-- /wp:paragraph --></details>
<!-- /wp:details -->
<!-- wp:details -->
<details class="wp-block-details"><summary>问题二：网站做好后谁维护？</summary><!-- wp:paragraph -->
<p>答案写在这里。写清楚哪些内容客户自己改，哪些需要另外沟通。</p>
<!-- /wp:paragraph --></details>
<!-- /wp:details --></div>
<!-- /wp:group -->
HTML;
详情块不需要额外插件，编辑点开就能改问答。注意 summary 里的问题要短，长了在手机上会挤。
让编辑找得到，也知道怎么用
模式注册后，编辑在页面编辑器里点左上角的加号，切到“模式”面板，就能看到“公司常用版块”分类。为了提高命中率，给每个模式写清楚标题，比如“首屏：标题、说明和两个按钮”，不要只写“Hero”。
再给编辑一页很短的说明，放在他们能看到的文档里：
- 插入模式后，先改标题和正文，再换图片和链接
- 按钮文字要写成动作，比如“预约咨询”“查看服务”，不要写“点击这里”
- 上线前搜索“这里写”“服务一”“href="#"”，确认没有占位内容
- 手机预览看一遍，重点看按钮有没有换行、三栏有没有挤在一起
自测清单
注册完不要只在自己浏览器里点一下。按这个顺序过一遍：
- 停用再启用插件，看后台有没有报错
- 新建一个页面，插入每个模式，确认不出现“此区块包含无效内容”
- 把模式里的标题、段落、按钮都改一遍，确认能保存
- 切到手机预览，确认栏块堆叠正常
- 换一个默认主题试插入，确认模式还在（插件没被停用的情况下）
- 删除页面，重新插入，确认没有残留的旧内容
如果模式列表里看不到，先检查 register_block_pattern() 是否挂在 init 上，再检查模式文件是不是真的 return 了字符串。文件里多一个 echo 或少了分号，都会让模式内容变成空。
一个容易忽略的边界
区块模式适合“给编辑一个起点”，不适合把整页都锁成模板。如果客户后面要加一段视频、加一个表格，模式里没有对应区块，编辑还是得会一点区块操作。真正要限制编辑范围时，应该同时配一份“哪些块可以用”的说明，而不是指望模式解决所有问题。模式做得太细，列表会变长；做得太粗，编辑还是要自己排版。按实际反复出现的内容做，通常比一次做二十个模式更有用。
如果你需要把一套已经排好的版块落到客户自己的 WordPress 主机上，可以看我们的代部署服务：https://aumcreate.com/setup?utm_source=aliyun&utm_medium=content&utm_campaign=aliyun-block-patterns-nontech-editor
