Docker系列 WordPress系列 自建随机图API之动态壁纸
本文最后更新于 9 天前,如有失效请评论区留言。

本博客用什么VPS?创作不易,您可以支持苯苯(~ ̄▽ ̄)~

日志

  • 2022-11-06:更新设备判断的php代码。由于部分小伙伴反映动态壁纸具有眩晕、注意力分散等副作用,最后我还是停了。但本教程是绝对可以实现的。
  • 2022-10-26:更新备注代码,使得对任一图片/视频链接,当且仅当开头添加#时,该链接不会生效。
  • 2022-10-07:更新页脚设置,支持白天/夜间模式使用同一个动态壁纸。适用范围应该比之前的设置更广泛,毕竟不用依赖html.darkmode的系统定义(可能是Argon特异性的)。
  • 2022-10-06:完成初稿。

前言

最近偶然看到B站Up主喜雨虫的视频,其中分享了许多无水印高清动态壁纸,无论小姐姐、小猫、环境、天气等均十分唯美,所以动起了想要搬运的心思。经过与likepoems大佬讨论,结合自己在随机图API方面的经验,整了一个不错的方案,这里分享给各位小伙伴(~ ̄▽ ̄)~

我的方案有以下特点:

  • 不需要安装额外的插件,只基于PHP+HTML命令
  • 刷新博客时会随机切换动态壁纸(大小在1.2-1.6Mb不等)
  • 移动设备不使用动态壁纸,只使用体积较小、对性能损耗较小的静态壁纸

这个方案的难点之一在于WordPress并不能像解析图片URL一样直接解析MP4,所以单纯地设置不同链接的随机图API是不可行的。我根据argon主题的设置,在代码方面进行一些配合,从而实现我的目标。个人觉得,argon的背景图片代码完全可以基于我目前的方案简单地改写一下,就可以十分完美地支持动静态壁纸/设备类型特异性壁纸了,有机会我向开发者提一下,看看大佬们有没有开发计划。作为一个颜控,我认为壁纸功能的权重对一个WordPress主题而言有50%左右,所以我对这方面的要求很高,哈哈!

值得注意的是,我的方案仅在WordPress中的argon主题里测试过。不过,其它WordPress主题,或者是基于PHP的其它博客平台应该是可以成功的,只不过需要一点PHP+HTML的知识,如果你是这些情况,只能说具体情况具体分析喽。你可以根据我的思路进行魔改。下面我们直接进入正题,看看怎么给WordPress博客安装动态壁纸吧!

msedge_SOGYejYQe1bb62b60846523d5f.gif

基础

在正式开始之前,先说一些基础知识。首先,WordPress是支持H264格式的MP4格式播放的,但H265是不支持的。小伙伴们准备动态壁纸的时候要注意编码格式。当初,我搞了一个下午并陷入自我怀疑的时候,才发现是视频格式问题(太菜没办法)。

其次,我个人觉得动态壁纸的体积不能太大,不然对访客带宽的要求比较高,不太友好。我的经验是,截取8秒、码率是1.5M、每秒帧数25的H264格式的视频大约是1.2-1.6Mb,具体还要看分辨率(1080p或4k估计问题都不大,自己试试看),这样在大小和性能方面的平衡还可以。我以前的静态壁纸的体积均值为500-700kb,所以这个动态壁纸的大小我还是很满意的。

随机图api

如果你是第一次使用我介绍的随机图API,你最好看一下我以前写的《Docker系列 WordPress系列 自建随机图API》,做好准备工作,比如安装好Add From Server插件。

本文所使用的随机图API的文件结构如下(放在同一个文件夹里):

-rw-rw-rw- 1 www-data www-data  591 Sep 18 11:32 img_mobile.txt
-rw-rw-rw- 1 www-data www-data 1.2K Sep 24 23:59 img.txt
-rw-rw-rw- 1 root     root      626 Oct 26 08:58 index-animated.php
-rw-rw-rw- 1 root     root     1.8K Oct 26 08:58 index-mobileOnly.php
-rw-rw-rw- 1 www-data www-data 2.0K Nov  6 00:48 index.php
-rw-r--r-- 1 root     root      89K Nov  6 00:32 Mobile_Detect.php
-rw-rw-rw- 1 root     root     1.6K Oct 30 05:06 mp4.txt

这里有一些文件来自教程《Docker系列 WordPress系列 自建随机图API》,就不再重复介绍了。

