WordPress美化-底部彩色菜单和运行时间

Tree Hole

2024-10-13

wordpress

简介

本文将展示如何在博客中添加带有Font Awesome图标的底部徽章。这些徽章可以用于显示关于本站、侵权处理、网站地图、申请友链等信息。同时还将介绍如何设置运行时间显示。

效果图

前置条件

由于需要调用Font Awesome 4图标库，因此要提前进行引入。（部分主题默认引用）

未引用该图标库的可插入以下代码：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

如果使用了果核的WPOPT插件可直接在插入代码处引用外部文件或者在页头代码、页脚代码处进行引用。

详细教程

添加CSS代码

将以下CSS代码添加到您的主题的自定义CSS区域中。如果使用的主题有子主题的话也可以新建一个CSS文件。

Core Next用户添加路径：主题设置-->插入代码-->自定义CSS

此处内容需要回复后并刷新才能查看

添加HTML结构

将以下HTML代码添加到博客的外观-->小工具-->底部小工具（左侧）-->自定义HTML

<div class="footer-badge">
  <span class="badge-title"><i class="fa fa-info-circle"></i></span><a class="badge-link" href="链接" rel="external nofollow" target="_blank"><span class="badge-value bg-about">关于本站</span></a>
</div>
<div class="footer-badge">
  <span class="badge-title"><i class="fa fa-ban"></i></span><a class="badge-link" href="链接" rel="external nofollow" target="_blank"><span class="badge-value bg-delete">侵权处理</span></a>
</div>
<div class="footer-badge">
  <span class="badge-title"><i class="fa fa-sitemap"></i></span><a class="badge-link" href="链接" rel="external nofollow" target="_blank"><span class="badge-value bg-red">网站地图</span></a>
</div>
<div class="footer-badge">
  <span class="badge-title"><i class="fa fa-link"></i></span><a class="badge-link" href="链接" rel="external nofollow" target="_blank"><span class="badge-value bg-fen">申请友链</span></a>
</div>
<div class="footer-badge">
  <span class="badge-title"><i class="fa fa-cog fa-spin"></i>运行</span><a class="badge-link" href="链接" rel="external nofollow" target="_blank"><span id="span_dt_dt" class="badge-value bg-working"></span></a>
</div>

添加运行时间脚本

将以下JavaScript代码添加到WPOPT插件或者主题自带的-->插入代码模块-->插入代码中的页头代码、页脚代码区域中。也可以和上面HTML代码添加在同一处。（注意修改代码中时间）

//运行时间脚本
<script>
  function show_date_time() {
    window.setTimeout("show_date_time()", 1000);
    var BirthDay = new Date("10/1/2019 00:00:00"); // 修改时间
    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 = (e_daysold - daysold) * 24;
    var hrsold = Math.floor(e_hrsold);
    var e_minsold = (e_hrsold - hrsold) * 60;
    var minsold = Math.floor((e_hrsold - hrsold) * 60);
    var seconds = Math.floor((e_minsold - minsold) * 60);
    var span_dt_dt = document.getElementById('span_dt_dt');
    span_dt_dt.innerHTML = '<font style=color:#fff>' + daysold + ' 天</font> <font style=color:#fff>' + hrsold + ' 时</font> <font style=color:#fff>' + minsold + ' 分</font> <font style=color:#fff>' + seconds + ' 秒</font> ';
  }
  show_date_time();
</script>

结语

通过这些步骤，你的网站将显示带有Font Awesome图标的底部徽章，并显示网站的运行时间。如有疑问可联系本站。

提示：本文最后更新于2024年10月13日，如有错误或者已经失效，请留言告知。

版权声明网站名称： 树洞笔记
本站网址：www.x8xx.cn
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！邮件：hole8443@gmail.com
网站部分内容来源于网络，版权争议与本站无关。请在下载后的24小时内从您的设备中彻底删除上述内容。
如无特别声明本文即为原创文章仅代表个人观点，版权归《树洞笔记》所有，欢迎转载，转载请保留原文链接。

THE END