给子比主题博客加个好看底部导航【更新】

给子比主题博客加个好看底部导航【更新】

给子比主题博客加个好看底部导航【更新】-李小白
给子比主题博客加个好看底部导航【更新】
此内容为免费阅读,请登录后查看
0
技术支持
自动发货
网络收集
售后服务
【极速响应】15分钟紧急响应机制,7x24小时工程师待命
免费阅读
温馨提示:资源将于天后下架

在functions.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="#icon-lianjie"></use></svg><span id="wz">' . $post_title . '</span></a>';
        $output .= $after;
    }
    echo '<div id="footgundong" class="wz"><ul>'.$output.'</ul></div>';
}
//弹窗提醒
function dorzs() {  
echo '<script src="/customize/js/sweetalert.min.js"></script>';
echo '<script src="/customize/css/sweetalert.css"></script>'; 
echo '<script>$(document).on("click","#dorzs",function(){swal({title:"发工资啦",text:"哇!夕阳超级开心的!!",icon:"请放入图片",buttons:{weixin:{text:"微信",value:"weixin",},zfb:{text:"支付宝",value:"zfb",},dsmd:{text:"打赏名单",value:"dsmd",},},}).then(function(value){if(value=="weixin"){swal({title:"感谢打赏!",text:"感谢您的微信打赏,我会努力做得更好!",button:false,icon:"微信收款二维码"});}else if(value=="zfb"){swal({title:"感谢打赏!",text:"感谢您的支付宝打赏,我会努力做得更好!",button:false,icon:"支付宝收款二维码"});}else if(value=="dsmd"){swal({title:"打赏名单",text:"【打赏名单未开放】",icon:"图片",button:false,});}});});</script>';  
}  
add_action( 'wp_footer', 'dorzs', 100 );
//点赞统计
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;
}

引入阿里巴巴矢量库的图标,也可以自行修改

<!--夕阳博客自用阿里图标库--> 
<script src="https://at.alicdn.com/t/font_2827587_k24if0ucns.js"></script>
<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_2827587_k24if0ucns.css">
<style type="text/css">.icon {width: 1em; height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}</style>

<!--夕阳博客自用阿里图标库--> 
<link rel="stylesheet" type="text/css" href="/customize/css/xy.css">
<!--夕阳博客自用阿里图标库--> 
<!--夕阳博客自用阿里图标库--> 
<script src="/customize/js/xy.js"></script>
<style type="text/css">.icon {width: 1em; height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}</style>
<!--夕阳博客自用阿里图标库结束--> 

<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;
  }
  
  .swal-footer {
    text-align: center;
  }
  
  .swal-button {
    font-size: 20px;
  }
  
  .count > svg,
  .count > text {
    display: none;
  }
  
  /* 波浪动画 */
  @keyframes waveMove {
    0% { background-position: 0 0; }
    100% { background-position: -552px 0; }
  }
  
  @-webkit-keyframes waveMove {
    0% { background-position: 0 0; }
    100% { background-position: -552px 0; }
  }
  
  .footwavewave {
    animation: waveMove 30s linear infinite;
    -webkit-animation: waveMove 30s linear infinite;
  }

  /* 底部装饰图片样式 - 百分比宽度 */
  .foot-decoration-img {
    background-image: url(/customize/images/2.png);
    display: inline-block;
    width: 25vw; /* 使用视窗宽度百分比 */
    height: 25vh; /* 使用视窗高度百分比 */
    min-width: 150px; /* 最小宽度限制 */
    min-height: 80px; /* 最小高度限制 */
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 110;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left bottom;
    margin: 0;
    padding: 0;
    opacity: 0.9;
    transition: all 0.3s ease;
    cursor: pointer;
  }

  /* 鼠标悬停效果 */
  .foot-decoration-img:hover {
    transform: scale(1.05);
    opacity: 1;
  }

  /* 移动端隐藏所有图片和动画效果 */
  @media (max-width: 768px) {
    .footwaveline > i,
    .footwavewave,
    #shi {
      display: none !important;
    }
    
    .foot-decoration-img {
      display: none !important;
    }
  }
</style>

<div class="footwaveline">
  <!-- 底部装饰元素 -->
  <i class="foot-decoration-img" id="decoration-img"></i>
  
  <!-- 波浪动画层 -->
  <div class="footwavewave" style="
    background: url(/customize/images/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();
      } elseif (is_page()) {
        echo'<style>@media (max-width:1200px){#shi{display:none;}}.pl,.fx{display:none;}.dz{display:none !important;}</style>';
      }
      ?>    
      <span style="margin-left:20px;" class="pl">
        <a href="javascript:(scrollTo('#comments',-100));" data-toggle="tooltip" data-original-title="评论">
          <svg class="icon" aria-hidden="true"><use xlink:href="#icon-pinglun"></use></svg>
          <span style="color:var(--minor);">评论(<count><?php echo zfunc_comments_users($post->ID); ?></count>)</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="点赞">
          <svg class="icon" aria-hidden="true"><use xlink:href="#icon-dianzan"></use></svg>
          点赞(<?php echo dz($post->ID)?>)
        </a>
      </span>
      <span style="margin-left:20px;line-height: 45px;" class="fx">
        <a class="share-btn poster" poster-share="<?php the_ID();?>" title="海报分享" href="javascript:;">
          <svg class="icon" aria-hidden="true"><use xlink:href="#icon-fenxiang"></use></svg>分享
        </a>
      </span>
      <span style="margin-left:20px;line-height: 45px;" class="zs">
        <a id="dorzs" data-toggle="tooltip" data-original-title="赞赏">
          <svg class="icon" aria-hidden="true"><use xlink:href="#icon-qianbao"></use></svg>赞赏
        </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="收藏">
          <svg class="icon" aria-hidden="true"><use xlink:href="#icon-xihuan"></use></svg>收藏
        </a>
      </span>
      <a style="margin-left:20px;" href="javascript:(scrollTo());" id="percentage" data-toggle="tooltip" data-original-title="返回顶部">
        <svg class="icon" aria-hidden="true"><use xlink:href="#icon-dingwei"></use></svg>0%
      </a>
    </nav>
  </div>
</div>
<?php dorzs();?>
<script>
// 收藏按钮点击事件
var btn = document.getElementById("shoucang");
btn.onclick = function() {
  layer.msg('<p style="font-weight:7;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>

更新

<a class="share-btn poster" poster-share="<?php the_ID();?>" title="海报分享" href="javascript:;">
    <svg class="icon" aria-hidden="true"><use xlink:href="#icon-fenxiang"></use></svg>分享
</a>

结语

仅供学习和研究使用,请在下载后24小时内删除
© 版权声明
THE END
喜欢就支持一下吧
点赞13 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容