img_mobile.txt

存放1个或多个给移动设备专用的静态壁纸的链接,比如这种:

https://fastly.jsdelivr.net/gh/huangwb8/[email protected]/images/wallhaven-v9jp8m.webp

效果是这样的:

mp4.txt

存放1个或多个给PC专用的动态壁纸的链接,比如这种:

https://fastly.jsdelivr.net/gh/huangwb8/[email protected]/images/48bz-02-01.mp4

效果是这样的:

index-mobileOnly.php

我对《Docker系列 WordPress系列 自建随机图API》中的index.php进行了改动并生成index-mobileOnly.php。如果访客设备是移动设备,则返回移动设备专用的静态壁纸;如果访客设备是平板或者PC,则不返回任何值:

<?php
/*
 * 函数:访客设备
 * 博客园:https://www.cnblogs.com/freephp/p/13979503.html
 * Github: https://github.com/RohanSakhale/Mobile-Detect
*/
function is_mobile(){
    require('./Mobile_Detect.php');
    $MobileDetect = new Mobile_Detect();

    if ($MobileDetect->isTablet()) {
        // 平板定义为PC类
        return false;
    } elseif ($MobileDetect->isMobile()) {
        return true;
    } else {
        return false;
    }
}

// 电脑与手机用不同的壁纸
if(is_mobile()){

   // 手机壁纸
   $filename = "img_mobile.txt";

   //存放api随机图链接的文件名img.txt
    if(!file_exists($filename)){
        die('文件不存在');
    }

    //从文本获取链接
    $pics = [];
    $fs = fopen($filename, "r");
    while(!feof($fs)){
        $line=trim(fgets($fs));
        if($line!='' && substr($str , 0 , 1) != '#'){
            array_push($pics, $line);
        }
    }

    //从数组随机获取链接
    $pic = $pics[array_rand($pics)];

    //返回指定格式
    $type=$_GET['type'];
    switch($type){

    //JSON返回
    case 'json':
        header('Content-type:text/json');
        die(json_encode(['pic'=>$pic]));

    default:
        die(header("Location: $pic"));
    }


}else{
   // 电脑壁纸
   // $filename = "img.txt";
}
?>

index-annimated.php

结构类似于index-mobileOnly.php。这个PHP文件随机地返回mp4.txt里的视频链接:

<?php

$filename = "mp4.txt";

//存放api随机图链接的文件名img.txt
if(!file_exists($filename)){
    die('文件不存在');
}

//从文本获取链接
$pics = [];
$fs = fopen($filename, "r");
while(!feof($fs)){
    $line=trim(fgets($fs));
    if($line!='' && substr($str , 0 , 1) != '#'){
        array_push($pics, $line);
    }
}

//从数组随机获取链接
$pic = $pics[array_rand($pics)];

//返回指定格式
$type=$_GET['type'];
switch($type){

//JSON返回
case 'json':
    header('Content-type:text/json');
    die(json_encode(['pic'=>$pic]));

default:
    die(header("Location: $pic"));
}

?> 

页脚设置

希望日间/夜间模式使用相同动态壁纸的,可以使用此设置。

类似于多数WordPress特效,我们还要在外观——主题编辑器——footer.php里设置一些代码(在shell里改也行,看你的喜好),其中这个https://blognas.hwb0307.com/imgapi/index-animated.php要换成你自己的api。

具体JS代码如下:

// 随机图API之动态壁纸
document.write('<style type="text/css" id="wp-custom-css">#content:before{opacity: 0;}</style>');
document.write('<video src="https://blognas.hwb0307.com/imgapi/index-animated.php" class="bg-video" autoplay="" loop="loop" muted=""></video>');
document.write('<style> video.bg-video {position: fixed;z-index: -1;left: 0;right: 0;top: 0;bottom: 0;width: 100vw;height: 100vh; object-fit: cover;pointer-events: none;transition: opacity .3s ease;}</style>')

<style type="text/css" id="wp-custom-css">#content:before{opacity: 0;}</style>是为了让动态壁纸未加载时处于透明状态,这样视觉效果比较自然些。

这段代码最后搭配设备判断的js代码使用。您可以看《Docker系列 WordPress系列 特效》这篇文章,里面的雪花/樱花特效就包含了一段设备判断js代码。我是这样做的:

NVIDIA_Share_EiLH5uBwF6

