正在努力加载中~请稍等~

文章
文章
!
您也想出现在这里吗？ 点击联系我们吧!
当前位置：首页>源码分享>B2源码> B2主题添加个好看的底部导航

B2主题添加个好看的底部导航

  • B2源码
  • 发布于
  • 文章ID：2222
    • 本文共 11727个字，预计阅读全部时间需要39分5秒。
  • 编辑

本文是《免费（共164篇）》专题的第 154 篇。阅读本文前，您可以先阅读前面的一些文章：

效果图：

B2主题添加个好看的底部导航

教程：

第一步：

打开自己网站下的 /wp-content/themes/b2/funactions.php 文件，然后把下面的代码加入到文件内。

//获取评论数量
function zfunc_comments_users($postid=0,$which=0) {
  $comments = get_comments('status=approve&type=comment&post_id='.$postid); //获取文章的所有评论
  if ($comments) {
    $i=0; $j=0; $commentusers=array();
    foreach ($comments as $comment) {
      ++$i;
      if ($i==1) { $commentusers[] = $comment->comment_author_email; ++$j; }
      if ( !in_array($comment->comment_author_email, $commentusers) ) {
        $commentusers[] = $comment->comment_author_email;
        ++$j;
      }
    }
    $output = array($j,$i);
    $which = ($which == 0) ? 0 : 1;
    return $output[$which]; //返回评论人数
  }
  return 0; //没有评论返回0
};
// 随机文章
function random_posts(
    $posts_num=5,$before='<li>',$after='</li>'){
    global $wpdb;
    $sql = "SELECT ID, post_title,guid
            FROM $wpdb->posts
            WHERE post_status = 'publish' ";
    $sql .= "AND post_title != '' ";
    $sql .= "AND post_password ='' ";
    $sql .= "AND post_type = 'post' ";
    $sql .= "ORDER BY RAND() LIMIT 0 , $posts_num ";
    $randposts = $wpdb->get_results($sql);
    $output = '';
    foreach ($randposts as $randpost) {
        $post_title = stripslashes($randpost->post_title);
        $permalink = get_permalink($randpost->ID);
        $output .= $before.'<a class="item-foot" href="'
            . $permalink . '"  rel="bookmark" data-toggle="tooltip" data-original-title="随机文章：';
        $output .= $post_title . '"><svg class="icon" aria-hidden="true"><use xlink:href="#iconlianjie"></use></svg><span id="wz">' . $post_title . '</span></a>';
        $output .= $after;
    }
    echo '<div id="footgundong" class="wz"><ul>'.$output.'</ul></div>';
}
//点赞统计
function dz($post_id){
    global $wpdb;
    $sql = "SELECT SUM(`meta_value`) as num FROM `wp_postmeta` WHERE `meta_key`='like' AND `post_id`=$post_id";
    $results = $wpdb->get_results($sql);
    echo  $results[0]->num;
}

第二步：

打开自己网站下的/wp-content/themes/b2/footer.php文件，在</footer>下面添加下方代码。 打开自己网站下的/wp内容/主题/b2/footer.php文件，在</fount>下面添加下方代码。 

