古腾堡 Gutenberg 开发教程:为区块创建自定义类别

当您为自定义古腾堡块创建 block.json 文件时,您需要向它提供一个category参数。

默认情况下,我们可以使用默认的之一:

  • text– 文本,
  • media– 媒体,
  • design– 设计,
  • widgets– 小工具,
  • theme– 主题,
  • embed– 嵌入。

但借助 block_categories_all过滤器(如果您仍在使用 WordPress 5.8.0版本或更低版本,可用 block_categories ),您可以轻松创建新的块类别。

例如,让我们看一下 Jetpack 插件创建的这个自定义类别:

由 Jetpack 插件创建的自定义块类别

这是我们的自定义类别:

如何在古腾堡中创建自定义块类别
您可能会注意到,我们的自定义类别出现在“媒体”块类别之后、“设计”类别之前。我还将在教程中向您展示如何更改下面的块类别顺序。

如果您想知道我在“Blocks by Misha”类别中使用了哪些积木:

  • “Subscription”——这个块是我关于为古腾堡开发自定义块的深入视频课程的一部分。
  • “Carousel” – 这是我的插件,添加了一个简单的基于 Swiper 的轮播块。
  • “Map”——这是我的另一个插件,添加了谷歌地图块。

好吧,我们最后添加一个块类别 – 就这么简单:

  1. add_filter( 'block_categories_all', 'misha_new_block_category' );
  2. function misha_new_block_category( $block_categories ) {
  3. $block_categories[] = array(
  4. 'slug' => 'misha-blocks',
  5. 'title' => 'Blocks by Misha'
  6. );
  7. return $block_categories;
  8. }

如何重新排序块类别

只需几个简单的步骤,我们就可以开始了:

  1. 使用新的类别元素创建一个数组,该元素也是一个数组。使用任意随机字符串作为数组元素索引。
  2. 决定您的自定义类别应出现在什么位置。不要忘记,数组中的计数从 开始0,因此如果您设置2为类别顺序,那么它将出现在第 3 个位置。
  3. 使用array_splice()函数将具有默认块类别的数组拆分为两个数组,然后使用+运算符将​​所有三个数组合并为一个数组。
  4. 用于array_values()重置数组索引,因此其中不再有“字面上的任何东西”键。

完整代码:

  1. add_filter( 'block_categories_all', 'misha_new_block_category' );
  2. function misha_new_block_category( $cats ) {
  3. // create a new array element with anything as its index
  4. $new = array(
  5. 'literallyanything' => array(
  6. 'slug' => 'misha-blocks',
  7. 'title' => 'Blocks by Misha'
  8. )
  9. );
  10. // just decide here at what position your custom category should appear
  11. $position = 2; // 2 – After Text and Media, so technically it is a 3rd position
  12. $cats = array_slice( $cats, 0, $position, true ) + $new + array_slice( $cats, $position, null, true );
  13. // reset array indexes
  14. $cats = array_values( $cats );
  15. return $cats;
  16. }

对旧版本的 WordPress 使用 block_categories

您还可以使用version_compare()函数来选择合适的过滤器挂钩,但对我来说这看起来不是一个非常干净和好的解决方案。

  1. if ( version_compare( get_bloginfo( 'version' ), '5.8', '>=' ) ) {
  2. add_filter( 'block_categories_all', 'misha_new_block_category' );
  3. } else {
  4. add_filter( 'block_categories', 'misha_new_block_category' );
  5. }

好了,感谢 Misha 的教程。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 lk2768783601@gmail.com 举报,一经查实,本站将立刻删除。

(0)
上一篇 2023年9月4日 下午4:03
下一篇 2023年9月4日 下午4:07

相关推荐

  • 17个超实用 WordPress SEO 初学者技巧

    如果您正在为初学者寻找终极 WordPress SEO 指南,那么您来对地方了。我们的 WordPress SEO 教程将重点介绍 SEO 的所有基本方面以及如何根据本指南优化您的网站。 顶级博主不仅具有出色的写作技巧,而且还对他们在搜索引擎中的内容表现负责。 想象一下,您写了一篇很棒的博客,如果人们无法阅读它,它的价值何在。并将其提供给合适的受众,SEO …

    2023年8月29日
    1830
  • WordPress入门:手动更新WordPress核心、主题和插件

    文本是《WordPress 入门教程(共19篇)》专题的第 11 篇。阅读本文前,建议先阅读前面的文章: 你可以在WordPress官网下载到最新版的WordPress安装包。如果不能在后台直接更新WordPress,那下载到的WordPress安装包又如何手动更新到服务器?今天,就来简单介绍一下如何手动更新WordPress核心、主题和插件。 手动更新Wo…

    2023年8月29日
    1590
  • 成为合格的WordPress开发人员需要学习哪些知识?

    随着WordPress成为最受欢迎的内容管理系统,总会有用户寻找开发人员来帮助增强他们的网站。成为WordPress开发人员,您可以通过工作获利或免费共享自己的作品。 成为合格的WordPress开发人员需要学习哪些知识? 不管你想通过什么方式,都必须首先了解这方面的基本知识。今天,倡萌将告诉您,可以使用WordPress开发什么,成为合格的WordPres…

    2023年8月29日
    1470
  • WordPress入门 之 安装主题和插件

    文本是《WordPress 入门教程(共19篇)》专题的第10篇。阅读本文前,建议先阅读前面的文章: WordPress的强大,很大程度是因为它良好的扩展和众多的主题、插件支持。今天就简单介绍一下WordPress安装主题和插件的方法。 WordPress安装主题 WordPress可以通过3种常见的安装方法来安装 方法一:在线搜索安装 访问后台 – 外观 …

    2023年8月29日
    1320
  • WordPress 如何更改JPEG图片的压缩质量

    默认情况下,WordPress会对上传的图片进行压缩,以免获得更好的性能和用户体验。长久以来,默认的压缩质量为 90%,直到 WordPress 4.5以后,就降低为 82% 了,为的是优化图片在手机端的加载速度。但是并不是所有的用户都希望如此。最近就有客户反馈说,为什么我上传的图片都被压缩了,模糊了。今天倡萌就分享下如何更改WordPress对JPEG图片…

    wordpress 2023年9月6日
    1770
关注微信