古腾堡 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

相关推荐

  • WordPress 屏蔽恶意搜索,防止被搜索引擎收录恶意搜索结果

    最近发现一个客户的网站被别人进行了恶意搜索攻击,导致他的网站域名下被收录了很多不良信息数据,如下图所示: 什么是恶意搜索攻击? 这种恶意搜索攻击,其实非常简单,就是通过既定的网址结构不断对网站发起不良关键词搜索访问,比如WordPress的搜索网址结构为 域名/?s=搜索词,而且可能还会顺便将访问的地址推送到各大搜索引擎,加快这些恶意网址的收录。这样,你的网…

    2023年9月6日
    1710
  • WordPress入门 之 新建页面和管理页面

    文本是《WordPress 入门教程(共19篇)》专题的第 8 篇。阅读本文前,建议先阅读前面的文章: WordPress的页面和文章类似,也是一种内容发布功能,但是它们又有所不同,下面非鱼简单介绍一下。打开后台 – 页面 – 新建页面,就可以看到如下界面: 页面和文章的异同 页面和文章类似 —— 它们都有标题、正文,以及附属的相关信息。但是页面类似永久的文…

    2023年8月29日
    1680
  • WordPress 块样板是什么,如何使用它?

    块样板(Block Patterns)首次在WordPress 5.5 中引入,为古腾堡编辑器成为全面的页面构建器开辟了道路。他们帮助用户以最少的时间、精力和技术专长构建复杂的 WordPress 网站。 在本文中,我们将向您展示 WordPress 块样板的工作原理以及它们与可重用块的区别。您还将学习如何在 WordPress 块编辑器中使用样板来更轻松地…

    2023年8月29日
    1910
  • WordPress 插件开发教程 Part 1 – WordPress 插件简介

    本部分教程包括以下内容: 了解什么是插件 使用可用的 WordPress APIs 插件的加载顺序 热门插件示例 分别插件和主题功能上的不同 安装和管理插件 了解插件的类型 WordPress 是现在很火的开源免费的内容管理系统。它火的一个重要原因就是你可以方便的通过插件来自己定制它。WordPress 为开发者提供了一个十分方便且强大的平台。 首先明白插件…

    wordpress 2023年9月5日
    2170
  • 谷歌SEO:反向链接作为排名信号的影响比过去要小

    在 Google SEO 办公时间视频中,一位 Googler 回答了一个关于反向链接和排名的问题,并提供了一个有趣的事实,即反向链接作为排名信号的影响比过去要小。   反向链接排名信号 链接和锚文本信号使谷歌在首次推出时成为比竞争对手更好的搜索引擎。 SEO 过去主要是关于优化标题、标题和带有关键字的内容。 在 Google 变得重要之后,人们意…

    2023年8月29日
    2180
关注微信