给WP博客添加页面底部导航

给WP博客添加页面底部导航

010415

效果截图：

图片[1]-给WP博客添加页面底部导航-乡野博文

教程步骤

先添加functions的随机文章代码 -> 再引入图标矢量库 -> 然后在footer里添加代码 -> 然后加入文字抖动、自适应(屏幕小于多少会隐藏)的css代码 -> 剩下是js代码用于触发

第一步

将下面代码复制放入子比主题的functions.php

// 随机文章
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 . '"><i class="iconfont icon-lianjie"></i><span id="wz">' . $post_title . '</span></a>';
        $output .= $after;
    }
    echo '<div id="footgundong" class="wz"><ul>'.$output.'</ul></div>';
}

第二步

在footer.php里最底部加上下面这段代码，自行修改

<!--底部导航-->
<style>
    #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;}
</style>
<div class="footwaveline">
<i style="background-image: url(https://www.atbkw.cn/wp-content/uploads/aotian/qitan/362a2c8cc4a0.png);display: inline-block;width: 210px;height: 120px;position: fixed;bottom: 0;z-index: 110;background-size: 100%;"></i>
<div class="footwavewave" style="background: url(https://www.atbkw.cn/wp-content/uploads/aotian/qita/9855fd529028.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_home()) {
              echo'<style>@media (max-width:1200px){#shi{display:none;}}.pl,.fx{display:none;}.dz{display:none !important;}</style>';
              echo random_posts();
        }?>    
            <span style="margin-left:20px;" class="pl">
                <a href="javascript:(scrollTo('#comments',-100));" data-toggle="tooltip" data-original-title="评论">
                    <i class="iconfont icon-pinglun"></i><span style="color:var(--minor);">评论</span>
                </a>
           </span>                
            <span class="dz" style="margin-left:20px;display: inline-block;">
                <a href="javascript:(scrollTo('#comments',-1000));" data-toggle="tooltip" data-original-title="点赞">
                    <i class="iconfont icon-dianzan"></i>点赞
                </a>
            </span>
            <span style="margin-left:20px;line-height: 45px;" class="fx">
                <a class="bds simg" data-toggle="modal" href="#modal_poster" title="分享">
                    <i class="iconfont icon-fenxiang"></i>分享
                </a>
            </span>
        <span style="margin-left:20px;line-height: 45px;" class="sc">
            <a href="javascript:void(0);" id="shoucang" data-toggle="tooltip" data-original-title="收藏">
                <i class="iconfont icon-xihuan"></i>收藏
            </a>
        </span>
        <a style="margin-left:20px;" href="javascript:(scrollTo());" id="percentage" data-toggle="tooltip" data-original-title="返回顶部">
            <i class="iconfont icon-dingwei"></i>0%
        </a>
  </nav>
</div>
</div>
<script>
var btn =document.getElementById("shoucang");
btn.onclick = function() {layer.msg('<p style="font-weight:700;margin:5px;">在键盘上按<span style="padding:5px 10px;background:#f0e7e2;border-radius:8px;color:#202020;margin:0 5px;">Ctrl</span>+<span style="padding:5px 10px;background:#f0e7e2;border-radius:8px;color:#202020;margin:0 5px;">D</span>即可<br>喜欢本站的话记得常来哦！</p>', function(){});};
</script>
<!--底部导航-->

第三步

下面CSS代码复制放到你主题后台—>自定义代码—>自定义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, .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 */
/*<a href="https://www.atbkw.cn/tag/%e5%ba%95%e9%83%a8%e5%af%bc%e8%88%aa" title="查看所有文章关于 底部导航" target="_blank">底部导航</a>*/
@media (max-width: 800px){.footwaveline{display: none;}}

第四步

下面JS代码复制放到你主题后台—>自定义代码—>自定义javascript代码样式代码中

