美化简介

本套美化专为子比主题打造，可给网站底部添加动物墙样式，完美兼容电脑PC端与手机移动端，实用性很强，部署之后页面观感提升明显。
注意：美化仅适配子比原版默认页脚，若是二改二次开发的主题模板，请自行测试调试！

美化核心亮点

动态动物墙动画效果
页面底部加载趣味生动的动物图标动画元素，告别单调死板的传统页脚设计，给访客新颖亮眼的视觉体验。
全设备自适应兼容
PC电脑、平板、手机移动端全都适配，代码会跟随屏幕尺寸自动适配布局、调节动画展示，多端浏览丝滑无错位。
轻量无负担代码
不用额外安装插件，代码体积小巧精简，不会增加网站加载压力，复制粘贴部署就能立刻启用效果。
原生适配子比默认页脚
按照子比原版页脚结构编写，原生适配、兼容性稳定，常规原版主题直接安装即用；二次改版主题务必先备份文件再测试。

效果参考图

子比主题页脚动物墙代码部署详细步骤

一、修改footer.php文件路径

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


<footer class="footer">

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

    <img class="animal entered loaded" src="/wp-content/themes/zibll/demopages/img/footer_animal.avif" data-lazy-src="/wp-content/themes/zibll/demopages/img/footer_animal.avif" alt="动物" data-ll-status="loaded">
</div>

⚠️ 重要提醒：
图片建议下载保存到网站本地目录，如若不替换本地地址，图片会一直调用远程资源，容易出现加载失效、加载缓慢问题。

二、CSS样式放置位置

#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
}

CSS代码粘贴路径：
后台 → 子比主题设置 → 自定义CSS样式框内，粘贴对应样式代码即可生效。

可直接全段复制粘贴到文章编辑器发布，格式规整层次分明

素材图片：自行保存