如何创建 WordPress 块模式以加快网站建设
已发表: 2020-03-28块模式对于所有 WordPress 用户来说都是一件大事,在这篇文章中,我将向您展示如何创建自己的块模式。
add_action( 'init', function() { register_pattern( 'NAME', [ 'title' => __( 'TITLE' ), 'content' => 'PATTERN' ] ); } );
两天前,我发布了一个视频,我向 WordPress 介绍了这个即将到来的概念,称为博客模式。 它现在是一种实验性的,我对此感到非常兴奋。 而且我认为,如果您将注意力集中在块模式的潜力上,那么您就会看到它的潜力,如果您有客户,可以帮助您更快地交付网站,使他们能够利用他们的网站。
所以我要给你看。 确切地说如何在此视频中创建块图案。 现在我们要做一些技术人员方面的事情,我知道这是非技术人员的 WordPress 频道,所以我会尽量让它简单,但你是最后会真正看到创建这些块模式之一是多么简单。
所以让我们继续看看吧。 所以这里是它讨论这个功能的新版本的页面。 只能让普通人创建块模式。 所以当我向下滚动时,它会为它提供那种模板。 所以它所涉及的只是创建一个叫做自定义函数的东西。
但别担心,我会让每个人都超级容易地做到这一点,但这就是那个小代码片段的所在。 现在,我将在下面的视频说明中提供一个链接。 它会带你到我的网站。 您将获得有关如何执行此操作的书面说明。 您可以将这段代码复制并粘贴到您自己的网站上。
好的,这就是我们需要的。 这是 Gutenberg 的一项新功能,您需要安装激活的 Gutenberg 插件,因此您需要最低版本 7.8,这是最近发布的。 现在,最终可能会在四到六个月内发生,也许到 2020 年夏末,这将默认包含在 WordPress 中,但现在,如果你想尝试一下,你将需要这样做,您将需要安装 Gutenberg 插件。
接下来你可以做的事情,这是可选的,如果你不知道如何为子主题添加自定义功能,而且我什至不再使用子主题,你可能想要使用这个免费插件,这是最好的免费插件之一。 我曾经遇到过,它被称为代码片段。 这将允许我们添加这个自定义功能和一种非常易于使用、易于管理的方式。
好的? 所以你会需要那个。 这是可选的。 这是一个名为 cadence blocks 的免费插件。 它的作用是为 Gutenberg 添加了许多页面构建器功能。 它允许您做的事情非常整洁。 您可以拖动列并调整其大小。 它有很多元素添加了很多页面构建器功能,但对于 Gutenberg,它是一个完全免费的插件。
好的。 现在让我们跳到我的网站。 所以这里有一个网站。 现在一切都准备好了。 如果你不知道如何安装插件,前几天有人因为我没有展示如何安装插件和视频而生我的气。 你去插件,你点击添加新的,然后在这里你搜索那个插件的名字,然后你点击。
下载,或者对不起,你现在点击安装,然后你激活它。 这是一个非常简单的过程。 所以我要点击我安装的插件,你可以看到我已经安装了 Gutenberg,这是可选的节奏块,这里是代码片段。 因此,我将继续激活代码片段,您可以看到它现在已在此处激活。
然后继续并单击代码片段,您将看到它附带的一些代码片段。 这是这个拨动开关,它被拨动了。 它们都已关闭,您实际上不需要保留默认情况下附带的这些。 您可以直接单击此处,您可以将它们全部删除,但我已经继续并在此处添加了一个称为块模式模板。
所以你会怎么做。 单击添加新的,您可以在我向您展示的那一小段代码中命名此块模式模板,就在此处,但我将在我的网站上为您提供修改后的版本。 您只需将其复制并粘贴到此处,然后单击“保存更改”。
你不会点击保存和激活,你会点击保存更改,我马上会告诉你为什么。 好的。 所以现在你要做的是创建这个块模式。 块模式只是一个保存的部分。 因此,如果您使用页面构建器,现在您知道可以保存部分,其中一些带有预先设计的部分,但用户体验,我认为古腾堡要好得多。
因此,您要做的是转到页面。 然后点击添加新的,你会想要命名它。 嗯,实际上让我摆脱了这次旅行。 您将要命名此块模式,这正是我们要创建此块模式的地方。 现在,我现在不打算创建块模式。
我将向您展示我已经创建的一个,它是 . 就在这儿。 所以这是我创建的块模式。 你可以看到它是这个部分。 它有这个多彩的背景。 我在这里有一个标题、一些副标题和几个按钮,我放了一个视频。所以我要把这个作为我的块模式,这样我只需点击两下鼠标,就可以将它添加到我网站上的任何地方。
所以我要做的是点击右上角,有这三个点。 它们有点难看,当你点击它时,这里有这个选项,上面写着代码编辑器。 因此,您将要单击代码编辑器,然后它会向您显示与使该博客成为块模式博客模式有关的所有代码。
好的? 因此,您将单击此处,然后单击计算机上的控制 a 或命令 a 以突出显示所有内容。 他们是新的一年。 把它放在你的剪贴板中。 所以我要控制C。所以现在它在我的剪贴板中。 所以现在我要做的就是离开这里。 实际上,如果你想离开这个视图,这里有一个小 X 表示退出代码编辑器,现在它将以正常方式显示它就在这里。
好的。 因此,如果需要,您可以将其保存为草稿,但您不需要它。 这只是为您创建这个块模式,您可以创建一个任何东西的块模式,它不必是一个块的东西。 例如,它可以是博客文章的完整模板。 好的,所以现在我要点击 w 它让我离开块编辑器的地方。
现在我将回到代码片段。 所以这里就是我创建块模式模板的地方。 我将单击克隆,现在它创建了它的克隆,然后我将单击标题开始编辑它。 所以对于标题,我将把它改成一个对管理有意义的标题。
所以对我来说,我只是要命名它。 有视频的英雄。 所以现在我知道当我将来查看列表时这是什么。 好的,这里有几件事您需要编辑。 三件事。 超级简单。 第一个是名字。 所以这可以是任何名称,它必须全部小写,没有空格或时髦的字符。
因此,我将继续并立即输入名称。 你可以看到我用视频将它命名为英雄。 接下来,在这里你需要输入一个标题。 所以我们正在替换这个词标题,这就是将要显示的内容。您正在查看博客模式列表,块,而不是博客块模式。 如果你注意到,你可以,这是友好的名字,所以它可以有空格。
呃,我不会把任何时髦的角色放在那里。 空间很好。 所以这就是这个列表a中要显示的内容,接下来就是模式a。 您只需将刚刚复制的内容粘贴到剪贴板中即可。 现在我要你记下一件事。 对于这些中的每一个。 我在正面和背面都留下了小撇号。
您会看到必须存在撇号。 如果您不小心将其删除,请立即将其放回原处。 好的。 我们只是在改变。 我们只是替换文本占位符。 所以在这里,我不想替换所有东西。 我只是想替换单词模式,所以我要突出显示它,然后我要粘贴我复制的内容。
它就在那里。 所以现在我要向下滚动,这次我要点击保存更改并激活。 所以现在它应该说片段更新和激活。 当我点击所有片段时,您现在可以看到这个带有视频的英雄已打开。 因此,将来对于其他块模式,我想去它所说的块模式模板并单击克隆并以这种方式制作该块模式模板。
这样我总是有模板在那里。 现在,如果您已经知道并且有自己的添加自定义函数的方式,那么您不需要代码片段以及所有这些东西,您可以将它放在您想要放置的位置。 如果您问我,这只是一种更容易管理它的方法。 好的,所以现在我要去我的页面点击添加新的,如果你想看的话。
块模式。 呃,这里是它的图标。 当你将鼠标悬停在它上面时,它会显示块模式。 当我点击它时,你会看到一些正在试验的块模式。 但是当你向下滚动时,你会看到我创建的块模式。 真正巧妙的是它会生成缩略图预览。
它动态地做到这一点。 您拥有的页面构建工具甚至无法做到这一点。 嗯,它使管理块模式变得更加容易。 所以,你可以在这里看到它说有模板的英雄。 现在,如果我想在我网站的任何地方使用它,只需单击鼠标。 然后就是这样。 那时我要做的就是开始更改一些文本,将链接更改为按钮。
我可以点击这里,我可以更改视频。 所以。 这就是您创建块模式的方式。 现在这是一件大事,我认为因为将要发生的事情是一个主题。 开发人员和插件创建者,他们将能够为您创建这些块模式,因此使用 WordPress 已经包含的本机块构建工具构建网站将变得更快、更快、更容易。
没有什么可买的,没有代码膨胀。 没有这些东西,而且。 什么让它更进一步。 您可以看到创建自己的块模式是多么容易,并且很容易在列表中看到它。 点击一个按钮,它就会放在那里。 因此,现在您可以考虑,当您拥有自己的块模式库时,构建网站会变得多么容易。
因此,如果您为客户创建网站并且不想使用页面构建器。 您只想使用内置的块生成器。 您可以创建自己的模式库。 你看到它是多么容易。 我能做到。 你能做到这一点。 嗯,您可以创建自己的块模式库,您可以从一个站点移动到另一个站点,并且您可以向您的客户展示他们如何构建它。
现在,这不仅适用于页面,还适用于帖子,并且不仅限于您看到的那个部分。 基本上可以在页面上创建的任何内容。 您可以制作块图案。 因此,如果您仅将块构建器用于博客文章,并且您希望在博客文章中反复使用某些元素来增强博客文章的布局,那么您可以为它。
这真的很容易。 一键即可使用。 事实上,整个博客文章模板。 因此,如果您为博客文章的各个部分遵循了一个公式,您可以将整个博客文章设置为块模板。 一键应用,然后您所要做的就是指向、单击和编辑。
所以在我们结束之前的最后一件事,这是一个新概念,在接下来的几个月里需要考虑。 立即尝试。 它不完全是雪人,雪人。 它还没有为黄金时段做好准备,因为如果你注意到了,嗯,我看到的唯一负面因素就是你在看博客的时候。 看到那里我又去了。
如果您正在查看块模式,它只是一个更高的文章列表,您必须滚动浏览,因此他们需要改进分类和组织的过程。 也许他们有某种界面让它更直观和更容易使用。 如果你将有 50 个不同的块。
图案。 所以他们只需要改进它。 代码上的一些语法可能会有所改变。 谁知道这最后什么时候出来。 但这段视频的全部目的只是向您展示即将发生的事情,以便您可以开始。 思考它如何应用于您的工作流程以及您作为网站建设者所做的事情。
无论如何,这就是我在这篇文章中为你准备的全部内容。 我希望您会喜欢这样深入了解 WordPress 的未来,如果您确实欣赏此视频或发现了一些价值,请考虑给它竖起大拇指并分享此视频,以便人们可以看到即将发生的事情。