前言#

使用 Sakurairo 这款 WordPress 主题已经很久了，一开始建站的时候是从 Sakura 主题一直折腾到现在，也学习其他网站很多的内容，自定义做了一些美化，在此就把自己做的美化分享出来，仅供学习参考。

这一章内容主要有：添加网站底部运行时间，图片灯箱自动给图片加链接（fancybox）。

添加网站底部运行时间#

看到博客下方有一行：

footer-runtime

这样的标识，可以记录博客运行的时间，在博客上留下你的足迹。实现起来也很简单：

只需要打开主题设置页面 - 全局设置 - 页尾设置，在页尾信息那里添加下面的代码：

1
<div style="color: #F08047;margin-top: -18px" class="ui inverted m-text-thin m-text-spaced">
2
My Blog Has Been Running For：<span id="htmer_time" class="item m-text-thin"></span>
3
(*๓´╰╯`๓)</div>

此时，里面的文字可以自行修改。

重要的来了，接下来在下面的页尾附加代码这里，添加下面代码：

1
<script>
2
// 运行时间统计
3
function secondToDate(second) {
4
  if (!second) {
5
    return 0;
6
  }
7
  var time = new Array(0, 0, 0, 0, 0);
8
  if (second >= 365 * 24 * 3600) {
9
    time[0] = parseInt(second / (365 * 24 * 3600));
10
    second %= 365 * 24 * 3600;
11
  }
12
  if (second >= 24 * 3600) {
13
    time[1] = parseInt(second / (24 * 3600));
14
    second %= 24 * 3600;
15
  }
16
  if (second >= 3600) {
17
    time[2] = parseInt(second / 3600);
18
    second %= 3600;
19
  }
20
  if (second >= 60) {
21
    time[3] = parseInt(second / 60);
22
    second %= 60;
23
  }
24
  if (second > 0) {
25
    time[4] = second;
26
  }
27
  return time;
28
}
29
function setTime() {
30
  /* 此处为网站的创建时间（注意：Date.UTC 的月份从 0 开始计） */
31
  var create_time = Math.round(new Date(Date.UTC(2021, 5, 12, 0, 0, 0)).getTime() / 1000);
32
  var timestamp = Math.round((new Date().getTime() + 8 * 60 * 60 * 1000) / 1000);
33
  currentTime = secondToDate((timestamp - create_time));
34
  currentTimeHtml = currentTime[0] + '年' + currentTime[1] + '天'
35
          + currentTime[2] + '时' + currentTime[3] + '分' + currentTime[4]
36
          + '秒';
37
  document.getElementById("htmer_time").innerHTML = currentTimeHtml;
38
}
39
setInterval(setTime, 1000);
40
</script>

注意中间有注释的下一行，中间的日期需要自行修改成你网站创建的时间。最后点击保存就可以看到了。

WARNING
如果你开启了什么页面缓存，可能需要刷新缓存后查看。

图片灯箱自动给图片加链接#

这个灯箱添加的主要是 fancybox 灯箱的方法，其他的灯箱请自测。

首先需要在 iro 主题设置里 - 其他设置 - 低使用设置里打开 fancybox 灯箱。或者说是在刚才的页尾信息里自己添加自己的 fancybox 而不用官方给的。

我这里是用了自己的 fancybox 灯箱，在页尾信息里添加了：

1
<!-- 图片放大 -->
2
<script src="https://cdn.statically.io/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>

同时还需要在低使用设置里 - 自定义插入 Header 代码，添加：

1
<!-- 图片放大 -->
2
<link rel="stylesheet" href="https://cdn.statically.io/libs/fancybox/3.5.7/jquery.fancybox.min.css" />

此时的使用的是 Statically CDN，在全球速度都很不错，也可以自己下载到自己服务器上更换链接。

接下来就是打开主题的目录，找到 function.php，在头部 <?php 之后添加下列代码：

WARNING
注意是在头部的 <?php 之后添加，建议就立刻在附近添加，如图

func-php-loc

代码如下：

1
/** 图片灯箱自动给图片加链接 **/
2
add_filter('the_content', 'fancybox');
3
function fancybox($content){
4
    $pattern = array("/<img(.*?)src=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\\\")(.*?)>/i","/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\\\")(.*?)>(.*?)<\\/a>/i");
5
    $replacement = array('<a\$1href=\$2\$3.\$4\$5 data-fancybox="gallery"><img\$1 src=\$2\$3.\$4\$5\$6>','<a\$1href=\$2\$3.\$4\$5 data-fancybox="images"\$6>\$7');
6
    $content = preg_replace($pattern, $replacement, $content);
7
    return $content;
8
}