//底部文件的触发条件
$(function() {
  var $this = $("#footgundong");
  var scrollTimer;
  $this.hover(function() {
      clearInterval(scrollTimer);
    }, function() {
      scrollTimer = setInterval(function() {
        scrollNews($this);
      }, 2000);
    })
    .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 = '<i class="iconfont icon-dingwei"></i> ' + fullWindowHeightInPercentage + '%';
  if (fullWindowHeightInPercentage == 0) percentage.innerHTML = '<i class="iconfont icon-dingwei"></i> 到顶啦';
  if (fullWindowHeightInPercentage == 100) percentage.innerHTML = '<i class="iconfont icon-jiasu"></i> 到底啦';
  if (fullWindowHeightInPercentage == Infinity) percentage.innerHTML = '<i class="iconfont icon-jiasu"></i> 返回顶部！';
}
温馨提示：本文最后更新于2022-05-12 19:54:32，某些文章具有时效性，若有错误或已失效，请在下方留言或联系乡野博文。
您阅读这篇文章共花了： 0小时00分00秒
-----本页内容已结束，喜欢请分享！-----
© 版权声明

感谢您的来访，获取更多精彩文章请收藏本站。



版权声明 1 本网站名称：乡野博文
2 本站永久网址：www.zau.cn
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ:550966987进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
THE END
技术代码技术教程
# WordPress
喜欢本站内容，请点【点赞】【分享】和【收藏】~
点赞15 分享
相关推荐
zibll子比主题添加透明复制提醒-乡野博文
zibll子比主题添加透明复制提醒
zibll子比主题添加透明复制提醒
1年前 522
删除wordpress文章修订版本和自动草稿而残留的数据-乡野博文
删除wordpress文章修订版本和自动草稿而残留的数据
删除wordpress文章修订版本和自动草稿而残留的数据
1年前 384
zibll右侧彩色滚动条样式代码-乡野博文
zibll右侧彩色滚动条样式代码
zibll右侧彩色滚动条样式代码
1年前 312
WordPress侧边栏信息统计小工具-乡野博文
WordPress侧边栏信息统计小工具
WordPress侧边栏信息统计小工具
1年前 284
怎么在VIDEO视频前插入15秒视频广告（带倒计时、关闭功能）-乡野博文
怎么在VIDEO视频前插入15秒视频广告（带倒计时、关闭功能）
怎么在VIDEO视频前插入15秒视频广告（带倒计时、关闭功能）
1年前 255
樱花飘落特效js代码-乡野博文
樱花飘落特效js代码
樱花飘落特效js代码
1年前 251
评论 抢沙发

请登录后发表评论

    暂无评论内容

默认头像
zibll子比主题添加透明复制提醒-乡野博文
522人已阅读
zibll子比主题添加透明复制提醒
TOP1
删除wordpress文章修订版本和自动草稿而残留的数据-乡野博文
删除wordpress文章修订版本和自动草稿而残留的数据
1年前384人已阅读
TOP2
支付宝到账语音音效在线生成器代码-乡野博文
支付宝到账语音音效在线生成器代码
1年前326人已阅读
TOP3
zibll右侧彩色滚动条样式代码-乡野博文
zibll右侧彩色滚动条样式代码
1年前312人已阅读
TOP4
WordPress侧边栏信息统计小工具-乡野博文
WordPress侧边栏信息统计小工具
1年前284人已阅读
TOP5
怎么在VIDEO视频前插入15秒视频广告（带倒计时、关闭功能）-乡野博文
怎么在VIDEO视频前插入15秒视频广告（带倒计时、关闭功能）
1年前255人已阅读
TOP6
颜色代码美化图标电脑软件模板日常技巧文章插件技术文章懒加载图小程序zibll主题WordPressPHPjQueryhtmlASP

时钟

推荐

Zibll-子比主题-本站同款

    搭建网站从一个优秀的主题开始！
    一次购买包永久免费更新
    强大的模板群为你解决主题问题
    现在购买享3个域名授权
  • 授权享免费更换且不限制次数

官方统一售价

￥569
限时直降
￥599
立即购买 - zibll

旗下网站

乡野风情fuv.cn 乡野风情
个人主页t35.cn 乡野风情
个人主页t92.cn 乡野风情
个人主页k53.cn 乡野风情
主页blog.fuv.cn 乡野风情
最新评论
大刚的头像-乡野博文

大刚2个月前0

我来看看
bd0831的头像-乡野博文

bd08314个月前0

我只能目送着幸福的末班车远去---不是我没赶上，而是压根儿都挤不上去。
曦芸的头像-乡野博文

曦芸10个月前0

我早上照镜子的时候，都会感到一股寒意，你到底是什么人？是谁？镜子能反映出所有真实的东西，但它却不能照出真正的你。你的正义之眼看得穿邪恶之心，却看不透女人的心意。
头像

小椿1年前0

测试评论!