WordPress网站底部信息美化的教程

网站的页脚信息，如运行时间等内容可在页脚内容里进行配置，使用 HTML 语言，也支持 script 标签，页脚内容配置如下：

HTML (底部信息)：

<div class="github-badge-big">
        <span class="badge-subject"><i class="fa fa-id-card"></i> 备案号 </span>
        <span class="badge-value bg-orange">
            <!-- 备案链接 -->
            <a href="备案链接 target="_blank" one-link-mark="yes">备案号</a>
        </span>
    </div>
 
    <div class="github-badge-big">
        <span class="badge-subject"><i class="fa fa-copyright" aria-hidden="true"></i>Copyright </span>
        <span class="badge-value bg-red">2023-2024</i>
            <a href="hhttps://www.bailuze.com/" target="_blank" one-link-mark="yes">@ 鹿泽
        </span>
        </script>
    </div>
 
    <!-- 运行时间 -->
    <div class="github-badge-big">
        <span class="badge-subject"><i class="fa fa-clock-o"></i> Running Time</span>
        <span class="badge-value bg-green"><span id="blog_running_days" class="odometer odometer-auto-theme"></span>
            天
            <span id="blog_running_hours" class="odometer odometer-auto-theme"></span>
            小时
            <span id="blog_running_mins" class="odometer odometer-auto-theme"></span>
            分钟
            <span id="blog_running_secs" class="odometer odometer-auto-theme"></span>
             秒
        </span>

CSS（样式表）：

也可以通过 CSS 对底部信息进行美化

<style>
/* 核心样式 */
.github-badge {
display: inline-block;
border-radius: 4px;
text-shadow: none;
font-size: 13.1px;
color: #fff;
line-height: 15px;
margin-bottom: 5px;
font-family: "Open Sans", sans-serif;
}
.github-badge .badge-subject {
display: inline-block;
background-color: #4d4d4d;
padding: 4px 4px 4px 6px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
font-family: "Open Sans", sans-serif;
}
.github-badge .badge-value {
display: inline-block;
padding: 4px 6px 4px 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
font-family: "Open Sans", sans-serif;
}
.github-badge-big {
display: inline-block;
border-radius: 6px;
text-shadow: none;
font-size: 14.1px;
color: #fff;
line-height: 18px;
margin-bottom: 7px;
}
.github-badge-big .badge-subject {
display: inline-block;
background-color: #4d4d4d;
padding: 4px 4px 4px 6px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.github-badge-big .badge-value {
display: inline-block;
padding: 4px 6px 4px 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.bg-orange {
background-color: #ec8a64 !important;
}
.bg-red {
background-color: #cb7574 !important;
}
.bg-apricots {
background-color: #f7c280 !important;
}
.bg-casein {
background-color: #dfe291 !important;
}
.bg-shallots {
background-color: #97c3c6 !important;
}
.bg-ogling {
background-color: #95c7e0 !important;
}
.bg-haze {
background-color: #9aaec7 !important;
}
.bg-mountain-terrier {
background-color: #99a5cd !important;
}
</style>

实际效果如图：

👋 感谢您的观看！