这样,所有PC/iPad端访问时动态壁纸才会被触发,否则仅应用移动壁纸。这种策略对移动设备比较友好。

在本文的Legacy部分,我还保存了一些以前用过的PHP代码。如果你想要较强的自定义功能,可以仔细地看一下它们。

文件权限

不要忘记添加文件权限:

sudo chmod +666 img_mobile.txt index-animated.php index-mobileOnly.php mp4.txt

我一般都喜欢加,这样不用root用户登陆时也可以随便修改内容。反正不是什么重要的东西,我觉得无所谓。改了这个权限,用户组改不改33:33都没关系的。

Argon主题设置

在WordPress后台,Argon主题选项——页面背景的背景里,填入index_mobileOnly.php文件的https链接。它主要是用来控制移动设备使用img_mobile.txt里的静态壁纸链接。

baidunetdisk_98fbqYokYe

动态壁纸推荐

这里我列举几个自己比较喜欢的壁纸哈!

  • 霸道姐姐:整体画风偏暗,眼神酷酷的很帅!当然吸烟有害健康(可以看看这个文章,比较新的研究,吸烟和多种疾病密切相关;吸烟和肺癌因果关系的流行病学研究是很久以前就做出来的了),小伙伴们不要学噢

  • 可爱猫咪:又有谁可以拒绝可爱小猫的回眸呢?

  • 血腥约尔:比动画更有魅力!爱了爱了!

目前我制作的一些小视频放在我的Github仓库bloghelperimages文件夹里,美女、风景、宠物居多,大家也可以试试看。会持续更新。链接如下,格式为https://fastly.jsdelivr.net/gh/huangwb8/[email protected]/images/+文件名即可:


[video  src="https://fastly.jsdelivr.net/gh/huangwb8/[email protected]/images/54bz-16-01.mp4" /]
[video  src="https://fastly.jsdelivr.net/gh/huangwb8/[email protected]/images/54bz-10-01.mp4" /]
[video  src="https://fastly.jsdelivr.net/gh/huangwb8/[email protected]/images/57bz-10-01.mp4" /]
[video  src="https://fastly.jsdelivr.net/gh/huangwb8/[email protected]/images/57bz-09-05.mp4" /]
[video  src="https://fastly.jsdelivr.net/gh/huangwb8/[email protected]/images/57bz-08-01.mp4" /]
[video  src="https://fastly.jsdelivr.net/gh/huangwb8/[email protected]/images/29bz-07-01.mp4" /]
[video  src="https://fastly.jsdelivr.net/gh/huangwb8/[email protected]/images/4kbz-23-02.mp4" /]
[video  src="https://fastly.jsdelivr.net/gh/huangwb8/[email protected]/images/55bz-08-01.mp4" /]
[video  src="https://fastly.jsdelivr.net/gh/huangwb8/[email protected]/images/59bz-03-01.mp4" /]
[video  src="https://fastly.jsdelivr.net/gh/huangwb8/[email protected]/images/60bz-03-01.mp4" /]
[video  src="https://fastly.jsdelivr.net/gh/huangwb8/[email protected]/images/60bz-04-01.mp4" /]
[video  src="https://fastly.jsdelivr.net/gh/huangwb8/[email protected]/images/mhbz-05-01.mp4" /]
[video  src="https://fastly.jsdelivr.net/gh/huangwb8/[email protected]/images/07bz-01-01.mp4" /]
[video  src="https://fastly.jsdelivr.net/gh/huangwb8/[email protected]/images/07bz-03-01.mp4" /]
[video  src="https://fastly.jsdelivr.net/gh/huangwb8/[email protected]/images/61bz-04-01.mp4" /]
[video  src="https://fastly.jsdelivr.net/gh/huangwb8/[email protected]/images/61bz-13-01.mp4" /]
[video  src="https://fastly.jsdelivr.net/gh/huangwb8/[email protected]/images/61bz-16-01.mp4" /]
[video  src="https://fastly.jsdelivr.net/gh/huangwb8/[email protected]/images/51bz-14-01.mp4" /]
[video  src="https://fastly.jsdelivr.net/gh/huangwb8/[email protected]/images/47bz-08-01.mp4" /]
[video  src="https://fastly.jsdelivr.net/gh/huangwb8/[email protected]/images/48bz-01-01.mp4" /]
[video  src="https://fastly.jsdelivr.net/gh/huangwb8/[email protected]/images/48bz-02-01.mp4" /]

