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的自定义头部图片实现类似的不同时间展示不同图像的效果。

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

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中找到<header>头标签，并按如下代码根据自己主题相应修改：

<header style="background:url('<?php echo get_template_directory_uri() . '/images/header-' . timelapse() . '.jpg'?>') no-repeat center center; background-size:cover; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover;">

4、下面是转换Mojave图片的过程（你也可以用自己喜欢的其它图库来实现）。如果系统已升级为macOS Mojave，按照下图路径找到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中加入：

//自定义背景颜色
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;
}

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

<body <?php body_class(); ?> style="background-color:<?php echo colorlapse(); ?> !important">

# 写于，改于。

WordPress header.php Mojave

共有 17 条评论

fooleap
广东

骚操作，但这一堆 if 看着怪难受的 😀
用花括号而不用 : 就不用写 endif; 了
六年前 Google Chrome 69 · Windows 10
回复
- S
  江苏
  *
  
  @fooleap 就是因为花括号有问题才改用了冒号，然后报错最后又加了endif，也不知道为什么。 👿
  若有更优美的句子欢迎分享……
  六年前 Google Chrome 69 · Mac OS X 10.14
  回复
  - fooleap
    广东
    @S 至少可以这样改写 ❗
    
    if($hour>=0 && $hour4 && $hour9 && $hour=12 && $hour20 && $hour<=24){ $lapse = 15; }
    六年前 Google Chrome 69 · Windows 10
    回复
  - fooleap
    广东
    @S 这次应该没问题吧……
    
    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; }
    六年前 Google Chrome 69 · Windows 10
    回复
    - S
      江苏
      *
      
      @fooleap 代码改得确实机智，感谢！
      六年前 Google Chrome 69 · Mac OS X 10.14
      回复
老杨
广东

带娃+折腾，赞 😥
六年前 Google Chrome 69 · Windows 10
回复
- S
  江苏
  *
  
  @老杨哈哈，还有拍照。
  六年前 Google Chrome 69 · Mac OS X 10.14
  回复
子痕
江苏

带娃+折腾，赞+1 😥
六年前 Safari 11 · Mac OS X 10.13
回复
- S
  江苏
  *
  
  @子痕折腾更健康……
  六年前 Google Chrome 69 · Mac OS X 10.14
  回复
大致
日本

给header个id。然后追加的css可以用wp_add_inline_style函数往里加。没什么大用，就是更好看一点儿。
六年前 Firefox 62 · Windows 7
回复
- S
  江苏
  *
  
  @大致挺有用的，比如我可能会相应的根据时间更改背景色。 🙂
  六年前 Wordpress App 10 · iPhone iOS 12.0
  回复
不亦乐乎
福建

Mojave 的暗色主题真的很炫酷，可惜用不起。
六年前 Firefox 48 · Ubuntu
回复
- S
  江苏
  *
  
  @不亦乐乎怎么会用不起呢？
  六年前 Google Chrome 69 · Mac OS X 10.14
  回复

竹炉山房