热门教程笔记子比主题子比美化 – 底部可爱页脚美化样式

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上面即可，自己改一下下面的代码文字、链接等

<!--可爱自定义底部开始-->
<style>
.footer{display: none;}
body{
    --acg-footer:url(https://www.hxino.com/xiazai/bg-footer-cat.png) no-repeat bottom;
}
.dark-theme{
    --acg-footer:url(https://www.hxino.com/xiazai/bg-footer-cat-dark.png) no-repeat bottom;
}
@media (max-width: 800px){.miacg-model-footer{display: none;}}
.footer {
    display:none;
}
.miacg-col-24 {
    width: 100%;
    padding: 0;
}
.mi-loading {
    display: none;
}
.miacg-model-footer {
    background: var(--acg-footer);
    -moz-background-size: 1920px auto;
    -o-background-size: 1920px auto;
    background-size: 1920px auto;
    background-position: top;
    min-width: 1200px;
}
.miacg-model-footer .star-tree {
    text-align: center;
}
.miacg-model-footer .star-tree img {
    height: 80px;
    width: 80px;
}
.miacg-model-footer .footer-content {
    width: 1200px;
    border-bottom: 1px dashed #FFB5C3;
    margin: 0 auto;
    text-align: center;
}
.miacg-model-footer .footer-center, .miacg-model-footer .footer-left, .miacg-model-footer .footer-right {
    width: 300px;
    display: inline-block;
    vertical-align: top;
}
.miacg-model-footer .footer-left {
    text-align: right;
}
.miacg-model-footer .link-list {
    display: inline-block;
    vertical-align: middle;
    padding: 0 10px 10px;
}
.miacg-model-footer .link-list .link-item {
    display: block;
    height: 26px;
    width: auto;
    font-size: 12px;
    color: #333333;
    line-height: 26px;
    text-align: left;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
}
.miacg-model-footer .link-list .link-item a {
    color: inherit;
}
.miacg-model-footer .footer-center {
    width: 360px;
}
.miacg-model-footer .code-block {
    display: inline-block;
    padding-bottom: 10px;
    width: 80px;
    text-align: center;
    vertical-align: middle;
}
.miacg-model-footer .code-block .qr-code {
    display: block;
    height: 64px;
    width: 64px;
    margin: 0 auto;
}
.miacg-model-footer .code-block .text {
    height: 28px;
    font-size: 12px;
    line-height: 28px;
    color: #666666;
    text-align: center;
}
.miacg-model-footer .footer-right {
    text-align: left;
}
.miacg-model-footer .feedback-btn {
    display: inline-block;
    height: 24px;
    width: auto;
    padding: 0 8px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    font-size: 12px;
    line-height: 24px;
    color: #FFB5C3;
    background-color: #ffffff;
    cursor: pointer;
}
.miacg-model-footer .feedback-btn:hover {
    color: #ffffff;
    background-color: var(--acg-color);
}
.miacg-clear:after, .miacg-clearfix:after, .miacg-form-horizontal .miacg-form-group:after, .miacg-row:after, .pay-panel .method .list:after, .pay-panel .order .list:after {
    content: "";
    display: table;
    clear: both;
}
.miacg-model-footer .block-bottom {
    display: block;
    padding: 20px 18px;
    font-size: 12px;
    color: #999999;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
    background-color: var(--acg-color);
}
.miacg-dark {
    color: #999999;
}
</style>
<div class="miacg-col-24 miacg-col-space-none">
   <div class="miacg-model miacg-model-footer">
      <div class="star-tree">
       <img src="https://hxino.com/xiazai/star-tree.gif" >
    </div>
      <div class="footer-content miacg-clearfix">
        <div class="footer-left">
            <ul class="link-list">
            <li class="link-item link"> </li>
              <li class="link-item link"><a href="地址" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  target="_blank">名称</a></li>                </ul>
                <ul class="link-list">
          <li class="link-item link"><a href="地址" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  target="_blank">名称</a></li>                </ul>
                <ul class="link-list">
          <li class="link-item link"><a href="地址" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  target="_blank">名称</a></li>                </ul>
        </div>
      <div class="footer-center">
          <div class="code-block"><img class="qr-code" src="https:///wp-content/uploads/2023/09/5E178C047F6F18B0A0B856EEA228ED90.jpg" alt="客服微信">
            <p class="text">客服微信</p></div><div class="code-block"><img class="qr-code" src="https:///wp-content/uploads/2024/09/IMG_0441.jpg" alt="客服QQ">
            <p class="text">客服QQ</p></div><div class="code-block"><img class="qr-code" src="https:///wp-content/uploads/2024/09/F52DED4B4364524298F163FB252E12CB.jpg" alt="QQ交流群">
            <p class="text">QQ交流群</p></div>      </div>
      <div class="footer-right">
          <ul class="link-list">
          <li class="link-item link">QQ：66666</li>
<li class="link-item link">QQ群：6666666</li>
<li class="link-item link">邮箱：6666666@qq.com</li>          </ul>
          <a href="http://wpa.qq.com/msgrd?v=3&uin=666666&site=qq&menu=yes" rel="external nofollow"  class="feedback-btn J_contact" target="_blank">意见反馈</a>
      </div>
      </div>
    <div class="block-bottom">
    <span class="b2-dot">・</span>
    <?php if (function_exists('dynamic_sidebar')) {
    dynamic_sidebar('all_footer'); }?>
    <br>Copyright © 2023<a href="<?php bloginfo('url'); ?>" rel="external nofollow"  rel="home"> <?php bloginfo('name'); ?></a>
    <span class="b2-dot">・</span>
      <?php
      echo sprintf(__('查询 %s 次，','b2'),get_num_queries());
      echo sprintf(__('耗时 %s 秒','b2'),timer_stop(0,4));
      ?>
  </div>
</div>
</div>
</div>
<!--可爱自定义底部结束-->