<!--底部导航-->
<div class="footwaveline">
    <i style="background-image: url(https://www.zym88.cn/wp-content/uploads/2022/03/2ba3e3376c27.png);display: inline-block;width: 210px;height: 120px;position: fixed;bottom: 0;z-index: 110;background-size: 100%;"></i>
    <div style="background: url(https://www.zym88.cn/wp-content/uploads/2022/03/cf3cdc8e21d1.png) 0 0 repeat-x;height: 3px;width: 100%;position: fixed;background-size: 10px 3px;z-index: 98;bottom: 40px;"></div>
    <div id="shi" style="position: fixed;bottom: 0;margin-left: 200px;z-index: 99;">
    <h4 class="my-face" style="font-size:13px;margin:0 5px 2px 5px;color:#797979;margin-bottom: 10px;">夕阳无别事，等风也等你</h4>
    </div>
  <div style="width: 100%;height: 40px;position: fixed;bottom: 0;z-index: 97;box-shadow: 0 -2px 10px rgb(0 0 0 / 10%);background:#fff;">
    <nav class="joe_header__below-logon" style="float: right;margin-right: 50px;">
     <?php 
          if (!is_single()) {
            echo random_posts()." <span class=\"wz-span\">随机推荐</span>";
        }
        if(is_single()){
      ?>
      <span style="margin-left:20px;">
        <a href="javascript:(scrollTo('#comments',-100));" data-toggle="tooltip" data-original-title="评论">
          <svg class="icon" aria-hidden="true"><use xlink:href="#iconpinglun"></use></svg><span style="color:var(--minor);">评论(<count><?php echo zfunc_comments_users($post->ID); ?></count>)</span>
        </a>
      </span>                
      <span style="margin-left:20px;line-height: 45px;">
        <a class="share-btn poster" poster-share="<?php the_ID();?>" title="分享海报" href="javascript:;">
          <svg class="icon" aria-hidden="true"><use xlink:href="#iconfenxiang"></use></svg>分享
        </a>
      </span>
      <?php } ?>
      <span style="margin-left:20px;line-height: 45px;">
        <a href="javascript:void(0);" onclick="javascript:addshoucang()" data-toggle="tooltip" title="收藏本站">
          <svg class="icon" aria-hidden="true"><use xlink:href="#iconshoucang"></use></svg>使用Ctrl+D收藏本站
        </a>
      </span>
      <a href="javascript:(scrollTo('#comments',-100));" href="javascript:(scrollTo());" id="percentage" data-toggle="tooltip" data-original-title="返回顶部">
        <svg class="icon" aria-hidden="true"><use xlink:href="#icondingwei"></use></svg>0%
      </a>
    </nav>
  </div>
</div>
<!--底部导航-->

图片资源是站长放在自己网站媒体库里的，你们把图片保存下来上传到自己网站媒体库即可。

第三步：

进入后台B2主题设置>常规设置，在底部HTML标签加入下方代码。

<!-- 引入VUE -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<!-- 引入样式 -->
<script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.6/lib/index.js"></script>
<!-- 引入组件库 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.6/packages/theme-chalk/lib/index.css">
<!--自用阿里巴巴图标库-->
<script src="//at.alicdn.com/t/font_2232826_a0tvv0wxh9n.js"></script>

第四步：

自定义css样式加入下方代码。在style.css文件里

