WordPress站点如何添加网站运行时间

最终效果

实现方法

登录 WordPress 网站后台,前往 Appearance > Widgets,在相应的 Foot Widget Area 添加一段 Custom HTML 代码。最后再把这个 Foot Widget 放置到合适的页脚区域。

具体步骤

1. 登录 WordPress 网站后台;

2. 前往 Appearance > Widgets

WordPress Dashboard > Appearance > Widget

3. 网站运行时间通常是显示在网站页脚部分。我们可以选择一个 Foot Widget Area,然后点击 + 号,添加一个 Custom HTML block

Add a custom html block to the Footer widget area

4. 在 Custom HTML block 中,添加如下代码:

<!-- 网站运行计时统计 start-->
<left>
<span id="momk"></span><span id="momk" style="color: #ff0000;"></span>
<script type="text/javascript">
    function NewDate(str) {
        str = str.split('-');
        var date = new Date();
        date.setUTCFullYear(str[0], str[1] - 1, str[2]);
        date.setUTCHours(0, 0, 0, 0);
        return date;
    }
    function momxc() {
        var birthDay = NewDate("2022-01-14");//设置你网站的建站时间
        var today = new Date();
        var timeold = today.getTime() - birthDay.getTime();
        var sectimeold = timeold / 1000
        var secondsold = Math.floor(sectimeold);
        var msPerDay = 24 * 60 * 60 * 1000; var e_daysold = timeold / msPerDay;
        var daysold = Math.floor(e_daysold);
        var e_hrsold = (daysold - e_daysold) * -24;
        var hrsold = Math.floor(e_hrsold);
        var e_minsold = (hrsold - e_hrsold) * -60;
        var minsold = Math.floor((hrsold - e_hrsold) * -60); var seconds = Math.floor((minsold - e_minsold) * -60).toString();
        document.getElementById("momk").innerHTML = "本站已安全运行" + daysold + "天" + hrsold + "小时" + minsold + "分" + seconds + "秒";
        setTimeout(momxc, 1000);
    } momxc();
</script>
<style>
    #momk {
        animation: change 10s infinite;
        font-weight: 800;
    }
    @keyframes change {
        0% {
            color: #5cb85c;
        }
        25% {
            color: #556bd8;
        }
        50% {
            color: #e40707;
        }
        75% {
            color: #66e616;
        }
        100% {
            color: #67bd31;
        }
    }
</style>
</left>
<!-- 网站运行计时统计 over-->

或者添加下面这段代码(无变色效果,参考 ilolicon Blog 提供的教程

<?php
$uptime_text = file_get_contents("/proc/uptime");
$uptime = substr($uptime_text,0,strpos($uptime_text," "));
if (!$uptime && function_exists('shell_exec')) $uptime = shell_exec("cut -d. -f1 /proc/uptime");
$days = floor($uptime/60/60/24);
$hours = str_pad($uptime/60/60%24,2,"0",STR_PAD_LEFT);
$mins = str_pad($uptime/60%60,2,"0",STR_PAD_LEFT);
$secs = str_pad($uptime%60,2,"0",STR_PAD_LEFT);
 
echo "本站已苟延残喘运行了$days Days $hours:$mins:$secs";
?>

添加完成后,可点击 Preview 预览一下效果:

Preview预览效果

5. 预览没有问题后,点击右上角的 Update 应用改动。

Update widgets

6. 回到 WordPress后台,前往 Appearance > Customize。找到自己 WordPress 主题编辑器的页脚编辑设置部分,把步骤4中设置好的 Widget Area 拖动到相应的页脚区域,最后再点击左上角的 Public 按钮发布网站改动即可。

拖动foot wiget到合适的页脚区域

Credits: Image by Dok Sev from Pixabay

参考资料:网站底部运行时间统计

本文作者
本文作者

Justin(小贾,贾老师), Microsoft 365 认证:新式桌面管理员助理,乐天派,打工人。

本篇文章采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。