创建古腾堡块模板以获得更好的体验

已发表: 2019-05-02
WordPress 古腾堡块模板
关注@Cloudways

WordPress 5.x 是世界上最受欢迎的 CMS 的最新版本。 新版本的一个有趣功能是古腾堡编辑器,它准备彻底改变 WordPress 用户在平台上创建内容的方式。 至少那是正式版!

无论您对 Gutenberg 编辑器有什么看法,重要的是要意识到该编辑器不会在即将发布的 WordPress 版本中消失。 原因很简单:“经典”WordPress 编辑器已经开始显示其年龄。 此外,熟悉其他类似平台提供的编辑器的新一代用户,对古腾堡风格的编辑器比经典编辑器更舒服。

定制古腾堡块

古腾堡编辑器基于“块”的概念,可以随意使用分立组件将所需的功能添加到内容中。 通过这些古腾堡块,用户可以添加可调整和独立管理的部分,为读者增加价值。

由于自定义是 WordPress 的核心,Gutenberg 编辑器支持自定义块模板,帮助用户将自定义块添加到他们的 CMS。

有两种方法可以创建自定义的古腾堡块模板。 请注意,这两种方法都需要一些 WordPress 开发知识。

注册古腾堡积木

第一种方法涉及创建可用于构建预填充块的自定义块模板。 为此,将以下代码添加到 functions.php 文件中

add_action( 'init', function() {
    $args = 数组(
        '公开' => 真,
        '标签' => '新闻',
        'show_in_rest' => 真,
        'template_lock' => 'all',
        '模板' => 数组(
            数组('核心/段落',数组(
                '占位符' => '突发新闻',
            ) ),
            数组('核心/图像',数组(
                '对齐' => '右',
            ) ),
        ),
    );

    register_post_type('新闻', $args);
});

这是古腾堡块的这个自定义模板在运行时的样子:

古腾堡块模板

在上面的代码片段中,数组参数“core/paragraph”负责块的内容。 同样,数组参数“core/image”允许您通过三种方式上传图像:直接上传、从媒体库中选择和使用 URL 嵌入。

'show_in_rest' 参数向 WordPress 核心表明该自定义块应该能够通过 WordPress REST API 获取。

'template_lock' 参数设置为 'all' 时,可防止将自定义块添加(或删除)到模板中。

在向此模板添加自定义块时,请使用“模板”子数组。 例如,请考虑以下代码段:

 '模板' => 数组(
            数组('核心/标题',数组('级别'=>'4','内容'=>'标题')),
            数组('核心/段落'),
        )

创建古腾堡插件

使用自定义模板和古腾堡模板时,最佳做法是为自定义古腾堡编辑器插件创建自定义插件。

与所有插件一样,此插件将位于 wp-content/plugins 目录中,该目录包含网站上安装的所有插件的单独文件夹。

要创建插件,请转到 wp-content/plugins 目录并创建一个新文件夹。 文件夹的名称应该是自定义古腾堡模板插件的名称。 出于本教程的目的,我将我的插件命名为“Gutenberg Blocks”。 因此,文件夹的名称将是“ Gutenberg-Blocks ”。

在此文件夹中,创建一个名为 Gutenberg-blocks.php 的文件,并在其中添加以下代码:

 /**
 * 插件名称:Gutenberg Blocks
 * 作者:穆罕默德·欧威斯·阿拉姆
 * 说明:此插件允许用户为古腾堡编辑器添加 WordPress 古腾堡自定义模板
 * 版本:1.0.0
 */

add_action( 'init', function() {
    $args = 数组(
        '公开' => 真,
        '标签' => '新闻',
        'show_in_rest' => 真,
        'template_lock' => 'all',
        '模板' => 数组(
            数组('核心/段落',数组(
                '占位符' => '突发新闻',
            ) ),
            数组('核心/图像',数组(
                '对齐' => '右',
            ) ),
        ),


    );

    register_post_type('新闻', $args);
});

请注意,此代码仅用作指南,您可以更改详细信息以满足您的要求。 安装后,此插件将出现在可用插件列表中。

使用插件的古腾堡块模板

古腾堡 WordPress 主题示例 – Gutenberry

新的无干扰编辑器 Gutenberg 成为 WordPress 核心的一部分已经将近一年了。 然而,在 Gutenberry 出现之前,过去很难在网络上找到一个成熟且经过深思熟虑的古腾堡主题。

Gutenberry 是目前最好的 100% Gutenberg-ready 主题之一。 这个干净简约的主题是在 Gutenberg 中创建的,为您带来前所未有的编辑便利和堪称典范的速度。 例如,Google Speed 对 Gutenberry A 的评分为 97。

这个顶级主题还附带 5 个主页设计,所有这些设计都是为具有丰富媒体集成的现代博客创建的。 此外,Gutenberry 为您提供了大量的博客和帖子布局、10 多个小部件、工作表单和强大的社交媒体集成。

以下是古腾堡主题的显着特点:

  • 示例数据安装程序
  • 终身 24/7 支持
  • 优化的源代码
  • MailChimp 就绪
  • 完全响应
  • 替代模块布局
  • 3 个动态博客布局

包起来!

自定义古腾堡模板是自定义古腾堡编辑器以处理自定义需求的好方法。 与所有 WordPress 一样,创建自定义 Gutenberg 模板的过程很简单,只需添加内联代码或设置自定义插件即可。