使用 Meta Box 的 MB 视图插件构建自定义模板

已发表: 2020-03-19

Meta Box 上周发布了它的 MB Views 插件。 新的扩展允许开发人员在舒适的 WordPress 管理员中构建自定义模板。 目标是提供一个易于使用的界面,用于在不编辑主题文件的情况下输出自定义字段,但其灵活性推动了全站点编辑的界限。

快速入门: MB Views 提供了可靠的开发人员体验,但对于那些不熟悉代码的人来说有点不够友好。

我一直很喜欢 Meta Box 团队使用其核心插件和扩展所做的事情。 该项目的开发人员创建了一个文档齐全的代码库,编写了可靠的文档,并且通常会关注其他人失败的细节。 MB Views 也不例外。 激活扩展后几分钟,我就在测试站点的前端设置并推出了自定义视图。

该界面非常简单,几乎可以立即使用,并且具有足够的灵活性,可以从 WordPress 管理员构建几乎任何东西。

总体而言,该团队的新附加组件非常值得其中一个可用的高级捆绑包的价格,价格在 79 美元到 349 美元之间。 并非没有一些小问题,但这是 1.0 版本的预期。

强大的前端编辑工具

MB Views 插件的视图代码编辑器的屏幕截图。
使用插件的视图编辑器创建自定义视图。

我使用视图编辑屏幕的体验感觉很自然。 代码编辑器使用 Code Mirror 及其 Oceanic Next 主题。 它内置了自动选项卡和自动完成功能,因此感觉就像大多数离线编辑器一样。 开发人员应该对快速构建自定义视图感到宾至如归。

因为这些天我主要使用 Tailwind CSS,所以我能够在几分钟内构建一个虚假的电子邮件注册表单,并使用可用的视图设置将其直接显示在我的帖子下方。

使用 MB Views 插件定制的电子邮件注册表单的屏幕截图。
带有 MB 视图的定制电子邮件注册表单。

代码编辑器有一个“新建字段”按钮,可在屏幕右侧打开一个滑出框。 它允许用户插入帖子、站点、用户和查询字段。 这些选项还包括通过 Meta Box 插件创建的自定义字段。

除了编辑模板,用户还可以直接从视图代码编辑器添加自定义 CSS 和 JavaScript。

这些字段的输出都通过现代 PHP 模板引擎 Twig 处理。 许多 PHP 开发人员已经熟悉 Twig 并对其语法感到满意。 通过这个系统,插件用户不仅限于 HTML。 他们可以使用条件和循环来自定义其视图内容的输出。

为了获得更好的开发人员体验,最好能看到插入新字段的自动完成选项,而不是单击“新字段”按钮然后单击特定字段。 最有可能的是,随着时间的推移,开发人员会开始记住这些字段并简单地输入它们。 自动完成对于自定义字段来说是一个不错的选择。

MB Views 插件的设置元框的屏幕截图。
查看设置和条件。

MB Views 真正闪耀的地方在于它的视图设置。 该插件允许视图接管主题页眉和页脚之间的整个页面,或者只是内容区域。 它允许用户选择在单个帖子、存档页面或使用其内置短代码的自定义内容上显示视图。 用户可以根据可以以各种方式分组的条件进一步细分视图出现的位置。 它可以根据需要简单或复杂。 它并不完全与自定义 PHP 条件条件相提并论,但它足以涵盖大多数用例。

如果有人想尝试一下,他们可以将 MB Views 用作整个站点的编辑器。 唯一真正的要求是用页眉和页脚构建他们的主题。 在某些时候,也许该插件将允许用户接管整个页面布局,从而有效地使主题变得不必要。

问题和未来的改进

版本 1.0 是关于将某些东西送到用户手中。 这是开发人员获得一些最有用的反馈的时候,所以我希望随着开发人员在未来继续构建插件,以下问题将得到解决。 我没有遇到任何重大障碍,但我确实遇到了一些小问题,并且有一些改进的想法。

我遇到的第一个问题让我最初认为该插件根本不起作用。 我选择在单个帖子上显示我的自定义视图。 这很容易通过视图设置来完成。 您选择“单数”类型。 然后,在第一个下拉选择中选择“发布”。 我以为这会使模板出现在所有帖子上。 但是,保存后什么也没有发生。 我的自定义内容都没有出现在前端。 问题是有第二个下拉选择,默认情况下没有填充值。 我需要选择一个“所有帖子”选项。 这是一个快速解决的问题,但这就是为什么好的默认值在插件开发中如此重要的原因。

没有修订支持。 对于 WordPress 管理员中的代码编辑器,用户可以将其代码恢复到早期版本是有道理的。 如果用户只使用少量代码创建视图,这将不是问题。 但是,该插件甚至允许用户在主题的页眉和页脚之间创建整个页面布局。 这有时意味着大量的代码和后退更改的需要。

MB Views 提供了一个[mbv]简码,用于在简码就绪区域(例如帖子内容)内输出视图。 但是,在块编辑器中没有等效的块。 在这一点上,有一个简码但没有块似乎是一个重大的疏忽。 简码需要缓慢而痛苦地死去。

视图管理屏幕也可以使用一点爱。 至少看到视图类型的列会很高兴。 随着自定义视图列表的增长,可能很难一目了然地确定每个视图的使用位置。

用户友好性和未来

您想获取 Meta Box 字段的值并将它们放在您的前端模板中,但是您对编码不太熟悉并且不想接触主题文件?

MB Views 的开场描述声称该插件面向不熟悉编码的用户。 我不确定普通用户是否可以在不学习一些编码知识的情况下利用它。 该界面主要面向开发人员。 从字面上看,视图编辑器是一个代码编辑器。 它确实有一个易于点击的字段插入器,但如果不熟悉 HTML 和 CSS,这些字段通常是无用的。

该工具擅长其功能,但在块编辑器时代,它几乎感觉像是权宜之计。

为了使 MB Views 成为更有用的最终用户工具,它需要过渡到更多带有设计选项的可视化、点击式界面。 否则,它将主要停留在可以自定义视图输出到完美的开发人员的土地上。

如果团队想要专注于出色的开发人员体验,我不一定认为 MB Views 必须朝这个方向发展。 然而,对于那些不太熟悉代码的人来说,它目前并没有达到它对友好的要求。

我们可能还需要至少一年的时间才能通过块系统获得完整的站点编辑体验。 Meta Box 团队的努力可能最好用于在该系统中集成视图编辑。 MB Views 插件对于当今许多 Meta Box 插件用户来说是一个有用且必要的工具,但在全站点编辑进入核心之前,它可能没有时间获得关注。 届时,插件团队将需要已经过渡到使用 WordPress 的用户体验完全不同的世界。