90 lines
5.3 KiB
Markdown
90 lines
5.3 KiB
Markdown
# 模式
|
||
|
||
区块[模式](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-patterns/)是为用户提供独特定制编辑体验的最佳方式之一。
|
||
|
||
## 为所有文章类型优先设置起始模式
|
||
|
||
当用户创建新内容时，无论文章类型如何，都会面对一个空白画布。然而，通过设置特定类型的模式在创建新内容时优先显示，可以改善这一体验。当网站中存在声明支持`core/post-content`区块类型的模式时，用户每次创建新项目都会出现模态窗口。默认情况下，WordPress不包含任何此类模式，因此除非至少添加了两个此类文章内容模式，否则模态窗口不会出现。
|
||
|
||
要启用此功能，请在模式的区块类型中包含`core/post-content`。然后，可以通过文章类型选项控制模式应显示的文章类型。以下是一个在创建新文章时出现的模式示例：
|
||
|
||
```php
|
||
<?php
|
||
/**
|
||
* 标题：新活动公告
|
||
* 别名：twentytwentytwo/new-event-announcement
|
||
* 区块类型：core/post-content
|
||
* 文章类型：post
|
||
* 分类：featured, text
|
||
*/
|
||
?>
|
||
|
||
<!-- wp:heading {"lock":{"move":false,"remove":true}} -->
|
||
<h2>详情</h2>
|
||
<!-- /wp:heading -->
|
||
|
||
<!-- wp:heading {"lock":{"move":false,"remove":true}} -->
|
||
<h2>路线指引</h2>
|
||
<!-- /wp:heading -->
|
||
|
||
<!-- wp:heading {"lock":{"move":false,"remove":true}} -->
|
||
<h2>预约确认</h2>
|
||
<!-- /wp:heading -->
|
||
|
||
<!-- wp:paragraph {"lock":{"move":true,"remove":true}} -->
|
||
<p>如需确认预约，请加入Make Slack中的#fse-outreach-experiment频道。</p>
|
||
<!-- /wp:paragraph -->
|
||
|
||
<!-- wp:buttons -->
|
||
<div class="wp-block-buttons"><!-- wp:button {"lock":{"move":true,"remove":false}} -->
|
||
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">了解更多</a></div>
|
||
<!-- /wp:button --></div>
|
||
<!-- /wp:buttons -->
|
||
|
||
<!-- wp:cover {"useFeaturedImage":true,"dimRatio":80,"overlayColor":"primary","contentPosition":"center center","align":"full"} -->
|
||
<div class="wp-block-cover alignfull"><span aria-hidden="true" class="wp-block-cover__background has-primary-background-color has-background-dim-80 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"输入标题…","fontSize":"large"} -->
|
||
<p class="has-text-align-center has-large-font-size">期待您的参与！</p>
|
||
<!-- /wp:paragraph --></div></div>
|
||
<!-- /wp:cover -->
|
||
```
|
||
|
||
在[WordPress 6.0开发说明中的页面创建模式](https://make.wordpress.org/core/2022/05/03/page-creation-patterns-in-wordpress-6-0/)中了解更多关于此功能的信息，并[注意WordPress 6.1将此功能扩展到所有文章类型](https://make.wordpress.org/core/2022/10/10/miscellaneous-editor-changes-for-wordpress-6-1/#start-content-patterns-for-all-post-types)。
|
||
|
||
## 为模板创建优先设置起始模式
|
||
|
||
与为新文章或页面优先设置模式类似，同样的体验可以添加到模板创建过程中。当模式声明支持'templateTypes'属性时，只要创建了符合指定条件的模板，这些模式就会出现，同时提供从空白状态开始或使用当前模板回退选项的选择。默认情况下，WordPress不包含任何此类模式。
|
||
|
||
要启用此功能，模式需要指定一个名为`templateTypes`的属性，这是一个包含可使用该模式作为完整内容的模板数组。以下是一个在创建404模板时出现的模式示例：
|
||
|
||
```php
|
||
register_block_pattern(
|
||
'wp-my-theme/404-template-pattern',
|
||
array(
|
||
'title' => __( '404专用模板模式', 'wp-my-theme' ),
|
||
'templateTypes' => array( '404' ),
|
||
'content' => '<!-- wp:paragraph {"align":"center","fontSize":"x-large"} --><p class="has-text-align-center has-x-large-font-size">404模式</p><!-- /wp:paragraph -->',
|
||
)
|
||
);
|
||
```
|
||
|
||
在[WordPress 6.3开发说明中的新建模板模态窗口模式](https://make.wordpress.org/core/2023/07/18/miscellaneous-editor-changes-in-wordpress-6-3/#patterns-on-the-create-a-new-template-modal)中了解更多关于此功能的信息。
|
||
|
||
## 锁定模式
|
||
|
||
如先前关于锁定API的部分所述，模式本身的某些方面可以被锁定，以保护设计的重要部分。[这里有一个模式示例](https://gist.github.com/annezazu/acee30f8b6e8995e1b1a52796e6ef805)，其中包含以不同方式锁定的各种区块。您可以在编辑器中构建这些模式，包括添加锁定选项，然后[按照文档注册它们](/docs/reference-guides/block-api/block-patterns.md)。
|
||
|
||
## 从模式目录中优先选择特定模式
|
||
|
||
从WordPress 6.0开始，主题可以通过theme.json从[模式目录](https://wordpress.org/patterns/)注册模式。为实现这一点，主题应使用theme.json中新的patterns顶级键。在此字段中，主题可以列出要从模式目录注册的模式。patterns字段是模式目录中模式别名的数组。模式别名可以从模式目录中单个模式视图的URL中提取。例如：此URL https://wordpress.org/patterns/pattern/partner-logos 的别名是partner-logos。
|
||
|
||
```json
|
||
{
|
||
"patterns": [ "short-text-surrounded-by-round-images", "partner-logos" ]
|
||
}
|
||
```
|
||
|
||
内容创建者随后将在插入器的“模式”选项卡中，找到与模式目录分类匹配的相应模式。
|
||
|
||
## 附加资源
|
||
|
||
- [使用模板模式构建多个首页设计](https://developer.wordpress.org/news/2023/04/13/using-template-patterns-to-build-multiple-homepage-designs/)（WordPress开发者博客） |