子比主题教程：添加底部徽章及修改链接和运行时间

简介

在这篇教程中，我将展示如何在使用子比（Zibll）主题上添加带有Font Awesome图标的底部徽章。这些徽章可以用于显示关于本站、侵权处理、网站地图、申请友链等信息。我还将介绍如何修改徽章链接以及如何设置运行时间显示。

效果图

部署教程

1.准备工作

确保您的WordPress网站已安装并启用子比主题。子比主题是默认引用了Font Awesome 4图标库

2.添加CSS

将以下CSS代码添加到您的主题的自定义CSS区域中。可以在WordPress后台导航

Zibll主题设置 – 全局&功能 – 自定义代码 – 自定义CSS样式 里面。

隐藏内容，输入密码后查看

微信扫描二维码或搜索【狐狸工具盒】小程序，输入【2024080704】获取密码验证后才能查看！！！

提交

CSS代码已进行压缩，以提高加载速度和优化性能。如果需要修改，请先将代码格式化。

3.添加HTML结构

将以下HTML代码添加到您的子比主题的 Zibll主题设置 – 页面&显示 – 底部页脚 – 版块二 里面

<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>

4.添加运行时间脚本

将以下JavaScript代码添加到您的主题的自定义JavaScript区域中。可以在WordPress后台导航

Zibll主题设置 – 全局&功能 – 自定义代码 – 自定义javascript代码 里面。

//运行时间脚本
  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();

5.如何修改链接和运行时间

• 修改链接：在上述HTML代码中找到 href="链接" 部分，将链接替换为您希望链接到的具体URL。例如：

<a class="badge-link" href="https://www.ahfi.cn/about" rel="external nofollow" target="_blank"><span class="badge-value bg-about">关于本站</span></a>

• 修改运行时间：在JavaScript代码中找到var BirthDay = new Date("10/1/2019 00:00:00");，将日期10/1/2019 00:00:00修改为您的网站启动日期。

过这些步骤，您的网站将显示带有Font Awesome图标的底部徽章，并显示网站的运行时间。按照教程操作，您可以轻松实现子比主题的自定义效果。

教程结束

文章没读爽？点我试试随机文章