不少主题自带自定义顶部图片功能,简而言之便是增加了函数 register_default_headers()custom_header_support() 以及在 header.php 中调用了 header_image()

下午有点空,想起前一阵子苹果发布 macOS Mojave 主题时自带的特色壁纸 Mojave Desert,可随着系统时间自动变换沙漠的日夜景色,相当酷炫,于是打算在 WordPress 的自定义头部图片实现类似的不同时间展示不同图像的效果。

实现过程还是有点痛苦的,因为很久没搞代码了,不免手生,最发指的是一个 if-elseif-else 搞了很久一直出错,结果发觉是低级错误(忘写 endif)弄昏了头。其实最终代码非常简单。

1、首先确认自己主题自带自定义头部图片功能,特征是 function.php 或其他自定义文件中有上面所述两个函数。

2、在 function.php 中插入如下代码:

3、在 header.php 中找到<header> 头标签,并按如下代码根据自己主题相应修改:

4、下面是转换 Mojave 图片的过程(你也可以用自己喜欢的其它图库来实现)。如果系统已升级为 macOS Mojave,按照下图路径找到 Mojave.heic 无损压缩图。

Mojave.heic

Mojave.heic

将 Mojave.heic 用网上的在线 heic 转 jpg 工具转存为 jpg,或用系统自带的“预览”工具打开并手工转存为 jpg,并将图片按照其景色分别命名 header-1.jpg~header-16.jpg 对应 24 小时中的不同时段。

将图片压缩到自定义大小后上传至 get_template_directory_uri() . '/images/' 路径下,大功告成!


[2018/10/10]

用类似方法实现了自定义背景颜色根据时间自动变换,代码如下:

1、在 function.php 中加入:

2、在 header.php 中找到<body> 标签,更改为: