WP实现Twenty Fourteen主题风格的侧边栏小工具标题

本域更新了侧边栏的小工具,它类似于早期Windows程序的任务列表。
这是基于区块小工具+自定义HTML实现的,而HTML和样式取自于Twenty Fourteen 2014主题附属插件的风格化小工具。因为2014默认的小工具标题只有文字并不美观,加上这个带图标的标题就感觉像是主题原生支持的那种。

我用的是传统小工具+古藤堡区块编辑的方式,方便更新,因此需要先添加一个「区块HTML」,然后另开浏览器窗口随便找一个能用古藤堡的地方(建议是单独的小工具收录页面)写篇内容,添加一个容器/组模块,把它转成全局同步的区块样板。
转成全局同步后,Ctrl+Shift+Alt+M 就可以看到这个全局同步区块的代码,拷贝它,粘贴到「区块HTML」的小工具中。

这时候就创建好「容器的符号链接」了。在小工具页面可以快捷的编辑它。

在这个「同步区块」中,添加「自定义HTML」块,分别填入HTML和CSS。

HTML部分,重点在Class也就是CSS类部分已经定义好的 widget-title ,加上这个就有了基本的2014主题插件的效果;然后要自行定义一个类,这里以apps举例,作用是为了调用Genericons的图标代码:

<h1 class="widget-title apps">
<a class="entry-format" href="https://v1sta.xyz/apps">程序</a>
</h1>

CSS部分也很简单,加一个before伪类,而content是Genericons的UTF代码。

.apps:before {
  content: "\f104";
}

这个代码可以下一份主题自带的Genericons(从DevTools扒),
用字符映射表之类的工具查看图标对应的Unicode代码。

例如F103是相册、F104是视频播放、F205是WordPress的社交媒体Logo、F419是菜单。不过可能是主题设计本身追求精简的原因,或者是版本的冲突,有部分在字符映射表找到的图标代码,是无法显示的。这部分无法显示的主要是一些较新的图标。

不喜欢古藤堡的话,用一般的HTML加自定义Style.CSS也能实现,就是更新内容会比较麻烦。都用WP了也就不计较代码耦合度了吧。
反而用区块编辑器其实还蛮方便的。

发表回复

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

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