wordpress知识库
网站首页 > 知识库 > wordpress知识 >

如何构建WordPress块模板

2018/03/15

在古腾堡时代,设计过程并不严格地与WordPress主题联系在一起。开箱即用,CMS为用户提供了构建出色网站布局所需的所有设计工具,并且该主题旨在添加更多构建和设计工具。

块模板是一项功能,可以在网站建设中释放更多功能。根据Block Editor手册:

块模板定义为块项的列表。此类块可以具有预定义的属性、占位符内容,并且是静态的或动态的。块模板允许为编辑器会话指定默认初始状态。

换句话说,块模板是用于在客户端上动态设置默认状态的预构建块集合。

👉块模板与模板文件不同。

模板文件是PHP文件,例如index.php、page.php和single.php,根据WordPress模板加载原理,它们对经典主题和块主题的工作方式相同。在经典主题中,这些文件是用PHP和HTML编写的。在块主题中,它们完全由块组成。

👉块模板不同于块模式。

块模式需要手动添加到您的页面中,而块模板会在您或您的团队成员创建新文章时自动提供初始布局和默认值。

您还可以将特定的块模板绑定到您的自定义文章类型,并锁定某些块或功能,以强制用户使用您的默认值或防止错误。

有几种方法可以创建块模板。您可以使用块API通过PHP声明块类型数组,也可以使用该组件创建自定义块类型。InnerBlocks

让我们开始吧!

 

如何使用PHP构建块模板

如果你是一个老派的开发人员,你可以使用WordPress插件或你的主题functions.php来定义一个自定义块模板。如果您决定使用插件,请启动您喜欢的代码编辑器,创建一个新的PHP文件,并添加以下代码:

<?php
/*
 * Plugin Name:       My Block Templates
 * Plugin URI:        https://example.com/
 * Description:       An example plugin
 * Version:           1.0
 * Requires at least: 5.5
 * Requires PHP:      8.0
 * Author:            Your name
 * Author URI:        https://author.example.com/
 * License:           GPL v2 or later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 * Update URI:        https://example.com/my-plugin/
 */

function myplugin_register_my_block_template() {
    $post_type_object = get_post_type_object( 'post' );
    $post_type_object->template = array(
        array( 'core/image' ),
        array( 'core/heading' ),
        array( 'core/paragraph' )
    );
}
add_action( 'init', 'myplugin_register_my_block_template' );

在上面的代码中,get_post_type_object按名称检索文章类型。

将您的文件保存在wp-content/plugins文件夹中,导航到WordPress仪表板中的插件屏幕,然后激活My Block Templates插件。

现在,当您创建新文章时,编辑器会自动启动带有图像块、标题和段落的块模板。

在文章编辑器中自动加载的块模板

您还可以为每个块添加设置数组,还可以创建块的嵌套结构。以下函数使用内部块和设置构建更高级的块模板:

function myplugin_register_my_block_template() {

    $block_template = array(
        array( 'core/image' ),
        array( 'core/heading', array(
            'placeholder'	=> 'Add H2...',
            'level'			=> 2
        ) ),
        array( 'core/paragraph', array(
            'placeholder'	=> 'Add paragraph...'
            
        ) ),
        array( 'core/columns', 
            array(), 
            array( 
                array( 'core/column',
                    array(),
                    array(
                        array( 'core/image' )
                    )
                ), 
                array( 'core/column',
                    array(),
                    array(
                        array( 'core/heading', array(
                            'placeholder'	=> 'Add H3...',
                            'level'			=> 3
                        ) ),
                        array( 'core/paragraph', array(
                            'placeholder'	=> 'Add paragraph...'
                        ) )
                    ) 
                )
            ) 
        )
    );
    $post_type_object = get_post_type_object( 'post' );
    $post_type_object->template = $block_template;
}
add_action( 'init', 'myplugin_register_my_block_template' );

您可以在下图中看到上述代码的输出:

更高级的块模板
到目前为止,我们只使用了核心块。但是,您也可以在块模板中包含自定义块或块模式,如以下示例所示:
function myplugin_register_my_block_template() {
    $post_type_object = get_post_type_object( 'page' );
    $post_type_object->template = array(
        array( 'core/pattern', array(
            'slug' => 'my-plugin/my-block-pattern'
        ) ) 
    );
}
add_action( 'init', 'myplugin_register_my_block_template' );

如果您决定为已注册的自定义文章类型创建默认块模板,则没有太大区别。只需将文章类型更改为自定义文章类型名称,如以下示例所示:get_post_type_object

<?php
function myplugin_register_my_block_template() {
    $post_type_object = get_post_type_object( 'book' );
    $post_type_object->template = array(
        array( 'core/image' ),
        array( 'core/heading' ),
        array( 'core/paragraph' )
    );
}
add_action( 'init', 'myplugin_register_my_block_template' );

现在您已经知道如何创建块模板。