封面图:https://www.pixiv.net/artworks/71187447
代码:https://github.com/Eterance/Useful-Code-Snippets-for-WordPress-Sakurairo
重要
代码均只针对 Sakurairo 主题开发,也只在 Sakurairo 主题上测试,可能有些地方依赖 Sakurairo 的 CSS 样式表。不保证能在其他 WordPress 主题上呈现出一样的 UI 效果。
所需插件
- 安装插件 Code Snippets。这个插件用于不修改主题文件的情况下添加 php、js 代码。
- 安装插件 Simple Custom CSS and JS。这个插件用于不修改主题文件的情况下添加 html、css 代码。(上一个插件也可以,但是要收费)。
如何使用
- php、js 代码放到插件 Code Snippets 里。如果文中 php 文件放在 Github 上,请不要复制开头的
<?php
和结尾的?>
(为了语法高亮而写上去的)。 - html、css 代码放到插件 Simple Custom CSS and JS 里。
正文默认插入全尺寸图片
WordPress 往正文添加大尺寸图片时,默认不是原分辨率,每次都要调整很麻烦。
来源:https://www.wpdaxue.com/image-default-size-align-link-type.html
使用:全自动生效,往文章中插入图片默认全尺寸。(自行保证图片的大小不要太大)
正文换行
使用:

重要
怎么在正文中打出短代码(转义短代码)的呢?很简单,使用双倍的中括号:[[br]] 就行了。来源:https://havecamerawilltravel.com/escape-shortcodes-wordpress/。
禁用深色模式封面图变色
深色模式下, Sakurairo 会把首页封面大图的色调变得很奇怪。Github 已经有人提了 issue,但是作者似乎不认为这个是 bug 而是 feature……
效果:

修改深色模式背景变暗的颜色和透明度
微软文档风格的提示块-预设版
内置了五种不同的仿微软文档样式的提示块。原版详见:https://learn.microsoft.com/zh-cn/contribute/markdown-reference
下面是使用方法和示例。
备注
标签:[msnote] 或者 [ms-note] 或者 [mspurple]
参数
- title:提示的标题。默认值为“备注”。
示例
[msnote]比其他正文稍微重要一点的信息,读者应当花点注意力在此,但是实际上读者常常不甚在意。 [/msnote]
备注
比其他正文稍微重要一点的信息,读者应当花点注意力在此,但是实际上读者常常不甚在意。
提示
标签:[mstip] 或者 [ms-tip] 或者 [msgreen]
参数
- title:提示的标题。默认值为“提示”。
示例
[mstip]一些可选的信息。如果读者照做会使结果更好,但是不做也没什么。因此,读者往往也是跳过这些提示。 [/mstip]
提示
一些可选的信息。如果读者照做会使结果更好,但是不做也没什么。因此,读者往往也是跳过这些提示。
重要
标签:[msimportant] 或者 [ms-important] 或者 [msblue]
参数
- title:提示的标题。默认值为“重要”。
示例
[msblue]一些比较重要的信息,可能包含了一些比较重要的步骤或者知识点。不过,如果滥用会使读者将其当成“不重要”。[/msblue]
重要
一些比较重要的信息,可能包含了一些比较重要的步骤或者知识点。不过,如果滥用会使读者将其当成“不重要”。
警告
标签:[mswarning] 或者 [ms-warning] 或者 [msyellow]
参数
- title:提示的标题。默认值为“警告”。
示例
[mswarning]警告读者操作背后的风险,需要多加小心避免出错。[/mswarning]
警告
警告读者操作背后的风险,需要多加小心避免出错。
注意
标签:[mscaution] 或者 [ms-caution] 或者 [msred]
参数
- title:提示的标题。默认值为“注意”。
示例
[msred]读者绝对不能做的严禁事项,如一定会带来破坏性结果的操作。[/msred]
注意
读者绝对不能做的严禁事项,如一定会带来破坏性结果的操作。
微软文档风格的提示块-通用版
如果上面五种内置的版本还不能满足需求,可以使用能高度自定义的通用版。
标签
[mshint] 或者 [ms-hint]
参数
- icon:提示的图标。可用的图标见:https://fontawesome.com/search?o=r&m=free
- title:提示的标题。默认值为“提示”。
- lightcolor:亮色。将作为浅色模式下的背景颜色、深色模式下的图标和标题文本颜色。默认值与 `备注` 相同('#EFD9FD')。
- darkcolor:暗色。将作为深色模式下的背景颜色、浅色模式下的图标和标题文本颜色。默认值与 `备注` 相同('3B2E58')。
- radius:外边框圆角半径。默认值为 8。
示例
[mshint title="这里是标题" radius=80 darkcolor="#00146C" lightcolor="#2D81D6" icon="fa-solid fa-note-sticky"] 这里是自定义。[/mshint]
这里是标题
这里是自定义。
获取标签目录
需要先使用 Composer 将 overtrue/pinyin 安装到当前主题上。 参见:WordPress 使用 Composer 安装第三方依赖,并在主题 functions.php 中启用
标签:[tagdir] 或 [标签目录]
描述:将所有标签按照首字母分类,并且排序。支持中文标签。(这就是为什么要安装中文转拼音库,因为 php 的 strcmp
函数只能正确排序英文字母,对中文无能为力)
使用:直接在页面或者文章上打 [tagdir] 即可。会自动更新标签。
[tagdir order="asc" orderby="name"]
效果见 标签目录 。
参数:
- orderby:每个字母分类下的排序顺序,可选为 “name”(按照名称排序,默认)和 “count”(按照被引用的文章数量排序)。
- order:排序顺序。可选 “asc” 或 "ASC"(升序,默认)和 “desc” 或 "DESC"(降序)。
- show_count:是否在标签后面显示被引用的文章数量。可选 true (显示,默认)和 false (不显示)。
友情链接
Sakurairo 主题自带的友情链接模板过于紧凑、不能排序、显示不了长文本。因此自己写了一个。适配移动端视图。当然,也可以做除了友链之外的其他链接。
php:friend_link.php
css:friend_link.css
使用示例:
[flink link="https://blog.baldcoder.top/" img="https://blog.baldcoder.top/wp-content/uploads/2023/06/NFS11-256.png" name="Eterance的小窝" desc="天文计算机游戏,一条懒狗罢了" date="时间诞生之前" star="勾陈一"]
参数:
- link:友链的链接。
- img:友链的头像。
- name:友链的名称。
- desc:描述
- date:友链添加时间
- star:独特字段
效果见 友情链接 页面。
专栏链接
WordPress 可以使用标签伪装成“专栏”。
php:column_link.php
css:column_link.css
适配移动端视图。
使用示例:
首先找到想要伪装成专栏的标签的 ID 号:

