问题起因

Sakurairo提供了一个页尾代码插入的功能，╮(￣▽￣)╭很好用~ 官方文档的具体介绍戳这里~ 可以在这个路径下插入代码：iro主题设置--全局设置--页尾设置--页尾附加代码。

然而，如果设置不正确，就会出现下面这种很丑陋的效果(・-・*)：

问题的核心在于：

  • 设定了网页的背景色（设置路径：外观--主题--自定义--颜色）
  • 没有使用前台背景图片（设置路径：iro主题设置--全局设置--小组件面板和前台设置相关--前台背景--小组件面板北京切换（前台背景）--默认）
  • 前台背景图片设置了透明度（设置路径：iro主题设置--全局设置--小组件面板和前台设置相关--前台背景透明度）

这样，在wordpress设置中设定了纯色的背景颜色，而在sakurairo主题的前台背景是空图片，然而却设置了透明度（不能取消，至少是0.2），导致有一层白色的透明蒙版盖住了背景色，而自己插入的页尾代码没有被盖住，于是就导致了这个丑陋的效果。

基础知识

为了解决这个问题，首先要搞清楚sakurairo中的几个“图层”，也就是前后关系。几个元素的前后关系如下：

  • 封面，也就是进入主页看到的背景大图，随着滑动会从页面上方消失
  • 前台图片的遮罩，一层让图片变浅不影响内容阅读的白色(非深色模式下)透明图层
  • 前台图片，也就是不管如何滑动都位于浏览器上不会消失的背景
  • 背景颜色，也就是wordpress中设定的背景色，在图片不加载时会先显示

这样就能知道问题所在了。插入的页脚代码位于背景颜色之上，也在前台图片之上，但是在前台图片的遮罩之下——然而某种原因导致了这层遮罩没有盖住页尾代码。

通过紧张刺激地查找页面源代码，可以发现自己插入的页脚上效果显示正常，而可以读到其内容为：

<footer id="colophon" class="site-footer" role="contentinfo">
  <!-- ... -->
</footer>

而试着查看这个页脚的代码能找到这么一段样式代码：

.site-footer {
    background-color: rgba(255, 255, 255, 0.8);
}
.site-footer {
    padding: max(2%, 45px);
    background: rgba(255, 255, 255, .8);
    margin-left: auto;
    margin-right: auto;
    animation: blur .8s;
    transition: all 0.6s ease-in-out;
}

正是这段代码影响了前台图片的遮罩。换句话说，前台图片不是只有一个图层遮罩，而是浮于上方元素的透明背景成为了多个遮罩，而自己插入的页尾代码没有正确设置遮罩。

解决问题

那这下问题就太好解决了，只需要给自己页尾代码的元素添加对应的class即可。

<div class="site-footer" id="self-added-footer">
  <p>
    你想写的内容比如ICP备案号什么的
  </p>
</div>

这里，class="site-footer"约定了自定义元素所属类，这个类的css样式由sakurairo主题提供，可以不用管他的具体内容。而此处id="self-added-footer"则是自定义的id，也可以不加；但是加了之后可以自定义该div标签的样式，比如缩紧间距。由于id的优先级比class高，自定义的效果会优先生效。

最终效果就好多了：

好耶(～o￣▽￣)～o ~