子比主题 – 底部页脚动物墙美化

美化简介

这是一款子比主题的底部页脚动物墙美化，这款美化适配了PC和手机端，还是比较实用的一款美化，放到自己的底部很有效果，并且这个只做了子比默认的页脚，如果是二开的自己测试！

美化亮点

动态动物墙效果：页面底部将会出现一组生动有趣的动物图标或动画元素，打破传统页脚的沉闷，为访客带来视觉惊喜。
PC端 + 手机端完美适配：无论用户使用电脑、平板还是手机，动物墙都会根据屏幕尺寸自动调整布局与动画效果，确保浏览体验始终流畅。
轻量级代码实现：无需安装额外插件，不拖慢网站速度，简单部署即可生效。
专为子比主题优化：本美化基于子比主题默认页脚结构开发，兼容性强，安装后无需复杂调整。如你对主题进行了二次开发，建议先备份再测试。

代码部署

定位：/wp-content/themes/zibll/footer.php文件，搜下面的代码

[hidecontent type=”reply” desc=”隐藏内容：评论后查看”]

<footer class="footer">

将下面的代码放到搜的代码的上面即可，里面的图片自己本地一下，要不然到时候图片还是远程的！

<div id="footer-animal">
    <div class="animal-wall"></div>
    <img class="animal entered loaded" src="https://oss.xkzhi.com/2026/03/01/footer_animal.avif" data-lazy-src="https://oss.xkzhi.com/2026/03/01/footer_animal.avif" alt="动物" data-ll-status="loaded">
</div>

[/hidecontent]

CSS代码

将下面代码放到：子比主题–>>自定义CSS样式！

[hidecontent type=”reply” desc=”隐藏内容：评论后查看”]

#footer-animal {
  position: relative;
  width: 100%
}

#footer-animal .animal-wall {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 36px;
  max-width: none;
  background: #bcb0a4 repeat center;
  background-size: auto 100%;
  box-shadow: 0 4px 7px rgba(0,0,0,.15)
}

#footer-animal img.animal {
  position: relative;
  max-width: min(974px,100%);
  margin: 0 auto;
  display: block
}

[/hidecontent]