子比主题美化 – 新版动物墙页脚美化(PC 移动已适配)

效果图

教程开始

进入网站目录/wp-content/themes/zibll/footer.php文件，替换为下面代码，其中的css位置可自行替换，也可以使用内嵌式css。把link标签这一行修改为<style>css代码</style>

<?php
/*
 * @Author        : Qinver
 * @Url           : zibll.com
 * @Date          : 2020-09-29 13:18:36
 * @LastEditTime  : 2023-09-16 13:53:11
 * @Email         : 770349780@qq.com
 * @Project       : Zibll子比主题
 * @Description   : 一款极其优雅的Wordpress主题
 * @Read me       : 感谢您使用子比主题，主题源码有详细的注释，支持二次开发。
 * @Remind        : 使用盗版主题会存在各种未知风险。支持正版，从我做起！
 */
?>
<link rel="stylesheet" href="/wp-content/themes/zibll/css/5iml.css">
<div id="footer-animal">
    <div class="animal-wall"></div>
    <img class="animal entered loaded"
         src="/demo/footer_animal.avif"
         data-lazy-src="/demo/footer_animal.avif"
         alt="动物"
         data-ll-status="loaded">
</div>

<footer id="footer">
    <div id="footer-wrap">
        <div id="footer-left">
            <div class="footer-title">茉莉小栈・5IML</div>
            <div class="wordcount">茉莉小栈，专注源码下载、插件分享、建站教程与网站优化。精选优质资源，让建站更简单，让资源触手可及。</div>
        </div>
        <div id="footer-right">
            <p>数据库查询：<?php echo get_num_queries(); ?>次 页面加载耗时<?php timer_stop(3); ?> 秒</p>
            <div class="footer-totop">
                <a href="javascript:(scrollTopTo());"><i class="fa fa-chevron-up"></i></a>
            </div>
            <div class="footer-info">
                <a href="https://beian.miit.gov.cn/"><span class="mx-p">皖ICP备2025078946号-2</span></a>
            </div>
            <div class="footer-service">
                <a title="子比主题" target="_blank" rel="noopener external nofollow noreferrer" href="https://www.zibll.com/?ref=47498"><img alt="子比主题" src="/wp-content/themes/zibll/img/logo.png"></a>
                <a title="宝塔" target="_blank" rel="noopener external nofollow noreferrer"><img alt="宝塔" src="/demo/bt.png"></a>
                <a title="氿糸主题" href="https://9imi.com/?ete_ic=43" rel="noopener external nofollow noreferrer"><img alt="氿糸主题" src="/demo/logo.png"></a>
            </div>
        </div>
    </div>
</footer>

<?php wp_footer(); ?>
</body>
</html>

css代码部分

其中的图片素材自行替换即可

#footer-animal{position:relative;width:100%}#footer-animal .animal-wall{position:absolute;bottom:0;width:100%;height:36px;max-width:none;background:#bcb0a4 url(/demo/footer_wall.avif) 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}#footer{position:relative;background:#e68282;background-attachment:scroll;background-position:bottom;background-size:cover}#footer-wrap{position:relative;padding:40px 20px;text-align:center}#footer-wrap{padding:50px 5% 35px 5%;display:flex;flex-wrap:wrap;position:relative}#footer-wrap > div{width:50%}#footer-left{text-align:left}.footer-title{font-size:30px;color:#fff}#footer-right{text-align:right;margin-top:auto}#footer-right p,#footer-right a{color:#fff}.footer-totop{position:absolute;top:20px;left:50%;transform:translateX(-50%)}.footer-totop i{font-size:2rem;animation:footerToTop 1.2s linear infinite;color:#fff}.footer-info a{margin-left:20px;transition:0.2s;text-decoration:none}.footer-info a:hover img{filter:none !important;transition:0.2s}.footer-service img{height:30px;filter:brightness(1000%);margin-left:20px;margin-top:10px;transition:0.2s}.footer-service img:hover{filter:brightness(100%);transition:0.2s}@keyframes footerToTop{0%{transform:translateY(0)}60%{transform:translateY(-25%)}100%{transform:translateY(0)}}@media screen and (max-width:768px){#footer-wrap > div{width:100%;text-align:center}.wordcount{margin:0 auto}}@media screen and (max-width:1023px){#footer-animal .animal-wall{height:4vw}.wordcount{width:100%;margin:10px 0;padding:0 5px;color:#F8F9F9;text-align:justify;text-align-last:center;line-height:1.6;box-sizing:border-box}}@media screen and (min-width:998px){.wordcount{width:70%}}.wordcount{color:#F8F9F9}

图片素材部分