WordPress 根据时间自动切换主题配图和颜色

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

register_default_headers(
array(
\\’header\\’ => array(
\\’url\\’ => \\’%s/images/header.jpg\\’,
\\’thumbnail_url\\’ => \\’%s/images/header.jpg\\’,
\\’description\\’ => __( \\’header\\’, \\’themename\\’ ),
),
)

$custom_header_support = array(
\\’width\\’ => 1150,
\\’height\\’ => 559,
\\’header-text\\’ => false,
\\’default-image\\’ => get_template_directory_uri() . \\’/images/header.jpg\\’,
);
add_theme_support( \\’custom-header\\’, $custom_header_support );

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

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

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

function timelapse() {
date_default_timezone_set(\\’Asia/Shanghai\\’);
$hour=date(“H”);
$lapse = 0;
if($hour>=0 && $hour<=4): $lapse=16;
elseif($hour>4 && $hour<=5): $lapse=1;
elseif($hour>5 && $hour<=6): $lapse=2;
elseif($hour>6 && $hour<=7): $lapse=3;
elseif($hour>7 && $hour<=8): $lapse=4;
elseif($hour>8 && $hour<=9): $lapse=5;
elseif($hour>9 && $hour<=12): $lapse=6;
elseif($hour>12 && $hour<=13): $lapse=7;
elseif($hour>13 && $hour<=14): $lapse=8;
elseif($hour>14 && $hour<=15): $lapse=9;
elseif($hour>15 && $hour<=16): $lapse=10;
elseif($hour>16 && $hour<=17): $lapse=11;
elseif($hour>17 && $hour<=18): $lapse=12;
elseif($hour>18 && $hour<=19): $lapse=13;
elseif($hour>19 && $hour<=20): $lapse=14;
elseif($hour>20 && $hour<=24): $lapse=15;
else: $lapse=15;
endif;
return $lapse;
}

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

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

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

将图片压缩到自定义大小后上传至 get_template_directory_uri() . ‘/images/’ 路径下，大功告成！

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

//自定义背景颜色
function colorlapse() {
date_default_timezone_set(\’Asia/Shanghai\’);
$hour=date(“H”);
$colorlapse = “#555″;
if($hour>=0 && $hour<=4): $colorlapse=”#6a6f6f”;
elseif($hour>4 && $hour<=5): $colorlapse=”#8a8f8f”;
elseif($hour>5 && $hour<=6): $colorlapse=”#9a9f9f”;
elseif($hour>6 && $hour<=7): $colorlapse=”#aaafaf”;
elseif($hour>7 && $hour<=8): $colorlapse=”#babfbf”;
elseif($hour>8 && $hour<=9): $colorlapse=”#cacfcf”;
elseif($hour>9 && $hour<=12): $colorlapse=”#dadfdf”;
elseif($hour>12 && $hour<=13): $colorlapse=”#eaefef”;
elseif($hour>13 && $hour<=14): $colorlapse=”#fdfefe”;
elseif($hour>14 && $hour<=15): $colorlapse=”#dadfdf”;
elseif($hour>15 && $hour<=16): $colorlapse=”#cacfcf”;
elseif($hour>16 && $hour<=17): $colorlapse=”#babfbf”;
elseif($hour>17 && $hour<=18): $colorlapse=”#babfbf”;
elseif($hour>18 && $hour<=19): $colorlapse=”#aaafaf”;
elseif($hour>19 && $hour<=20): $colorlapse=”#9a9f9f”;
elseif($hour>20 && $hour<=24): $colorlapse=”#8a8f8f”;
else: $colorlapse=”#555″;
endif;
return $colorlapse;
}

精简写法

if($hour>=0 && $hour<=4){
$lapse = 16;
} elseif ($hour>4 && $hour<=9) {
$lapse = $hour – 4;
} elseif($hour>9 && $hour<12){
$lapse = 6;
} elseif ($hour>=12 && $hour<=20){
$lapse = $hour – 6;
}elseif ($hour>20 && $hour<=24){
$lapse = 15;
}

2、在 header.php 中找到标签，更改为：

style=”background-color: !important”>