Dockerシリーズ WordPressシリーズ 自作ランダムグラフAPI ダイナミック壁紙

情報 2023-07-02 03:54:40 訪問数: null

私の個人ブログhttps://blognas.hwb0307.comをご覧ください。フォロー大歓迎です！

目次

序文

最近、偶然、 Up at station B のホストXiyuchongのビデオを見ましたが、そこで彼は透かしのない多くの高解像度のライブ壁紙を共有していました。女性に関係なく、子猫、環境、天気などがとても美しいので、心を動かしたかったのです。likepoems のボスと話し合った結果、私自身のランダム グラフ APIの経験と組み合わせて、良い計画を立てたので、ここで共有します(￣▽￣)~

私のプログラムには次のような特徴があります。

  • 追加のプラグインをインストールする必要はなく、PHP + HTML コマンドのみに基づいています。
  • ブログを更新すると、ダイナミック壁紙がランダムに切り替わります（サイズは1.2～1.6Mbの範囲です）。
  • モバイル デバイスは動的壁紙を使用せず、サイズが小さくパフォーマンスの低下が少ない静的壁紙のみを使用します。

このソリューションの問題点の 1 つは、WordPress が画像 URL を解析するように MP4 を直接解析できないため、さまざまなリンクに対してランダムな画像 API を単純に設定することは現実的ではないことです。アルゴンテーマの設定に従って、目的を達成するためにコードでいくつかの協力を行いました。個人的には、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シリーズ 自作ランダムグラフAPIAdd 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  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

次のような、モバイル デバイス専用の静的壁紙への1 つ以上のリンクを保存します。

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

効果はこんな感じです。

[外部リンク画像の転送に失敗しました。ソース サイトにはリーチ防止メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-JCLwltOA-1665104595845)(https://fastly.jsdelivr.net/gh/huangwb8) /bloghelper@latest/images /wallhaven-v9jp8m.webp)]

mp4.txt

次のような、 PC 固有のライブ壁紙への1 つ以上のリンクを保存します。

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

インデックス-mobileOnly.php

「 Dockerシリーズ WordPressシリーズ 自己構築ランダムグラフAPI 」にindex.php変更を加えて生成しましたindex-mobileOnly.php。ゲスト デバイスがモバイル デバイスの場合は、モバイル固有の静的壁紙を返します。ゲスト デバイスがタブレットまたは PC の場合は、何も返しません。

<?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";
}
?>

インデックスアニメーション.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!=''){
    
    
        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いくつかのコードを設定する必要があります (好みに応じてシェルで変更できます)。これを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 回繰り返しました。総じて現状の設計ロジックは良くないと個人的には思いますが、使えますよ(～￣▽￣)～

ゆっくり改善するチャンスです！

ファイルのアクセス許可

ファイル権限を追加することを忘れないでください。

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

私は通常、これを追加して、root ユーザーがログインしていないときにコンテンツをランダムに変更できるようにすることを好みます。とにかく、それは重要なことではなく、重要ではないと思います。この権限を変更した後、33:33ユーザー グループが変更されるかどうかは関係ありません。

アルゴンテーマの設定

WordPress のバックグラウンドで、ファイルの https リンクをArgon主题选项——页面背景入力します。index_mobileOnly.phpこれは主に、img_mobile.txtモバイルデバイスの使用における静的な壁紙リンクを制御するために使用されます。

baidunetdisk_98fbqYokYe

ダイナミックな壁紙

現在、私が作成したいくつかの小さなビデオが私の Github 倉庫のbloghelperimagesフォルダーに置かれていますが、そのほとんどは美女、風景、ペットなどです。引き続き更新していきます。リンクは次のとおりです。形式は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

ビデオのスナップショットは次のとおりです。

画像-20221006140744433

私自身もDogeCloudをキャッシュに使っているので、国内の友達が来た時の読み込み速度が早くなります。これらのライブ壁紙のほとんどは、 Up at station B のホストであるXiyuchongからのもので、ダウンロード後にフォーマット ファクトリを使用して編集しました。上で推奨されているように、インターセプトは 8 秒、コード レートは 1.5M、1 秒あたりのフレーム数は 25、H264 形式が使用されます。個人の小規模局であれば傍受長が長ければ大きな問題はないと思います。また、駅Bには似たようなボスがたくさんいると思いますので、皆さんもオススメしてください！

まとめ

現時点では、このライブ壁紙のランダム グラフ API は非常に満足のいくもので、コードの実装に少し欠陥がありますが、正常に実行できます。見た目も素晴らしいので、本当にお勧めします！ご質問がございましたら、コメント欄にメッセージを残してください。

おすすめ

転載: blog.csdn.net/huangwb8/article/details/127190678
おすすめ
ランキング
Web側のオンラインクラウド編集ソリューション
2つのシナリオでのJVMチューニングケース（基本テンプレートの概要-G1）-ピット概要ハイライト21を踏む（週に1回更新）
Node Sass は現在の環境のバインディングを見つけることができませんでした
RabbitMQのコマンドラインの使用方法は、手動でキューrabbitmqadminを作成します
币圈韭菜十大致命操作（八）热爱幻想，无视现实
Wide Face+YOLOV7 顔検出
shrioの研究ノート
Eclipseは「：不明なMavenの設定の問題」を示します
6512. [3.18] GDOI2020シミュレーションツリーとパス
不像总结的总结
アーカイブ
もっと
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(35)
2024-04-29(5)
2024-04-28(12)

コードワールド

© 2018 codetd.com