首先看一下WordPress的古腾堡

新的古腾堡(Gutenberg)编辑界面是今年WordPress 5的一项重大更改,它将影响WordPress插件开发人员,主题设计师和网站创建者。

在本视频中,我将向您展示如何在现有网站上将Gutenberg设置为插件,以及如何开始使用Gutenberg编辑器创建内容。

继续学习,您将直接体验到古腾堡的一些新功能。

首先看一下WordPress的古腾堡

WordPress Gutenberg简介

了解古腾堡的一个很好的起点是WordPress Codex中古腾堡页面 。 它为您概述了古腾堡(Gutenberg)的全部内容,并告诉您如何帮助改进它并建立未来。 您可以通过通过反馈问卷发送您的反馈来做到这一点,也可以用来寻求支持。

您也可以查看测试要求以测试Gutenberg。 遵循这些要求很重要的原因是,每个人都必须以一致的方式进行测试,从而帮助开发Gutenberg的团队将其尽可能地提高。

Gutenberg尚未成为WordPress核心的一部分,但它将在将来的版本中。 请记住,在此期间它可能会发生变化-部分是由于反馈,部分是由于不断努力以使其达到最佳状态。 但是与此同时,让我们看一下如何立即在您的网站上获取Gutenberg,并快速概述它的外观。

如何安装古腾堡插件

您现在可以通过插件获取Gutenberg的方法。 因此,以常规方式安装它-转到“ 插件”>“添加新内容” ,搜索“ Gutenberg”,找到后,单击“ 立即安装” ,然后单击“ 激活”

既然您已经安装了插件,那么Gutenberg编辑器将在您的站点上处于活动状态。

古腾堡编辑器的工作方式

我将在我的网站上打开一个现有的帖子,以向您显示在Gutenberg中帖子编辑屏幕的外观。

在古腾堡编辑器中编辑帖子

您可以看到,这看起来与以前大不相同。 当我将鼠标悬停在事物上时,图标将在右侧显示三个点,向我显示内容中的每个元素都变成了一个块。

如果单击某个块,我会发现一些看起来更加熟悉的东西-就像经典编辑器中的旧厨房水槽。 但是您会看到您没有在代码视图和普通视图的顶部获得标签。

厨房水槽编辑选项

在右侧,我有一些看起来有些不同的集合,这些集合以前是元框,过去在旧的编辑器中看起来很独立。 这看起来更像是定制程序。 因此,如果您一直在使用WordPress中的定制程序,则此布局对您来说很熟悉。 您可以单击每个标题以展开相应的部分。 总的来说,它使事情变得更加整洁并减少了滚动的需要。

如何添加和移动块

您可以通过单击左下角的加号图标来添加更多块,然后出现一个菜单,向您显示不同的选项。

新增方块

如果您是经验丰富的WordPress用户,尤其是如果您是WordPress开发人员,那么您可能会为此感到恐惧。 但是,我可以看到,对于经验不足的用户和视觉更加介意的人,这将使事情看起来容易得多。

古腾堡(Gutenberg)还使您更轻松地移动事物。 因此,我将从帖子中的某些现有内容中创建一个段落块。 完成此操作后,我可以选择我的块并通过单击左侧的箭头上下移动它们。

移动块

当您在站点中移动内容并以可视方式处理内容时,这为您提供了很大的灵活性。

在古腾堡中使用列表和代码

还有其他类型的块。 例如,列表本身就成为一个块。

首先,通过单击控件图标并从出现的菜单中选择“ 转换为块” ,将现有内容拆分为块。

转换为块

然后,古腾堡(Gutenberg)分离出我的标题和各个段落,并为每个列表创建单独的块。 因此,将您现有的帖子转换为与Gutenberg兼容的内容确实非常快捷。

您会记得一开始,我说过在顶部没有用于文本视图和代码视图的选项卡。 取而代之的是,您可以只为单个块编写代码。 因此,如果单击右侧的控件图标,则可以选择Edit as HTML 。 然后,它在代码视图中显示该块,我可以在该特定块中编辑代码。

