前言

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

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

---

添加网站底部运行时间

看到博客下方有一行：

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

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

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

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

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

<script>
// 运行时间统计
function secondToDate(second) {
    if (!second) {
      return 0;
    }
    var time = new Array(0, 0, 0, 0, 0);
    if (second >= 365 * 24 * 3600) {
      time[0] = parseInt(second / (365 * 24 * 3600));
      second %= 365 * 24 * 3600;
    }
    if (second >= 24 * 3600) {
      time[1] = parseInt(second / (24 * 3600));
      second %= 24 * 3600;
    }
    if (second >= 3600) {
      time[2] = parseInt(second / 3600);
      second %= 3600;
    }
    if (second >= 60) {
      time[3] = parseInt(second / 60);
      second %= 60;
    }
    if (second > 0) {
      time[4] = second;
    }
    return time;
  }
  function setTime() {
    /*此处为网站的创建时间*/
    var create_time = Math.round(new Date(Date.UTC(2021, 5, 12, 0, 0, 0)).getTime() / 1000);
    var timestamp = Math.round((new Date().getTime() + 8 * 60 * 60 * 1000) / 1000);
    currentTime = secondToDate((timestamp - create_time));
    currentTimeHtml = currentTime[0] + '年' + currentTime[1] + '天'
            + currentTime[2] + '时' + currentTime[3] + '分' + currentTime[4]
            + '秒';
    document.getElementById("htmer_time").innerHTML = currentTimeHtml;
  }
  setInterval(setTime, 1000);
 </script>

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

 

---

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

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

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

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

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

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

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

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

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

 

代码如下：

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

保存即可，发现图片灯箱就自动添加好啦~

注：如果打开图片后消失，请注意看看：class和data-rel这两个属性，应该放在<a>里才行。