这是一款为子比主题设计的底部页脚动物墙美化插件,适配PC和手机端。它通过动态动物图标或动画元素,打破传统页脚的沉闷,为访客带来视觉惊喜。插件采用轻量级代码,无需额外插件,不拖慢网站速度,且专为子比主题优化,兼容性强。部署时需将代码添加到footer.php文件和自定义CSS样式,注意图片需本地化。如主题有二次开发,建议先备份再测试。
美化简介
这是一款子比主题的底部页脚动物墙美化,这款美化适配了PC和手机端,还是比较实用的一款美化,放到自己的底部很有效果,并且这个只做了子比默认的页脚,如果是二开的自己测试!
美化亮点
动态动物墙效果:页面底部将会出现一组生动有趣的动物图标或动画元素,打破传统页脚的沉闷,为访客带来视觉惊喜。
PC端 + 手机端完美适配:无论用户使用电脑、平板还是手机,动物墙都会根据屏幕尺寸自动调整布局与动画效果,确保浏览体验始终流畅。
轻量级代码实现:无需安装额外插件,不拖慢网站速度,简单部署即可生效。
专为子比主题优化:本美化基于子比主题默认页脚结构开发,兼容性强,安装后无需复杂调整。如你对主题进行了二次开发,建议先备份再测试。
参考图:
![图片[1]-子比主题 – 底部页脚动物墙美化-玩转网](https://www.902d.com/wp-content/uploads/2026/05/c669b1b0c720260522171128.png)
代码部署
文件路径:/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代码
将下面代码放到:子比主题–>>自定义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
}
素材图片:
自行保存
![图片[2]-子比主题 – 底部页脚动物墙美化-玩转网](https://www.902d.com/wp-content/themes/zibll/demopages/img/footer_animal.avif)
网站名称:玩转网
本文链接:
版权声明:知识共享署名-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)协议进行许可
本站资源仅供个人学习交流,转载时请以超链接形式标明文章原始出处,(如有侵权联系删除)










