基于WP区块小工具添加h-card MF2微格式信息卡

要让IndieWeb生态的解析器正确识别网站的信息,需要有一个h-card格式的MicroFormats2微格式卡片。

可以使用 IndieWebify.me 提供的工具验证。

但是WordPress本身不支持MF2微格式,适配了MF2微格式的主题也相当有限(而且我真的很喜欢自行修改的2014主题),而在WP的插件库也很少有类似的插件,自行开发子主题或插件的难度非常高、且不易维护。

对于一般人而言,使用古腾堡的区块小工具不失为一种简易的方式。
不过,直接在主题外观的小工具页面编辑区块是很困难的行为,若是使用「旧版小工具」的附加插件改变主题页面,则几乎没有编辑选项。

对于这个情况,古腾堡提供了一种类似软链接方式的「可同步区块模板」,在一处编辑,即可同步到所有位置。

在全区块主题中,这是非常有用的功能;而如果使用旧版小工具,也可以在某一页面创建好区块模板,随后切换到代码编辑器(快捷键为Ctrl+Shift+Alt+M),将这个区块模板的代码复制出来,粘贴至「区块」小工具中。

通过使用行列/堆叠以及组合区块,排列出横板平铺图标视图的信息卡。接下来稍微有些棘手,需要将其转换为HTML代码,然后在对应的组件中填写h-card对应的CSS class类。

排版大纲如下:

  • 区块行
    • LOGO/头像图片
    • 间隙
    • 区块堆叠
      • 名称
      • 简介

在行或组部分(大纲位置大于子元素的组),添加CSS类 ,使其声明为微格式信息。

CSS类如下:

hcard-display h-card vcard u-author

随后是添加需要显示的内容,主要是图片和文字。这里首先编辑好内容,随后需要转换为HTML内容,确保 h-card属性 能够填入对应的HTML元素当中。

其中要声明为主要的信息卡,那么 rel="me" 属性也是必不可少的。

然后将其HTML设定为aside以便于识别。

当然也可以直接抄下面这段HTML,但是请务必对于HTML结构有一个清晰的认知。

以本域为例,我将其放置在页脚小工具的部分。

并通过 IndieWebify.me 的测试:

另外,介绍另一种方式是使用 microformats.org 的 hcard 创建器,同样是基于HTML生成,填写好各种对应的信息之后,将其作为HTML小工具添加至侧边栏或其他地方。相较于上述的方案,这个方式需要自行编辑HTML,因此美观度也需要自行调整。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

本站接受Webmention方式的回复信息接收,您可撰写一篇包含本文URL的文章,并将您的文章的URL填写至下表。 随后,您文章对本帖的回复内容将显示在页面上(可能需要审核)。若需更新或删除回复内容,请再次输入您的文章的URL。 此外,若您使用WordPress的插件,它可能是自动发送的,无需人工介入。 了解 Webmention 提及技术