代码分为两个部分,一个是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 © 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/目录下面然后解压即可
积分购买,积分多的是,反正除了买会员,没有啥用。
© 版权声明
1、本网站名称:春眠不觉晓
2、本站永久网址:https://cmbjx.com
3、本站文章内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系QQ775182000。
4、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报。
6、本站资源大多存储在云盘,如发现链接失效,请告诉我们,我们会第一时间更新。
相关推荐














- 最新
- 最热
只看作者