基于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类 h-card ,使其声明为微格式信息。如图。

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

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

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

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

并通过 IndieWebify.me 的测试:

发表回复

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

To respond on your own website, enter the URL of your response which should contain a link to this post's permalink URL. Your response will then appear (possibly after moderation) on this page. Want to update or remove your response? Update or delete your post and re-enter your post's URL again. (Find out more about Webmentions.)