使用代码深度定制 WordPress Sakurairo 主题

封面图：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 里。

正文默认插入全尺寸图片

正文默认插入全尺寸图片.php ==> 展开 / 收起

/**
 * WordPress 设置图片的默认显示方式（尺寸/对齐方式/链接到）
 * https://www.jiaidc.com
 */
add_action( 'after_setup_theme', 'default_attachment_display_settings' );
function default_attachment_display_settings() {
	update_option( 'image_default_align', 'left' );
	update_option( 'image_default_link_type', 'none' );
	update_option( 'image_default_size', 'full' );
}

WordPress 往正文添加大尺寸图片时，默认不是原分辨率，每次都要调整很麻烦。

来源：https://www.wpdaxue.com/image-default-size-align-link-type.html

使用：全自动生效，往文章中插入图片默认全尺寸。（自行保证图片的大小不要太大）

正文换行

正文换行.php ==> 展开 / 收起

function line_break_shortcode_callback() {
	return '<br>';
}
add_shortcode( 'br', 'line_break_shortcode_callback' );
add_shortcode( '换行', 'line_break_shortcode_callback' );

使用：

重要

怎么在正文中打出短代码（转义短代码）的呢？很简单，使用双倍的中括号：[[br]] 就行了。来源：https://havecamerawilltravel.com/escape-shortcodes-wordpress/。

禁用深色模式封面图变色

深色模式下， Sakurairo 会把首页封面大图的色调变得很奇怪。Github 已经有人提了 issue，但是作者似乎不认为这个是 bug 而是 feature……

禁用深色模式封面图变色.css ==> 展开 / 收起

/*恢复深色模式下封面大图，色调不改变
rgba(0,0,0,0.5) 最后的 0.5 是调整变暗的程度，范围 0-1，0 为 不变暗
此代码变暗会使封面图稍微褪色，有点蒙上一层雾的感觉，但是比原版的色调大变好多了。
*/ 
body.dark .centerbg {
background-blend-mode: multiply;
background-color: rgba(0,0,0,0);
}

效果：

修改深色模式背景变暗的颜色和透明度

修改深色模式背景变暗的颜色和透明度.css ==> 展开 / 收起

/*禁用section的颜色，防止双重混合导致过暗。
issue:
https://github.com/mirai-mamori/Sakurairo/issues/757 
*/
body.dark #main-container{
	background: unset !important;
}
/*修改页面和页脚颜色
rgba 前三个数字是叠加上去变暗的颜色
*/
body.dark .wrapper,
body.dark .site-footer{
	background: rgba(20,20,20,var(--theme-dm-background_transparency, 0.9)) !important;
}

微软文档风格的提示块-预设版

php：ms_docs_hint_preset.php

css：ms_docs_hint_preset.css

内置了五种不同的仿微软文档样式的提示块。原版详见：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]

注意

读者绝对不能做的严禁事项，如一定会带来破坏性结果的操作。

微软文档风格的提示块-通用版

如果上面五种内置的版本还不能满足需求，可以使用能高度自定义的通用版。

php：ms_docs_hint_general.php

参数

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 中启用

php：get_tag_directory.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 对应哪个标签用的。