在块中编辑代码

如果您像我一样,必须在很长的帖子后面进行深入的研究,那么试图找到您一直在使用的文本可能会非常混乱,因此这变得非常多使用特定代码更容易。

因此,积木真正使古腾堡成为了它,我希望这使您对积木及其工作原理有所了解。 块基本上等同于HTML中的元素。 如果要查看文件的输出标记,您会发现每个标记都处于同一级别。 因此,您具有标题,段落和列表,它们在HTML中都处于同一级别。

您也可以使用从带有三个点的图标中弹出的相同控制菜单来拆分和合并块,并且顶部还有一个“ 撤消”按钮,这确实很有用。 使用列表,您可以轻松地在不同级别的缩进之间,项目符号列表和编号列表之间切换,只需使用相关块上方的菜单即可。

缩进清单

阻止设置

现在,我已将内容转换为单独的块,也可以单击右侧边栏中的“ 块” ,然后更改每个块的设置。

更改块设置

您还可以通过单击块旁边的控制菜单并选择“ 显示高级设置”或“ 隐藏高级设置”来显示和隐藏设置工具栏。 如果将其隐藏起来,将获得良好的,干净的编辑体验。

隐藏设置

结论

这样一来,您就可以大致了解在Gutenberg中使用块进行的主要操作。 您可以添加块,更改块的类型,还可以编辑基础代码。 您可以复制块,可以合并它们,可以将它们拆分,还可以在文档中四处移动。

我还没有在现场直播中使用过Gutenberg,但是通过本课程的学习使我对Gutenberg的工作原理以及它如何帮助我在WordPress网站中编辑自己的内容感到非常兴奋。

希望古腾堡(Gutenberg)对您有所帮助,并希望您喜欢它的主要功能快速入门。

学习WordPress

通过我们的完整指南, 学习 如何使用WordPress或陷入困境并学习WordPress开发订阅Envato Elements,即可免费查看这些指南中的所有课程。 只需每月低廉的月费,您就可以无限制地访问我们不断发展的图书馆,其中包含1,000多个视频课程和Envato Tuts +上行业领先的电子书。

另外,您现在可以从庞大的Envato Elements库(拥有500,000多种创意资产)中进行无限下载。 使用独特的字体,照片,图形和模板进行创建,并更快地交付更好的项目。

翻译自: https://code.tutsplus.com/tutorials/first-look-at-wordpress-gutenberg--cms-31036

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是两种在WordPress中创建自定义古腾堡块的方法: 1. 使用古腾堡区块开发工具[^1] 古腾堡区块开发工具是一个用于创建自定义古腾堡块的WordPress插件。您可以按照以下步骤使用该工具: - 在WordPress后台,导航到“插件”>“添加新插件”。 - 在搜索栏中输入“古腾堡区块开发工具”并点击“安装”按钮。 - 安装并激活插件后,您将在WordPress后台的侧边栏中看到“区块开发”选项。 - 点击“区块开发”选项,然后点击“创建新区块”按钮。 - 在弹出窗口中,输入您的自定义古腾堡块的名称和描述,并选择一个图标。 - 点击“创建”按钮后,您将进入古腾堡区块编辑器,可以在其中定义您的自定义古腾堡块的内容和样式。 - 完成后,点击“保存”按钮并将您的自定义古腾堡块发布到您的WordPress网站。 2. 使用自定义插件开发 如果您对编程有一定的了解,您还可以使用自定义插件开发来创建自定义古腾堡块。以下是一些步骤: - 创建一个新的WordPress插件,并在插件文件夹中创建一个新的PHP文件。 - 在PHP文件中,使用add_action函数将您的自定义古腾堡块添加到WordPress古腾堡编辑器中。 - 在古腾堡块的回调函数中,定义古腾堡块的内容和样式。 - 将插件文件夹上传到您的WordPress网站的wp-content/plugins目录中。 - 在WordPress后台,导航到“插件”>“已安装的插件”,找到您的自定义插件并激活它。 - 现在,您可以在古腾堡编辑器中使用您的自定义古腾堡块了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值