白色波浪页脚底部美化(已失效)

代码分为两个部分,一个是PHP代码,另一个是CSS代码,跟着我的教程不会有任何错!

PHP代码
首先我们要知道我们加这个底部之后,他官方的底部还存在,我们先把官方的代码删掉然后再按照下面的步骤来走,我们先到/wp-content/themes/zibll/footer.php,找到下面的代码,下面的代码是官方自带的底部,我们要给他删掉,避免后面出现两个底部。如果是子主题自己弄一下吧,在func判断一下如果启用这个页脚就隐藏子比自带的底部

查找代码

<footer class="footer">
  <?php if (function_exists('dynamic_sidebar')) {
    dynamic_sidebar('all_footer');
}?>
  <div class="container-fluid container-footer">
    <?php do_action('zib_footer_conter');?>
  </div>
</footer>

然后我们还在这个/wp-content/themes/zibll/footer.php文件里面,找到下面的代码

<?php
wp_footer();
?>

我们将下面的代码放到上面找到的代码的<?php上面即可,自己改一下下面的代码文字、链接等

<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto"style="bottom: 4px;">
    <defs>
        <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
    </defs>
    <g class="parallax">
        <use xlink:href="#gentle-wave" x="48" y="0" fill="var(--float-btn-bg)"></use>
        <use xlink:href="#gentle-wave" x="48" y="3" fill="var(--main-shadow)"></use>
        <use xlink:href="#gentle-wave" x="48" y="5" fill="var(--main-border-color)"></use>
        <use xlink:href="#gentle-wave" x="48" y="7" fill="var(--main-bg-color)"></use>
    </g>
