想让网站更有趣？试试这个随机评论弹窗！

前言

前天发布了一个网易云热评弹窗小卡片，应大家的要求，做成网站里的随机评论消息，参考了一下洪哥那边的设计，那么话不多说，先来看看效果吧！

简洁而美丽：如何在博客中优雅展示网易云热评

2个月前

819811

更新日志

2024-12-14

• 修复了评论消息不显示表情包问题
• 优化代码逻辑，避免了大量的API请求
• 新增自定义的 WordPress REST API 端点用于返回热评

2024-02-23

• 新增用户名链接至个人主页
• 右上角新增按钮跳转至评论位置

演示效果

部署教程

将下方代码放置在主题目录下的function.php或者新建一个func.php文件

其它主题的小伙伴可以使用以下代码自定义REST API接口，使用的是WordPress内置的函数

<?php
// 注册自定义 REST API 接口
function register_hot_comments_endpoint() {
    register_rest_route('myapi/v1', '/hot-comments', array(
        'methods' => 'GET',
        'callback' => 'get_hot_comments',
    ));
}
add_action('rest_api_init', 'register_hot_comments_endpoint');
function get_hot_comments() {
    $comments = get_comments(array(
        'number'  => 50,            // 获取50条最新评论
        'status'  => 'approve',
        'orderby' => 'comment_date',
        'order'   => 'DESC',
    ));
    $data = [];
    if (empty($comments)) {
        return new WP_REST_Response([], 200);
    }
    foreach ($comments as $comment) {
        $avatar_url = get_avatar_url($comment->comment_author_email, array('size' => 96));
        if (!$avatar_url) {
            $avatar_url = get_template_directory_uri() . '/img/avatar-default.png';
        }
        $comment_url = get_comment_link($comment->comment_ID);
        $user_url = get_author_posts_url($comment->user_id);
        $data[] = [
            'post_id'   => $comment->comment_post_ID,
            'author'    => $comment->comment_author,
            'content'   => $comment->comment_content,
            'avatar'    => $avatar_url,
            'url'       => get_permalink($comment->comment_post_ID),
            'comment_url' => $comment_url,
            'user_url'  => $user_url,
        ];
    }
    return new WP_REST_Response($data, 200);
}
<?php
// 注册自定义 REST API 接口
function register_hot_comments_endpoint() {
    register_rest_route('myapi/v1', '/hot-comments', array(
        'methods' => 'GET',
        'callback' => 'get_hot_comments',
    ));
}

add_action('rest_api_init', 'register_hot_comments_endpoint');

function get_hot_comments() {
    $comments = get_comments(array(
        'number'  => 50,            // 获取50条最新评论
        'status'  => 'approve',
        'orderby' => 'comment_date',
        'order'   => 'DESC',
    ));

    $data = [];

    if (empty($comments)) {
        return new WP_REST_Response([], 200);
    }

    foreach ($comments as $comment) {
        $avatar_url = get_avatar_url($comment->comment_author_email, array('size' => 96));
        if (!$avatar_url) {
            $avatar_url = get_template_directory_uri() . '/img/avatar-default.png';
        }

        $comment_url = get_comment_link($comment->comment_ID);
        $user_url = get_author_posts_url($comment->user_id);

        $data[] = [
            'post_id'   => $comment->comment_post_ID,
            'author'    => $comment->comment_author,
            'content'   => $comment->comment_content,
            'avatar'    => $avatar_url,
            'url'       => get_permalink($comment->comment_post_ID),
            'comment_url' => $comment_url,
            'user_url'  => $user_url,
        ];
    }

    return new WP_REST_Response($data, 200);
}
<?php
// 注册自定义 REST API 接口
function register_hot_comments_endpoint() {
    register_rest_route('myapi/v1', '/hot-comments', array(
        'methods' => 'GET',
        'callback' => 'get_hot_comments',
    ));
}

add_action('rest_api_init', 'register_hot_comments_endpoint');

function get_hot_comments() {
    $comments = get_comments(array(
        'number'  => 50,            // 获取50条最新评论
        'status'  => 'approve',
        'orderby' => 'comment_date',
        'order'   => 'DESC',
    ));

    $data = [];

    if (empty($comments)) {
        return new WP_REST_Response([], 200);
    }

    foreach ($comments as $comment) {
        $avatar_url = get_avatar_url($comment->comment_author_email, array('size' => 96));
        if (!$avatar_url) {
            $avatar_url = get_template_directory_uri() . '/img/avatar-default.png';
        }

        $comment_url = get_comment_link($comment->comment_ID);
        $user_url = get_author_posts_url($comment->user_id);

        $data[] = [
            'post_id'   => $comment->comment_post_ID,
            'author'    => $comment->comment_author,
            'content'   => $comment->comment_content,
            'avatar'    => $avatar_url,
            'url'       => get_permalink($comment->comment_post_ID),
            'comment_url' => $comment_url,
            'user_url'  => $user_url,
        ];
    }

    return new WP_REST_Response($data, 200);
}

不过因为 WordPress 默认的头像服务是 Gravatar，而 Gravatar 在国内加载速度普遍较慢，甚至有时候会加载失败，所以这里我们需要通过以下代码替换 Gravatar 源为国内镜像

function replace_gravatar_url($url) {
    $url = str_replace(
        ['www.gravatar.com', '0.gravatar.com', '1.gravatar.com', '2.gravatar.com', 'secure.gravatar.com'],
        'cn.gravatar.com', // 或者用 v2ex 的 cdn.v2ex.com/gravatar
        $url
    );
    return $url;
}
add_filter('get_avatar_url', 'replace_gravatar_url');
function replace_gravatar_url($url) {
    $url = str_replace(
        ['www.gravatar.com', '0.gravatar.com', '1.gravatar.com', '2.gravatar.com', 'secure.gravatar.com'],
        'cn.gravatar.com', // 或者用 v2ex 的 cdn.v2ex.com/gravatar
        $url
    );
    return $url;
}
add_filter('get_avatar_url', 'replace_gravatar_url');
function replace_gravatar_url($url) {
    $url = str_replace(
        ['www.gravatar.com', '0.gravatar.com', '1.gravatar.com', '2.gravatar.com', 'secure.gravatar.com'],
        'cn.gravatar.com', // 或者用 v2ex 的 cdn.v2ex.com/gravatar
        $url
    );
    return $url;
}
add_filter('get_avatar_url', 'replace_gravatar_url');

果只希望在首页显示，可以通过后台小工具 → 自定义 HTML，将代码放在首页的任何位置。

如果希望全站显示，则可以将代码放在主题设置中的自定义 HTML 。