今天分享一个看起来还不错的网站底部动态交互的效果，好看的动态的图文效果，以及右侧文章点赞和收藏，跟随滚动的动态百分比效果，最终实现的效果大致如下：

效果图

实现这个功能，步骤有点多，改的地方也不少，请仔细认真阅读步骤。不然有可能导致无法实现想要的效果了~

教程

1、在functions.php加上下面这段代码（为了防止内部的js和css链接失效自行备份）

//  ================================================================开始 
// 获取评论数量
function zfunc_comments_users($postid = 0, $which = 0) {
    $comments = get_comments([
        'status' => 'approve',
        'type' => 'comment',
        'post_id' => $postid,
    ]); // 获取文章的所有评论

    if ($comments) {
        $commentUsers = array_unique(array_map(function($comment) {
            return $comment->comment_author_email;
        }, $comments));

        $userCount = count($commentUsers);
        $totalComments = count($comments);
        
        return $which ? $userCount : $totalComments; // 返回评论人数或总评论数
    }

    return 0; // 没有评论返回0
}

// 随机文章
function random_posts($posts_num = 5, $before = '<li>', $after = '</li>') {
    global $wpdb;

    $randposts = $wpdb->get_results($wpdb->prepare("
        SELECT ID, post_title, guid
        FROM $wpdb->posts
        WHERE post_status = 'publish'
        AND post_title != ''
        AND post_password = ''
        AND post_type = 'post'
        ORDER BY RAND()
        LIMIT %d", $posts_num));

    $output = '';
    foreach ($randposts as $randpost) {
        $post_title = esc_html($randpost->post_title);
        $permalink = get_permalink($randpost->ID);
        $output .= $before . '<a class="item-foot" href="' . esc_url($permalink) . '" rel="bookmark" data-toggle="tooltip" data-original-title="随机文章：' . $post_title . '">
            <svg class="icon" aria-hidden="true"><use xlink:href="#icon-bianji"></use></svg>
            <span id="wz">' . $post_title . '</span>
        </a>' . $after;
    }

    if ($output) {
        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 '<link rel="stylesheet" href="https://21lhz.cn/cdn/css/sweetalert.css">'; 
    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) {
            let response = {
                weixin: { title: "感谢打赏！", text: "感谢您的微信打赏，我会努力做得更好！", icon: "https://huliku.com/images/weixin.png" },
                zfb: { title: "感谢打赏！", text: "感谢您的支付宝打赏，我会努力做得更好！", icon: "https://huliku.com/images/zhifubao.png" },
                dsmd: { title: "打赏名单", text: "【打赏名单未开放】", icon: "https://huliku.com/images/0dc4819f-400a-4ab0-b59b-ce114aa19a9e.png" }
            };

            if (response[value]) {
                swal({
                    title: response[value].title,
                    text: response[value].text,
                    button: false,
                    icon: response[value].icon
                });
            }
        });
    });
    </script>';
}
 
add_action( 'wp_footer', 'dorzs', 100 );

// 点赞统计
function dz($post_id) {
    global $wpdb;

    // 使用prepare以防止SQL注入
    $sql = $wpdb->prepare("
        SELECT SUM(`meta_value`) as num 
        FROM `wp_postmeta` 
        WHERE `meta_key` = 'like' AND `post_id` = %d", $post_id);

    $results = $wpdb->get_results($sql);

    // 确保结果存在并处理返回值
    echo isset($results[0]->num) ? intval($results[0]->num) : 0;
}

//=================================================================================================结束

2、CSS代码

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

位置放在：主题的自定义CSS样式当中即可

3、JS代码

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

位置放在：主题的自定义javascript代码当中即可

4、图标

自定义头部HTML代码：

5、在footer.php添加一下代码