为古腾堡打造:插件和主题作者如何应对向古腾堡的过渡

为古腾堡打造:插件和主题作者如何应对过渡


在2018年WordCamp欧洲会议上,马特·穆伦维格(Matt Mullenweg)为古登堡制定了未来几个月的粗略路线图。 7月,将大力推动提高古腾堡(Gutenberg)的采用率,8月(或以后;实际上,可能以后)将发布5.0 Beta。即将到来的集成可能会让您想知道WordPress开发人员如何计划为Gutenberg构建.

也就是说,开发人员为古腾堡准备产品的方式有哪些?人们会为古腾堡做些新奇有趣的事情吗?

在本文中,我们将通过向您展示已经存在的内容,为您提供一些真实,具体的示例,说明如何为Gutenberg构建插件和主题开发人员.

通过查看有关开发人员如何使用块和样式来创建更集成的编辑体验的一些现实示例,我们希望您:

  • 了解古腾堡如何使您作为最终用户受益.
  • 获取一些为古腾堡构建自己的WordPress项目的想法.

如果您仍然不确定Gutenberg编辑器是什么,则可能需要先阅读我们完整的Gutenberg编辑器教程。.

现有插件如何解决切换到古腾堡的六个例子

插件作者为Gutenberg构建的方式主要取决于插件的功能.

一方面,您有专注于添加前端内容的插件。这主要是以前通过添加简码完成的工作.

表单插件就是一个很好的例子。几乎每个表单插件都为您提供了一个单独的界面来构建表单,然后为您提供了将这些表单实际嵌入到前端的简码.

这些类型的插件通常会用一个 自定义块 以便更轻松地插入内容。您将在以下部分看到以下示例:

  • 忍者形式
  • WooCommerce

然后,您还有其他插件可以帮助您控制幕后细节。通常,这些插件使用元框.

最著名的例子是类似Yoast SEO的东西。您没有添加内容,但是所有元框信息都是必不可少的.

元框现在可以与Gutenberg一起使用,但是这些插件仍有机会更改其功能以利用Gutenberg。我将向您展示Yoast SEO可能解决该问题的一些方式,以及我们如何选择使用一些自己的插件来做事.

1. Ninja Forms添加了一个新的Gutenberg块

忍者形式 是WordPress.org存储库中最受欢迎的表单插件之一。到目前为止,它通过添加一个简单的方法解决了古腾堡 忍者形式 块.

您像插入任何其他Gutenberg块一样插入该块:

忍者是如何为古腾堡打造的

然后,您可以从下拉列表中选择表单:

忍者形式块

选择表单后,您将在编辑器中看到实时预览:

实时预览表格

现在,这就是全部。但这是可靠的基准方法,因为:

  • 它消除了直接使用简码的需求
  • 您仍在编辑页面时,可以实时查看设计的预览

接下来的两个插件将基于此提供一些更深的样式/控件选项.

2. Give添加两个带有布局选项的古腾堡块

