子比主题美化 – 网站底部多功能悬浮导航+滚动显示+打赏-亿点资源网

效果预览

cd1dad5c2020240912231609

在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-bianji"></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="https://21lhz.cn/cdn/js/sweetalert.min.js"></script>';
echo '<script src="https://21lhz.cn/cdn/css/sweetalert.css"></script>'; 
echo '<script>$(document).on("click","#dorzs",function(){swal({title:"发工资啦",text:"哇！亿点超级开心的！！",icon:"https://huliku.com/images/1668344a-e7ce-4789-af18-65f89f81fa50.png",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:"https://www.yjjmt.com/wp-content/uploads/2024/09/9b3519f44120240912232939.png"});}else if(value=="zfb"){swal({title:"感谢打赏！",text:"感谢您的支付宝打赏，我会努力做得更好！",button:false,icon:"https://www.yjjmt.com/wp-content/uploads/2024/09/a5d79d166020240912232940.png"});}else if(value=="dsmd"){swal({title:"打赏名单",text:"【打赏名单未开放】",icon:"https://huliku.com/images/0dc4819f-400a-4ab0-b59b-ce114aa19a9e.png",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;
}

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

把下面的js跟css引入到你的网站即可

<!--阿里图标库--> 
<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>

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

<!--底部导航 yjjmt.com-->
<style>
#footgundong{color: #666;margin-left:20px;overflow: overlay;display: inline-flex;text-align: right;}
.item-foot{color: #666;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 #999;height:auto;color:#999;font-size:10px;border-radius:2px;padding:0 2px;}
</style>
<div class="footwaveline">
<i style="background-image: url(https://huliku.com/wp-content/plugins/zibll_plugin/images/love.png);display: inline-block;width: 150px;height: 150px;position: fixed;bottom: -5px;z-index: 110;background-size: 100%;"></i>
<div class="footwavewave" style="background: url(https://huliku.com/image/foot_nav_wave.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 -50px;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:#666;">评论(<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><span style="color:#666;">点赞(<?php echo dz($post->ID)?>)</span>
                </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><span style="color:#666;">分享</span></span>
                </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><span style="color:#666;">赞赏</span>
                </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><span style="color:#666;">收藏</span>
            </a>
        </span>
        <a style="margin-left:20px; color:#666;" 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: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>
<!--底部导航yjjmt.com-->

CSS代码

这段css其实是文字的抖动跟适应手机屏幕隐藏底部导航栏(可用可不用，不过@media这段建议保留)

此处内容已隐藏，请付费后查看

JS代码

这段js代码是用来触发滚动条显示百分比的

此处内容已隐藏，请付费后查看

更新

分享按钮代码发生了变动，这里我们也做一下修改：

<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>

把这段A标签代码将原先的代码覆盖就完成了

教程到这就结束了，如果发现有问题的话可以在下面评论留言。

文章来源于狐狸库

版权声明 1、本网站名称：亿点资源网
2、本站永久网址：https://www.yjjmt.com
3、本站文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系客服QQ1297545494进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向客服举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END