视频快照如下:

image-20221006140744433

我自己是用DogeCloud缓存的,这样国内的小伙伴访问的时候加载速度会更快。这些动态壁纸多来自B站Up主喜雨虫贝勒儿(Cosplayer),我下载完后用格式工厂剪辑的。就像前面推荐的那样,截取8秒、码率是1.5M、每秒帧数25、H264格式。如果你是一个个人小站,截取长度再长些,我觉得问题也不大。另外,B站类似的大佬估计很多,大家也可以多多向我推荐喔!

小结

其实,我也有办法让动静态的壁纸合并在一起。不过,有一些小伙伴不太喜欢动态壁纸,因为它会分散注意力。所以我也没有进一步折腾。

目前这个动态壁纸的随机图API还是挺满意的,虽然代码实现上有点瑕疵,但可以正常运行。颜值爆表呀,真心推荐!有什么问题可以评论区留言哈!

Legacy

其实我尝试了很多php判断移动设备的脚本,但是结果不尽人意。具体表现为:(1)手机知乎跳转链接无法识别为移动设备;(2)除chrome外的大多数手机浏览器无法被识别为移动设备。我最后使用了使用JS脚本判断PC/iPad设备,这个策略对移动设备显示更加有利。有时候解决问题就是要换一下思路 !

这里存放一些已经过时的PHP代码,我觉得还是有学习参考作用的。

legacy: 页脚设置

希望日间/夜间模式使用不同动态壁纸的,可以使用此设置。

因判断移动设备的策略不好用,所以放弃了。

类似于多数WordPress特效,我们还要在外观——主题编辑器——footer.php里设置一些代码(在shell里改也行,看你的喜好),其中这个https://blognas.hwb0307.com/imgapi/index-animated.php要换成你自己的api。

具体代码如下:

<!--动态壁纸开始-->
<!--1. 设备判断-->
<?php
// 函数:访客设备
function is_mobile() {
    if (empty($_SERVER['HTTP_USER_AGENT']) || 
        strpos($_SERVER['HTTP_USER_AGENT'], 'iPad') !== false) {
        // 因为iPad有类似于PC的长宽比,所以我设置为电脑端
            $is_mobile = false;
        } elseif ( strpos($_SERVER['HTTP_USER_AGENT'], 'Mobile') !== false 
            || strpos($_SERVER['HTTP_USER_AGENT'], 'Android') !== false
            || strpos($_SERVER['HTTP_USER_AGENT'], 'Silk/') !== false
            || strpos($_SERVER['HTTP_USER_AGENT'], 'Kindle') !== false
            || strpos($_SERVER['HTTP_USER_AGENT'], 'BlackBerry') !== false
            || strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mini') !== false
            || strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mobi') !== false ) {
        $is_mobile = true;
    } else {
        $is_mobile = false;
    }
    return $is_mobile;
}

if(!is_mobile()){
    // 电脑、平板类。启用动态壁纸
 // echo '<style type="text/css" id="wp-custom-css">#banner:after{opacity: 0;}</style>';
    echo '<style type="text/css" id="wp-custom-css">#content:before{opacity: 0;}</style>';
    echo '<video src="https://blognas.hwb0307.com/imgapi/index-animated.php" class="bg-video bg-video-day" autoplay="" loop="loop" muted=""></video>';
    echo '<video src="https://blognas.hwb0307.com/imgapi/index-animated.php" class="bg-video bg-video-night" autoplay="" loop="loop" muted=""></video>';
}
?>
<!--2. 时间控制-->
<style>
    video.bg-video {
        position: fixed;
        z-index: -1;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100vw;
        height: 100vh;
        object-fit: cover;
        pointer-events: none;
        transition: opacity .3s ease;
    }

    video.bg-video.bg-video-day {
        opacity: 1;
    }

    video.bg-video.bg-video-night {
        opacity: 0;
    }

    html.darkmode video.bg-video.bg-video-day {
        opacity: 0;
    }

    html.darkmode video.bg-video.bg-video-night {
        opacity: 1;
    }
</style>
<!--动态壁纸结束-->

<style type="text/css" id="wp-custom-css">#content:before{opacity: 0;}</style>是为了让动态壁纸未加载时处于透明状态,这样视觉效果比较自然些。