/* 底部导航 start */.my-face {
    animation: my-face 5s infinite ease-in-out;
    color: #00f1ff;
    display: inline-block;
    margin: 0 5px;
}
@-webkit-keyframes my-face {
    2%, 24%, 80% {
        -webkit-transform: translate(0, 1.5px) rotate(1.5deg);
        transform: translate(0, 1.5px) rotate(1.5deg)
    }
    4%, 68%, 98% {
        -webkit-transform: translate(0, -1.5px) rotate(-.5deg);
        transform: translate(0, -1.5px) rotate(-.5deg)
    }
    38%, 6% {
        -webkit-transform: translate(0, 1.5px) rotate(-1.5deg);
        transform: translate(0, 1.5px) rotate(-1.5deg)
    }
    8%, 86% {
        -webkit-transform: translate(0, -1.5px) rotate(-1.5deg);
        transform: translate(0, -1.5px) rotate(-1.5deg)
    }
    10%, 72% {
        -webkit-transform: translate(0, 2.5px) rotate(1.5deg);
        transform: translate(0, 2.5px) rotate(1.5deg)
    }
    12%, 64%, 78%, 96% {
        -webkit-transform: translate(0, -.5px) rotate(1.5deg);
        transform: translate(0, -.5px) rotate(1.5deg)
    }
    14%, 54% {
        -webkit-transform: translate(0, -1.5px) rotate(1.5deg);
        transform: translate(0, -1.5px) rotate(1.5deg)
    }
    16% {
        -webkit-transform: translate(0, -.5px) rotate(-1.5deg);
        transform: translate(0, -.5px) rotate(-1.5deg)
    }
    18%, 22% {
        -webkit-transform: translate(0, .5px) rotate(-1.5deg);
        transform: translate(0, .5px) rotate(-1.5deg)
    }
    20%, 36%, 46% {
        -webkit-transform: translate(0, -1.5px) rotate(2.5deg);
        transform: translate(0, -1.5px) rotate(2.5deg)
    }
    26%, 50% {
        -webkit-transform: translate(0, .5px) rotate(.5deg);
        transform: translate(0, .5px) rotate(.5deg)
    }
    28% {
        -webkit-transform: translate(0, .5px) rotate(1.5deg);
        transform: translate(0, .5px) rotate(1.5deg)
    }
    30%, 40%, 62%, 76%, 88% {
        -webkit-transform: translate(0, -.5px) rotate(2.5deg);
        transform: translate(0, -.5px) rotate(2.5deg)
    }
    32%, 34%, 66% {
        -webkit-transform: translate(0, 1.5px) rotate(-.5deg);
        transform: translate(0, 1.5px) rotate(-.5deg)
    }
    42% {
        -webkit-transform: translate(0, 2.5px) rotate(-1.5deg);
        transform: translate(0, 2.5px) rotate(-1.5deg)
    }
    44%, 70% {
        -webkit-transform: translate(0, 1.5px) rotate(.5deg);
        transform: translate(0, 1.5px) rotate(.5deg)
    }
    48%, 74%, 82% {
        -webkit-transform: translate(0, -.5px) rotate(.5deg);
        transform: translate(0, -.5px) rotate(.5deg)
    }
    52%, 56%, 60% {
        -webkit-transform: translate(0, 2.5px) rotate(2.5deg);
        transform: translate(0, 2.5px) rotate(2.5deg)
    }
    58% {
        -webkit-transform: translate(0, .5px) rotate(2.5deg);
        transform: translate(0, .5px) rotate(2.5deg)
    }
    84% {
        -webkit-transform: translate(0, 1.5px) rotate(2.5deg);
        transform: translate(0, 1.5px) rotate(2.5deg)
    }
    90% {
        -webkit-transform: translate(0, 2.5px) rotate(-.5deg);
        transform: translate(0, 2.5px) rotate(-.5deg)
    }
    92% {
        -webkit-transform: translate(0, .5px) rotate(-.5deg);
        transform: translate(0, .5px) rotate(-.5deg)
    }
    94% {
        -webkit-transform: translate(0, 2.5px) rotate(.5deg);
        transform: translate(0, 2.5px) rotate(.5deg)
    }
    0%, 100% {
        -webkit-transform: translate(0, 0) rotate(0);
        transform: translate(0, 0) rotate(0)
    }
}
@keyframes my-face {
    2%, 24%, 80% {
        -webkit-transform: translate(0, 1.5px) rotate(1.5deg);
        transform: translate(0, 1.5px) rotate(1.5deg)
    }
    4%, 68%, 98% {
        -webkit-transform: translate(0, -1.5px) rotate(-.5deg);
        transform: translate(0, -1.5px) rotate(-.5deg)
    }
    38%, 6% {
        -webkit-transform: translate(0, 1.5px) rotate(-1.5deg);
        transform: translate(0, 1.5px) rotate(-1.5deg)
    }
    8%, 86% {
        -webkit-transform: translate(0, -1.5px) rotate(-1.5deg);
        transform: translate(0, -1.5px) rotate(-1.5deg)
    }
    10%, 72% {
        -webkit-transform: translate(0, 2.5px) rotate(1.5deg);
        transform: translate(0, 2.5px) rotate(1.5deg)
    }
    12%, 64%, 78%, 96% {
        -webkit-transform: translate(0, -.5px) rotate(1.5deg);
        transform: translate(0, -.5px) rotate(1.5deg)
    }
    14%, 54% {
        -webkit-transform: translate(0, -1.5px) rotate(1.5deg);
        transform: translate(0, -1.5px) rotate(1.5deg)
    }
    16% {
        -webkit-transform: translate(0, -.5px) rotate(-1.5deg);
        transform: translate(0, -.5px) rotate(-1.5deg)
    }
    18%, 22% {
        -webkit-transform: translate(0, .5px) rotate(-1.5deg);
        transform: translate(0, .5px) rotate(-1.5deg)
    }
    20%, 36%, 46% {
        -webkit-transform: translate(0, -1.5px) rotate(2.5deg);
        transform: translate(0, -1.5px) rotate(2.5deg)
    }
    26%, 50% {
        -webkit-transform: translate(0, .5px) rotate(.5deg);
        transform: translate(0, -1.5px) rotate(2.5deg)
    }
    26%, 50% {
        -webkit-transform: translate(0, .5px) rotate(.5deg);
        transform: translate(0, .5px) rotate(.5deg)
    }
    28% {
        -webkit-transform: translate(0, .5px) rotate(1.5deg);
        transform: translate(0, .5px) rotate(1.5deg)
    }
    30%, 40%, 62%, 76%, 88% {
        -webkit-transform: translate(0, -.5px) rotate(2.5deg);
        transform: translate(0, -.5px) rotate(2.5deg)
    }
    32%, 34%, 66% {
        -webkit-transform: translate(0, 1.5px) rotate(-.5deg);
        transform: translate(0, 1.5px) rotate(-.5deg)
    }
    42% {
        -webkit-transform: translate(0, 2.5px) rotate(-1.5deg);
        transform: translate(0, 2.5px) rotate(-1.5deg)
    }
    44%, 70% {
        -webkit-transform: translate(0, 1.5px) rotate(.5deg);
        transform: translate(0, 1.5px) rotate(.5deg)
    }
    48%, 74%, 82% {
        -webkit-transform: translate(0, -.5px) rotate(.5deg);
        transform: translate(0, -.5px) rotate(.5deg)
    }
    52%, 56%, 60% {
        -webkit-transform: translate(0, 2.5px) rotate(2.5deg);
        transform: translate(0, 2.5px) rotate(2.5deg)
    }
    58% {
        -webkit-transform: translate(0, .5px) rotate(2.5deg);
        transform: translate(0, .5px) rotate(2.5deg)
    }
    84% {
        -webkit-transform: translate(0, 1.5px) rotate(2.5deg);
        transform: translate(0, 1.5px) rotate(2.5deg)
    }
    90% {
        -webkit-transform: translate(0, 2.5px) rotate(-.5deg);
        transform: translate(0, 2.5px) rotate(-.5deg)
    }
    92% {
        -webkit-transform: translate(0, .5px) rotate(-.5deg);
        transform: translate(0, .5px) rotate(-.5deg)
    }
    94% {
        -webkit-transform: translate(0, 2.5px) rotate(.5deg);
        transform: translate(0, 2.5px) rotate(.5deg)
    }
    0%, 100% {
        -webkit-transform: translate(0, 0) rotate(0);
        transform: translate(0, 0) rotate(0)
    }
}
/* end */@media (max-width: 800px){.footwaveline{display: none;
#footgundong{margin-left:20px;overflow: overlay;display: inline-flex;text-align: right;}
.item-foot{color: var(--minor);height: 45px;line-height: 45px;transition: color 0.35s;white-space: nowrap;}
.swal-footer{text-align:center;}
.swal-button {font-size: 20px;}
.count>svg,.count>text{display:none;}
.wz-span {
    border: 1px solid #bbbbbb;
    height: auto;
    color: #bbbbbb;
    font-size: 10px;
    border-radius: 2px;
    padding: 0 2px;
}
/*底部导航*/

第五步：

在child.js 加入下方代码。

//底部导航 滚动进度条百分比
$(function(){var $this=$("#footgundong");var scrollTimer;$this.hover(function(){clearInterval(scrollTimer)},function(){scrollTimer=setInterval(function(){scrollNews($this)},4000)}).trigger("mouseleave");function scrollNews(obj){var $self=obj.find("ul");var lineHeight=$self.find("li:first").height();$self.animate({"marginTop":-lineHeight+"px"},500,function(){$self.css({marginTop:0}).find("li:first").appendTo($self)}))
window.onscroll = function() {
  let scrollNow = window.pageYOffset;
  let pageClientHeight = document.documentElement.clientHeight;
  let scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight) - pageClientHeight;
  let fullWindowHeightInPercentage = Math.round((scrollNow / scrollHeight) * 100);
  let percentage = document.getElementById('percentage');
  percentage.innerHTML = '<svg class="icon" aria-hidden="true"><use xlink:href="#icondingwei"></use></svg> ' + fullWindowHeightInPercentage + '%';
  if (fullWindowHeightInPercentage == 0) percentage.innerHTML = '<svg class="icon" aria-hidden="true"><use xlink:href="#icondingwei"></use></svg> 到顶啦';
  if (fullWindowHeightInPercentage == 100) percentage.innerHTML = '<svg class="icon" aria-hidden="true"><use xlink:href="#icondingwei"></use></svg> 到底啦';
}
let t1 = 0;
let t2 = 0;
let scrollTop = 0;
let timer = null;
document.onscroll = function() {
  clearTimeout(timer);
  timer = setTimeout(isScrollEnd, 500);
  t1 = document.documentElement.scrollTop || document.body.scrollTop;
};
function isScrollEnd() {
  t2 = document.documentElement.scrollTop || document.body.scrollTop;
  let percentage = document.getElementById('percentage');
  if(t2 == t1){
    if(t2==document.body.scrollTop){}else{
      percentage.innerHTML = '<svg class="icon" aria-hidden="true"><use xlink:href="#iconA"></use></svg> 回到顶部';
    }
  }
};
function addshoucang() {
    new Vue({
            data:function(){
                this.$notify({
                    title:"⭐ 欢迎收藏本站",
                    message:"ㅤ  使用Ctrl+D即可添加收藏",
                    position: 'bottom-right',
                    offset: 50,
                    showClose: false,
                    type:""
                });
                return{visible:false}
            }
        })
};
文章链接：https://sjcnh.cn/2222.html
文章标题：B2主题添加个好看的底部导航
文章版权：@花醉 所发布的内容，部分为原创文章，转载请注明来源，网络转载文章如有侵权请联系我们！我们将在24小时内极速处理！
本文最后更新发布于2024年12月15日 23时43分15秒，某些文章具有时效性，若有错误或已失效，请在下方留言或联系：841134898@qq.com

您已阅读完《免费（共164篇）》专题的第 154 篇。您可以继续阅读该专题下面的其它文章：

本文声明 本站上的部份代码，教程，软件，插件来自会员发布以及互联网收集，不代表本站立场，仅供网友个人学习交流或测试研究使用，未经原版权作者许可，禁止用于任何商业途径！请用户仔细辨认内容的真实性，避免上当受骗！本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。请在下载24小时内删除！若您喜欢本文可附上原文链接随意转载。如无意侵害了您的权益，请发送邮件至 841134898@qq.com 或点击右侧 私信：花醉 反馈，我们将尽快处理。如果遇到付费才可观看的文章，建议升级终身VIP。全站所有资源“任意下免费看”。本站资源少部分采用7z压缩，为防止有人压缩软件不支持7z格式，建议下载7-zip。zip、rar解压，建议下载WinRAR。

给TA赞助
共{{data.count}}人
人已赞助
20222023
花醉
酒不醉人人自醉，花不迷人人自迷。
一共发布了236篇作品
!
您也想出现在这里吗？点击联系我们吧!
点击投个广告吧
共有 0 条评论
    暂无讨论，说说你的看法吧
❯
开通会员
个人中心

 有新商品 购物车

 有可用券 优惠劵
今日签到

 有新私信 私信列表

 有新消息 消息中心
快速搜索
在线客服
关注我们

  • 手机扫码打开网页

  • 微信公众号
语言切换
昼夜切换
返回顶部