</svg>
<div id="colophon" class="footer">
    <div id="Onecad_footer_ys2" class="footer-navi">
        <div id="huliku_title" class="huliku_wrapper">
            <div class="about widget Onecad_fl">
                <div class="title"><div class="huliku_beat_heart">
                    <div class="huliku_beat_left"></div>
                    <div class="huliku_beat_right"></div></div>
                    <h2><?php bloginfo('name');?>・TFBKW.COM</h2></div>
                <p>本站致力于分享优质实用的互联网资源,内容包括有网站搭建、建站源码、样式特效、主题美化、实用工具、素材资源、技术教程,致力打造一个IT博客!</p>
            </div>
            <div class="navis Onecad_fl hide_sm">
                <div class="navi">
                    <h2 class="title">这是第一块</h2>
                    <!--li标签自己加,想加多少个自己加-->
                    <ul>
                        <li>
                            <a href="">
                                第一个
                            </a>
                        </li>
                         <li>
                          <a href="">
                                第二个
                            </a>  
                        </li>
                        <li>
                          <a href="">
                                第三个
                            </a> 
                        </li>
                        <li>
                          <a href="">
                                第四个
                            </a>  
                        </li>
                    <li>
                    </ul>
                </div>
                <div class="navi">
                <h2 class="title">这是第二块</h2>
                    <!--li标签自己加,想加多少个自己加-->
                    <ul>
                        <li>
                            <a href="">
                                第一个
                            </a>
                        </li>
                         <li>
                          <a href="">
                                第二个
                            </a>  
                        </li>
                        <li>
                          <a href="">
                                第三个
                            </a> 
                        </li>
                        <li>
                          <a href="">
                                第四个
                            </a>  
                        </li>
                    <li>
                    </ul>
                </div>
                <div class="navi">
                    <h2 class="title">这是第三块</h2>
                    <!--li标签自己加,想加多少个自己加-->
                    <ul>
                        <li>
                            <a href="">
                                第一个
                            </a>
                        </li>
                         <li>
                          <a href="">
                                第二个
                            </a>  
                        </li>
                        <li>
                          <a href="">
                                第三个
                            </a> 
                        </li>
                        <li>
                          <a href="">
                                第四个
                            </a>  
                        </li>
                    <li>
                    </ul>
                </div>
            </div>
            <div class="ewms widget fr hide_sm">
                <ul class="huliku_clearfix">
                    <li>
                        <div>
                            <div class="Onecad_footer_ico"><i class="thumb " style="background-image:url(https://img.alicdn.com/imgextra/i1/2210123621994/O1CN0123vfxk1QbIhKWfcYq_!!2210123621994.png)"></i></div>
                            <h4>第一个</h4>
                        </div>
                        <div class="ewm-content Onecad_hide ewm-weibo">
                            <div class="ewm-main clearfix">
                                    <div class="thumb-div Onecad_fl">
                                        <i class="thumb" style="background-image:url(https://www.freeimg.cn/i/2024/03/07/65e95b587d030.png);">
                                        </i>
                                    </div>
                                    <h4>
                                    这是第一个的文字
                                    </h4>
                                    <h4>
                                        <a href="">
                                        这是第一个下面的文字
                                        </a>
                                    </h4>
                                </div>
                        </div>
                    </li>
                    <li>
                        <div>
                            <div class="Onecad_footer_ico"><i class="thumb " style="background-image:url(https://img.alicdn.com/imgextra/i2/2210123621994/O1CN01whhWGM1QbIhKiSEc2_!!2210123621994.png)"></i></div>
                            <h4>第二个</h4>
                        </div>
                        <div class="ewm-content Onecad_hide ewm-weibo">
                            <div class="ewm-main clearfix">
                                <div class="thumb-div Onecad_fl"> <i class="thumb" style="background-image:url(https://www.freeimg.cn/i/2024/03/07/65e95b4ad4934.png);"></i> </div>
                                <h4>这是第二个的文字</h4>
                                <h4><a href="" target="_blank">这是第二个下面的文字</a></h4>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div>
                            <div class="Onecad_footer_ico"><i class="thumb " style="background-image:url(https://img.alicdn.com/imgextra/i1/2210123621994/O1CN01VKBRQM1QbIhKiQ5YE_!!2210123621994.png)"></i></div>
                            <h4>这是第三个文字</h4>
                        </div>
                        <div class="ewm-content Onecad_hide ewm-weibo">
                            <div class="ewm-main clearfix">
                                <div class="thumb-div Onecad_fl"> <i class="thumb" style="background-image: url(https://www.freeimg.cn/i/2024/03/07/65e95b15740a6.png);"></i> </div>
                                <h4>这是第三个的文字</h4>
                                <h4><a href="">这是第三个下面的文字</a></h4>
                            </div>
                        </div>
                    </li>
                </ul>
                <div class="like">
                    <strong><?php $count_posts = wp_count_posts();echo $published_posts =$count_posts->publish;?></strong>
                    <h3>精品文章等您来关注</h3>
                </div>
            </div>
        </div>
        <div class="footer-colors"></div>
        <div class="footer-colors colors-shadow"></div>
        <center>
        <div id="huliku_bg_box">
            
            <div id="huliku_links">
                <ul>友情链接:<?php wp_list_bookmarks(array('title_li' => '','categorize' => 0,'category' => 0,'before' => '<span>','after' => '</span>','orderby' => 'id','show_name' => 1,'show_images' => 0)); ?><span>
                                    <a href="/links" title="友链申请" style="color: #0078ff; float: right;">
                                        友链申请+
                                    </a>
                                </span><div class="apply_link" ></div></ul>
            </div>
            
        </div>
        </center>
        <center>
            <div class="foot-copyright">
                <div class="huliku_wrapper">
                    <p class="foot-copyright-fl fla">Copyright &copy; 2023 - 2024 <a href="" style="font-size:12px;"><?php bloginfo('name');?></a> All Rights Reserved. <a rel="nofollow" target="_blank" href="" style="font-size:12px;"></a>
                    <!--・<a rel="nofollow" target="_blank" href="http://www.beian.gov.cn/" style="font-size:12px;">湘公网安备88888888888888号</a>-->
                    </p>
                </center>
            </div>
        </div>
    </div>
</div>
<link rel="stylesheet" href="https://www.tfbkw.com/wp-content/themes/ZibTF/css/tengfei_footer.css" type="text/css">

CSS代码
到了自定义CSS代码这里,我就不分享代码了,为了能够用户快速部署,我给大家打包好了文件,直接上传到:/wp-content/themes/zibll/目录下面然后解压即可

积分购买,积分多的是,反正除了买会员,没有啥用。

© 版权声明

白色波浪页脚底部美化(已失效)-春眠不觉晓
最近更新2025年10月25日
资源编号2930

付费资源
白色波浪页脚底部美化(已失效)

郑重承诺丨本站提供安全交易
增值服务:为全力打造高效、务实的资源网站,进一步提高服务
666积分
开通VIP尊享优惠特权
升级会员
THE END
点赞21 分享
评论 共1条

请登录后发表评论