不少主题自带自定义顶部图片功能,简而言之便是增加了函数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/'路径下,大功告成!
用类似方法实现了自定义背景颜色根据时间自动变换,代码如下:
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">
郑永 阿根廷
现在就是这种特效是吧?难怪我来了都是夜色的,时差问题,哈哈。
六年前 Google Chrome 69 · Windows 7S 江苏 *
@郑永 对。其实夜色是套系里最美的。
六年前 Google Chrome 69 · Mac OS X 10.14归臧 美国
效果拔群~点赞
六年前 Google Chrome 57 · Windows 10S 江苏 *
@归臧 瞎弄弄 😐
六年前 Google Chrome 69 · Mac OS X 10.14