(可选)然后点进去编辑别名(也就是网址里显示的名字)、描述和图像,并且保存。
[column_link id=72 name="大内网战略"]
[column_link id=59 name="WordPress 加速系列"]
[column_link id=86 name="WordPress 杂学"]
效果见 专栏。
参数:
- id:标签的 id。
- name:标签的名字。实际上用不到,只是为了方便在页面里区分 id 对应哪个标签用的。
Comments 2 条评论
Warning: Trying to access array offset on value of type null in /www/wwwroot/wordpress/wp-content/themes/Sakurairo-main/functions.php on line 367
Warning: Trying to access array offset on value of type null in /www/wwwroot/wordpress/wp-content/themes/Sakurairo-main/functions.php on line 367
Warning: Trying to access array offset on value of type null in /www/wwwroot/wordpress/wp-content/themes/Sakurairo-main/functions.php on line 368
Warning: Trying to access array offset on value of type null in /www/wwwroot/wordpress/wp-content/themes/Sakurairo-main/functions.php on line 368
大佬,请问封面的视频能不能自动播放啊
Warning: Trying to access array offset on value of type null in /www/wwwroot/wordpress/wp-content/themes/Sakurairo-main/functions.php on line 367
Warning: Trying to access array offset on value of type null in /www/wwwroot/wordpress/wp-content/themes/Sakurairo-main/functions.php on line 367
Warning: Trying to access array offset on value of type null in /www/wwwroot/wordpress/wp-content/themes/Sakurairo-main/functions.php on line 368
Warning: Trying to access array offset on value of type null in /www/wwwroot/wordpress/wp-content/themes/Sakurairo-main/functions.php on line 368
@Venlacy 我见到过别人博客有,但是我不清楚怎么实现的,而且放视频对小水管和CDN压力有点大