Docker series WordPress series self-built random graph API dynamic wallpaper

Turn to my personal blog https://blognas.hwb0307.com . Welcome to follow!

foreword

Recently, I happened to see a video of Xiyuchong , the host of Up at station B , in which he shared many high-definition live wallpapers without watermarks. No matter the ladies, kittens, environment, weather, etc. are very beautiful, so I wanted to move my mind. After discussing with the likepoems boss, combined with my own experience in random graph API , I made a good plan, and I will share it with you here (～￣▽￣)～

My program has the following characteristics:

• No need to install additional plug-ins, only based on PHP+HTML commands
• When refreshing the blog, the dynamic wallpaper will be switched randomly (the size ranges from 1.2-1.6Mb)
• Mobile devices do not use dynamic wallpapers, but only use static wallpapers with smaller size and less performance loss

One of the difficulties of this solution is that WordPress cannot directly parse MP4 like parsing image URLs , so it is not feasible to simply set up random image APIs for different links. According to the settings of the argon theme, I did some cooperation in the code to achieve my goal. Personally, I think that the background image code of argon can be simply rewritten based on my current solution, and it can perfectly support dynamic and static wallpapers/device type-specific wallpapers. If I have a chance, I will mention it to the developer and have a look . Do they have a development plan. As a beauty control, I think the weight of the wallpaper function is about 50% for a WordPress theme, so I have high requirements for this aspect, haha!

It's worth noting that my solution has only been tested with the argon theme in WordPress . However, other WordPress themes, or other blog platforms based on PHP should be successful, but a little knowledge of PHP+HTML is required. If you are in these situations, you can only analyze the specific situation. You can make magic changes according to my ideas. Now let's go directly to the topic and see how to install live wallpapers for WordPress blogs !

Base

Before we get started, let's talk about some basics. First of all, WordPress supports MP4 playback in H264 format, but H265 does not . Friends, pay attention to the encoding format when preparing live wallpapers . At the beginning, when I messed up for an afternoon and fell into self-doubt, I found out that it was a video format problem (too bad to be able to help).

Secondly, I personally think that the size of the live wallpaper should not be too large, otherwise the requirements for the bandwidth of the visitor are relatively high, which is not very friendly. My experience is that a video in H264 format with 8 seconds of interception, a bit rate of 1.5M, and 25 frames per second is about 1.2-1.6Mb , depending on the resolution (1080p or 4k is probably not a big problem, try it yourself Try it), so the balance between size and performance is not bad. The average volume of my previous static wallpapers was 500-700kb, so I am still very satisfied with the size of this live wallpaper.

random graph api

If you are using the random graph API I introduced for the first time, you'd better read the " Docker series WordPress series self-built random graph API " I wrote before, and make preparations, such as installing Add From Serverthe plug-in.

The file structure of the random graph API used in this article is as follows (in the same folder):

-rw-rw-rw- 1 www-data www-data  591 Sep 18 11:32  img_mobile.txt
-rw-rw-rw- 1 www-data www-data  594 Oct  5 15:22  index-animated.php
-rw-rw-rw- 1 www-data www-data  1.8K Oct  5 15:39 index-mobileOnly.php
-rw-rw-rw- 1 www-data www-data  1.7K Oct  6 01:10 mp4.txt

img_mobile.txt

Store one or more links to static wallpapers dedicated to mobile devices , such as this:

https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/images/wallhaven-v9jp8m.webp

The effect is like this:

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-JCLwltOA-1665104595845)(https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/images /wallhaven-v9jp8m.webp)]

mp4.txt

Store one or more links to PC-specific live wallpapers , such as this:

https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/images/48bz-02-01.mp4

index-mobileOnly.php

I made changes and generated it in " Docker Series WordPress Series Self-Building Random Graph API " . If the guest device is a mobile device, returns a mobile-specific static wallpaper; if the guest device is a tablet or PC, returns nothing:index.phpindex-mobileOnly.php

<?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()){
    
    
    
   // 手机壁纸
   $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!=''){
    
    
            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

The structure is similar to index-mobileOnly.php. This PHP file randomly returns mp4.txtvideo links in:

<?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!=''){
    
    
        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"));
}
 
?> 

footer settings

Similar to most WordPress special effects, we also need to 外观——主题编辑器——footer.phpset some codes in it (you can change it in the shell, depending on your preferences), and this one https://blognas.hwb0307.com/imgapi/index-animated.phpneeds to be replaced with your own api.

The specific code is as follows:

<!--动态壁纸开始-->
<!--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>It is to make the dynamic wallpaper in a transparent state when it is not loaded, so that the visual effect is more natural.

This code controls both sets of live wallpapers in day/night mode. The advantage is that you can switch seamlessly when switching between day and night; the disadvantage is that you have to load 2 live wallpapers at the same time every time, which is a bit of a waste of visitor resources. In addition, I also used index.phpthe code in the similar to judge the device type, and the judgment was repeated once in the whole process. Generally speaking, I personally think that the current design logic is not good, but it can be used (～￣▽￣)～

Have the opportunity to improve slowly!

File Permissions

Don't forget to add file permissions:

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

I generally like to add it, so that the content can be modified randomly when the root user is not logged in. Anyway, it's not something important, I don't think it matters. After changing this permission, 33:33it doesn't matter whether the user group is changed or not.

Argon theme settings

In the background of WordPress Argon主题选项——页面背景, fill in index_mobileOnly.phpthe https link of the file. It is mainly used to control img_mobile.txtstatic wallpaper links in mobile device usage.

dynamic wallpaper

At present, some small videos I made are placed in the bloghelperimages folder of my Github warehouse. Most of them are beauties, scenery, and pets. You can also try them. Will continue to update. The link is as follows, the format is https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/images/+ 文件名:

https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/images/54bz-16-01.mp4
https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/images/54bz-10-01.mp4
https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/images/57bz-10-01.mp4
https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/images/57bz-09-05.mp4
https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/images/57bz-08-01.mp4
https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/images/29bz-07-01.mp4
https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/images/4kbz-23-02.mp4
https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/images/55bz-08-01.mp4
https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/images/59bz-03-01.mp4
https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/images/60bz-03-01.mp4
https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/images/60bz-04-01.mp4
https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/images/mhbz-05-01.mp4
https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/images/07bz-01-01.mp4
https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/images/07bz-03-01.mp4
https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/images/61bz-04-01.mp4
https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/images/61bz-13-01.mp4
https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/images/61bz-16-01.mp4
https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/images/51bz-14-01.mp4
https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/images/47bz-08-01.mp4
https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/images/48bz-01-01.mp4
https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/images/48bz-02-01.mp4

The video snapshot is as follows:

I myself use DogeCloud to cache, so that the loading speed will be faster when domestic friends visit. Most of these live wallpapers come from Xiyuchong, the host of Up at station B , and I edited them with the format factory after downloading. As recommended above, the interception is 8 seconds, the code rate is 1.5M, the number of frames per second is 25, and the H264 format is used . If you are a personal small station, if the interception length is longer, I think it is not a big problem. In addition, there are probably a lot of similar bosses at station B, and everyone can recommend them to me!

summary

At present, the random graph API of this live wallpaper is quite satisfactory. Although the code implementation is a bit flawed, it can run normally. Looks amazing, I really recommend it! If you have any questions, you can leave a message in the comment area!