是一个受开发团队欢迎的捐赠插件,该团队非常积极地将Give与Gutenberg编辑器集成在一起(如果您喜欢本文的主题,可以在#PlayingWithBlocks系列 给博客, Give团队详细说明了他们为Gutenberg建造的计划).

Give拥有我尝试过的最精简的古腾堡体验之一。您不仅可以通过“捐赠”的两个区域输入捐赠形式,还可以使用Gutenberg界面设置样式.

让我们嵌入两个区块:

  • 一份捐赠表格
  • 捐赠表格网格

Givewp Gutenberg街区

像忍者表单一样,您可以实时预览表单。但是你也得到 编辑选项可让您:

  • 选择格式
  • 启用/禁用捐赠目标
  • 选择放置内容的位置

块布局选项

而且,如果将鼠标悬停在表格上,您将获得直接链接来编辑该表格:

块编辑

因此,我们来看看如何将块比Ninja Forms的当前实现更深入。但是WooCommerce前进了一步……

3. WooCommerce添加带有列控件的产品块

虽然随着WordPress 5.0的临近,WooCommerce可能会添加更多的Gutenberg集成(有些 如何在此处添加产品的想法),该团队已经将脚趾浸入了古腾堡,与官方 WooCommerce Gutenberg产品模块插件.

是的-现在这是一个单独的插件。但是,安装后,您就可以将现有的WooCommerce产品作为块插入到您的Gutenberg内容中.

当您添加 产品展示 块,您可以选择显示哪些产品:

古腾堡woocommerce块

然后,您可以使用块编辑选项来更改布局:

改变古腾堡的woocommerce布局

这让我非常兴奋,因为这是古腾堡如何使其更易于样式化/配置非标准内容的一个很好的例子.

4. Beaver Builder添加了一个 "转换为Beaver Builder" 选项

关于页面构建器如何处理古腾堡的讨论很多。具体内容还不多,但是Beaver Builder在Beaver Builder 2.1中添加了一项功能,可让您将Gutenberg布局转换为Beaver Builder:

海狸建造者古腾堡

目前,转换过程还不够完善。但是,如果转换是无缝的,那么能够在古腾堡和页面构建器之间移动的想法很有趣.

5. Meta框应该仍然可以工作– Yoast SEO是一个很好的例子

我认为Yoast SEO尚未发布任何更改来解决古腾堡问题,所以现在,这更多地是现有元盒如何与古腾堡一起工作的一个示例(如果您还没有密切关注古腾堡,它现在具有元盒支持,虽然是 向后兼容性比长期解决方案更多).

如您所见,主要的Yoast SEO元框完全不受Gutenberg的约束:

古登堡酵母seo meta box

但是您缺少侧边栏中的SEO和内容分析得分.

那么,Yoast如何为古腾堡打造以解决这一问题? 这是一些样机 Yoast可以将其分析集成到实际的Gutenberg接口中的可能方式:

样机Bseo警告
样机C酵母seo含量分析

6.我们如何处理WP产品评论中的中继框

我们的 WP产品评论插件 是使用meta框控制前端输出的插件之一(在本例中为评论框).

这是我们将WP Product Review集成到Gutenberg编辑器中的工作方式:

wp产品评论gutenberg

当用户指出该帖子是带有侧边栏切换功能的评论时,他们可以通过上面的选项配置其评论框的所有内容:

wp评论亲古腾堡切换

开发人员–这是为古腾堡准备插件的重要资源

如果您是真正的插件开发人员,您可能想知道如何为特定插件构建Gutenberg。好吧…我不能告诉你。但我可以向您指出我们自己的Hardeep Asrani的精彩文章。 Hardeep提出了一些可行的技巧来为Gutenberg准备您的插件.

开发人员也可以使用新插件为Gutenberg进行构建

开发人员不仅专注于使现有插件与Gutenberg兼容,他们还计划使用新插件为Gutenberg构建.

新古登堡阻止嘉豪

一方面,您有大量的通用插件,它们仅添加了新类型的内容块。这些给古腾堡带来了更多页面构建者的感觉。您可以找到以下块:

  • 定价表
  • 感言
  • 团队成员
  • 等等.

例如,这是来自 可堆叠– Ultimate Gutenberg Blocks插件. 查看块编辑选项的详细程度:

新的古腾堡街区

WordPress.org已经有很多这样的插件。但是除了前面提到的Stackable插件之外,其他受欢迎的产品似乎还有:

还有一个叫做 联合区块 将自己推销为 "古腾堡针对内容营销人员的障碍".

我认为这种利基方法特别有趣。也许将来我们会在以下方面看到特殊的古腾堡积木:

书评区 插件是小众古登堡块如何成为事物的另一个迷你示例.

自定义字段如何与Gutenberg一起使用的示例

古腾堡自定义字段 是另一个有趣的插件,似乎吸引了一些关注.

它使设置与特定自定义帖子类型关联的自定义字段或字段组变得容易:

gutenberg编辑器自定义字段

然后,当您转到Gutenberg编辑器时,这些自定义字段将预先填充为块:

古腾堡自定义字段示例

许多人一直想知道自定义字段如何与Gutenberg一起使用-这是一个很有希望的例子,已经在野外出现了。您可以 点击此处了解详情.

主题开发人员如何解决向古腾堡过渡的三个例子

您刚刚看到了一些插件开发人员如何为Gutenberg进行构建的示例,但是主题如何??

主题开发人员似乎遵循两种主要途径来解决过渡问题:

  • 通过添加块的样式并支持古腾堡布局选项使古腾堡主题就绪
  • 使用古腾堡块构建主题内容

这里有一些画画的例子……

1.向古腾堡编辑器添加自定义样式

我们看到开发人员要做的一件非常整洁的事情是在实际的后端Gutenberg界面中添加主题样式。尽管BigBox WooCommerce的Spencer提供了机会,但却为创造真正的所见即所得体验打开了大门 详细说明了第三方块样式的一些问题.

例如,看看ThemeShaper的Ohana主题如何完全重塑所有Gutenberg内容,包括帖子标题:

古腾堡仪表盘风格

如果您想看到它的实际效果, 从GitHub下载Ohana主题. 此外,ThemeShaper还解释了他们如何实现此效果 在此博客文章中.

2.添加新的全角对齐选项

您会看到的另一个很酷的主题兼容性调整是添加了 广泛对准 支持. 本质上,这使您可以使某些块为全角。最常见的示例是插入全角图像.

同样,您可以在Ohana主题中看到这一点:

古腾堡的布局

为了使这种协调有效,主题作者需要明确声明支持.

3.使用块构建主题演示内容–例如方块主题

最后,“有机主题”中的这种方法非常酷:

封锁主题的 演示内容完全由古腾堡块构建.

正如马特(Matt)在古腾堡(Gutenberg)路线图中明确表示的那样,7月将包括探索 "将古腾堡扩展到岗位定制之外."

除了“块”主题之外,“数组主题”还具有一个 原子块主题 专为与上述Atomic Blocks插件集成而设计.

开发人员-这是为古腾堡准备主题的方法

如果您是主题开发人员,想知道如何使现有主题与Gutenberg兼容, 比尔·埃里克森(Bill Erickson)有出色的指南 到高点。和 主题支持 古腾堡手册的一部分 是另一个很好的资源.

肯定会有更多很棒的东西来

从上面的样本中,我希望您对插件和主题开发人员计划如何为Gutenberg进行构建有更好的了解。.

就个人而言,我知道写这篇文章使我对古腾堡的可能性更加兴奋.

在插件方面,使用块替换以前用短代码完成的所有操作对于可用性(尤其是对于临时用户)而言是一项重大改进.

主题开发人员可以采用自己的样式并合并块的方式也令人兴奋,特别是随着古腾堡(Gutenberg)将更多内容扩展到网站定制中.

现在到您这里–您是否偶然发现了插件或主题作者的任何出色示例,都在寻找有趣的方法来构建Gutenberg?让我们在评论中知道!

别忘了加入我们的速成班,以加快WordPress网站的速度。通过一些简单的修复,您甚至可以减少50-80%的加载时间:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map