这个代码同时控制日间/夜间模式两套动态壁纸。好处是日间/夜间切换时可以无缝切换;坏处是每次都要同时加载2个动态壁纸,有点浪费访客资源。此外,我还使用了类似index.php里的代码进行设备类型判断,整个过程这个判断重复了1次。总体而言,我个人觉得现在的设计逻辑并不好,只不过能用就是了(~ ̄▽ ̄)~

legacy: 页脚设置2.0

希望日间/夜间模式使用相同动态壁纸的,可以使用此设置。

因判断移动设备的策略不好用,所以放弃了。

其实也是基于上面的设置,只是不特别定义bg-video-daybg-video-night子class。我个人喜欢这个设置,比较节省CDN资源。它与上面的页脚设置两选其一即可。

<!--动态壁纸开始-->
<!--1. 设备判断-->
<?php
// 函数:访客设备
function is_mobile() {
    if (empty($_SERVER['HTTP_USER_AGENT']) || 
        strpos($_SERVER['HTTP_USER_AGENT'], 'iPad') !== false) {
        // 因为iPad有类似于PC的长宽比,所以我设置为电脑端
            $is_mobile = false;
        } elseif ( strpos($_SERVER['HTTP_USER_AGENT'], 'Mobile') !== false 
            || strpos($_SERVER['HTTP_USER_AGENT'], 'Android') !== false
            || strpos($_SERVER['HTTP_USER_AGENT'], 'Silk/') !== false
            || strpos($_SERVER['HTTP_USER_AGENT'], 'Kindle') !== false
            || strpos($_SERVER['HTTP_USER_AGENT'], 'BlackBerry') !== false
            || strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mini') !== false
            || strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mobi') !== false ) {
        $is_mobile = true;
    } else {
        $is_mobile = false;
    }
    return $is_mobile;
}

if(!is_mobile()){
    // 电脑、平板类。启用动态壁纸
 // echo '<style type="text/css" id="wp-custom-css">#banner:after{opacity: 0;}</style>';
    echo '<style type="text/css" id="wp-custom-css">#content:before{opacity: 0;}</style>';
    echo '<video src="https://blognas.hwb0307.com/imgapi/index-animated.php" class="bg-video" autoplay="" loop="loop" muted=""></video>';
}
?>
<!--2. 时间控制-->
<style>
    video.bg-video {
        position: fixed;
        z-index: -1;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100vw;
        height: 100vh;
        object-fit: cover;
        pointer-events: none;
        transition: opacity .3s ease;
    }
</style>
<!--动态壁纸结束-->

legacy: 页脚设置3.0

这个策略应该也是可行的。感兴趣的小伙伴可以试试看。

<!--动态壁纸开始-->
<?php
/*
 * 1. 设备判断>
 * 博客园:https://www.cnblogs.com/freephp/p/13979503.html
 * https://www.cnblogs.com/freephp/p/13979503.html
*/
function is_mobile(){
    require('./imgapi/Mobile_Detect.php');
    $MobileDetect = new Mobile_Detect();
    if ($MobileDetect->isMobile()) {
        return true;
    } else {
        return false;
    }
}

/*
 * 2.控制是否使用壁纸
*/
if(!is_mobile()){
    // 电脑、平板类。启用动态壁纸
    // echo '<style type="text/css" id="wp-custom-css">#banner:after{opacity: 0;}</style>';
    echo '<style type="text/css" id="wp-custom-css">#content:before{opacity: 0;}</style>'; echo PHP_EOL;
    echo '<video src="https://blognas.hwb0307.com/imgapi/index-animated.php" class="bg-video" autoplay="" loop="loop" muted=""></video>'; echo PHP_EOL;
    echo '<style> video.bg-video {
        position: fixed;
        z-index: -1;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100vw;
        height: 100vh; 
        object-fit: cover;
        pointer-events: none;
        transition: opacity .3s ease;
        }
        </style>'; echo PHP_EOL;
}
?>
<!--动态壁纸结束-->

---------------
完结,撒花!如果您点一下广告,可以养活苯苯😍😍😍

版权声明:除特殊说明,博客文章均为Bensz原创,依据CC BY-SA 4.0许可证进行授权,转载请附上出处链接及本声明。 如有需要,请至学习地图系统学习本博客的教程。加Telegram群可获得更多帮助喔! | 博客订阅:RSS | 广告招租:留言板 | 博客VPS |
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