温馨提示：本文最后更新于2022年11月24日，已超过 30 天没有更新，某些文章具有时效性，若有错误或已失效，请在下方留言！

前言

该系列主要讲的是基于WordPress平台Sakurairo主题的美化，有关博客的内容做了一些调整及美化，在这把自己美化主题的历程分享出来，仅供学习参考。

这一期主要内容有：站点添加动态标题、添加网站运行时间、引入阿里图标库、文章内容布局美化。

一、站点添加动态标题

1. 简述

主要效果是当用户离开站点或回到站点时，网页的标题会随着改变；具体显示内容可自定义实现。

2. 实现代码

打开/wp-content/themes/Sakurairo主题目录下的header.php

在</head>前面添加下面的代码，大概在117行

image-20221201235909947

<script>
    let OriginTitile=document.title;
let titleTime;
document.addEventListener('visibilitychange',function(){
    if(document.hidden){
        document.title="(つェ⊂)誒呀，網站崩潰了";
        clearTimeout(titleTime);
        console.log('hide');
    }else{
        document.title='(*´∇｀*) 咦,又好了~ '+OriginTitile;
        console.log('show');
        titleTime=setTimeout(function(){
            document.title=OriginTitile;
        },4000);
        console.log('endChange=');
    }
});
</script>

二、添加网站运行时间

1. 简述

主要是在网站底部展示运行时间

效果展示

image-20221202000505887

2. 实现代码

具体实现方法跟添加动态标题相似，区别是在footer.php中插入script代码

打开/wp-content/themes/Sakurairo主题目录下的footer.php

大概在48行左右插入如下内容：

image-20221202000934147

<span id="runtime_span"></span>
<script type="text/javascript">function show_runtime(){window.setTimeout("show_runtime()",1000);X=new 
Date("09/28/2022 23:22:00");
Y=new Date();T=(Y.getTime()-X.getTime());M=24*60*60*1000;
a=T/M;A=Math.floor(a);b=(a-A)*24;B=Math.floor(b);c=(b-B)*60;C=Math.floor((b-B)*60);D=Math.floor((c-C)*60);
runtime_span.innerHTML="本站已勉强运行: "+A+"天"+B+"小时"+C+"分"+D+"秒"}show_runtime();
</script>

三、引入在线阿里图标库

1. 简述

常见的图标库有fontawesome、iconfont，该主题已经引入过fontawesome，如果导航栏需要使用到阿里图标需要另外引入css，阿里图库有着非常多精美的图标。

2. 添加阿里图标入库

首先需要在阿里图标库注册自己的账号，登录后选择自己想要的图标添加入库，添加完成后在购物车点击添加至项目，若没有项目则新建一个项目即可。

image-20221202002414677

跳转页面后，可以根据自己的需求修改图标颜色大小名字等内容。

点击生成代码即可！

image-20221202002525991

3. 引入css到头文件中

打开/wp-content/themes/Sakurairo主题目录下的function.php

在最底部插入刚才生成的代码//at.alicdn.com/t/c/font_3803914_sb34icq1k2f.css

image-20221202003011568

image-20221202003058998

代码内容

/**
 * 导入阿里图标css样式。
 * 
 */
function nav_ali_icon()
{
  echo '<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3803914_sb34icq1k2f.css" media="all">';
}
add_action('wp_footer','nav_ali_icon',100);

注意：由于新增图标入库，需要重新生成css文件，这时需要更新function.php中的herf内容

4. 使用方法

在需要使用的地方添加上标签即可，一般主要用在导航栏标签

回到刚才生成的页面点击图标复制代码插入到class属性中

注意：iconfont属性也需要添加上

<i class="iconfont icon-gengduoy"></i>

image-20221202003527123

四、文章内容布局美化

1. 优化横线内容不能正常显示

初始效果

image-20221202003802350

优化效果

image-20221202003833143

修改/wp-content/themes/Sakurairo/css/theme/sakura.css内容

大概在114行左右

image-20221202004141159

.entry-content hr {
    /*margin-top: 40px;*/
    margin-top: -10px;
    /*margin-bottom: 40px;*/
    display: block;
    border: 0;
    text-align: center;
    /*background: 0 0*/
}

.entry-content hr:before {
    /*content: '...';*/
    display: inline-block;
    margin-left: .6em;
    color: rgba(0, 0, 0, .8);
    position: relative;
    top: -30px;
    font-size: 28px;
    letter-spacing: .6em
}

2. 优化移动端文章标题过长错乱

初始效果

image-20221202004809151

修改/wp-content/themes/Sakurairo/inc/decorate.php内容

大概在431行左右，复制如下代码替换即可

image-20221202005040689

.pattern-center h1.cat-title,
.pattern-center h1.entry-title {
font-size: <?=iro_opt('page_temp_title_font_size'); ?>px !important;
line-height: normal !important;  /*修复文章标题显示问题*/
}

h1.entry-title {
  text-align: center;  /*文章标题居中显示*/
}