如何在Ultimate Member会员目录及个人主页添加点赞功能

核心实现逻辑梳理 #

• 存储层：记录点赞发起用户ID、被点赞用户ID、点赞时间
• 渲染层：通过Ultimate Member内置钩子在指定位置输出点赞按钮
• 交互层：AJAX实现无刷新点赞/取消点赞操作
• 展示层：对接UM个人页标签页，输出收到的点赞列表

具体实现步骤及示例代码 #

1. 数据存储方案（优先选用自定义表，小站点可直接用usermeta简化开发） #

可将以下代码放到主题functions.php中，主题激活时会自动创建点赞数据表：

// 主题激活时创建点赞表
add_action('after_switch_theme', 'um_custom_likes_create_table');
function um_custom_likes_create_table() {
    global $wpdb;
    $table_name = $wpdb->prefix . 'um_user_likes';
    $charset_collate = $wpdb->get_charset_collate();

    $sql = "CREATE TABLE IF NOT EXISTS $table_name (
        id bigint(20) NOT NULL AUTO_INCREMENT,
        liker_id bigint(20) NOT NULL,
        liked_id bigint(20) NOT NULL,
        create_time datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
        PRIMARY KEY  (id),
        UNIQUE KEY like_unique (liker_id, liked_id),
        KEY liked_id (liked_id)
    ) $charset_collate;";

    require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
    dbDelta($sql);
}

2. 注入点赞按钮到会员目录、用户个人页 #

通过UM官方钩子输出按钮，内置z-index属性避免被其他元素遮挡：

// 会员目录用户卡片输出点赞按钮
add_action('um_members_after_user_name', 'um_custom_like_render_button', 10);
// 用户个人页输出点赞按钮
add_action('um_profile_before_header', 'um_custom_like_render_button', 20);

function um_custom_like_render_button($user_id) {
    if (!is_user_logged_in()) return;
    $current_user_id = get_current_user_id();
    if ($current_user_id == $user_id) return; // 禁止给自己点赞

    global $wpdb;
    $table_name = $wpdb->prefix . 'um_user_likes';
    $is_liked = $wpdb->get_var($wpdb->prepare(
        "SELECT id FROM $table_name WHERE liker_id = %d AND liked_id = %d",
        $current_user_id, $user_id
    ));

    $like_count = $wpdb->get_var($wpdb->prepare(
        "SELECT COUNT(id) FROM $table_name WHERE liked_id = %d",
        $user_id
    ));

    wp_nonce_field('um_like_nonce', 'um_like_nonce');
    ?>
    <div class="um-custom-like-btn" style="z-index:99;cursor:pointer;margin:8px 0;">
        <span class="like-icon <?php echo $is_liked ? 'liked' : ''; ?>" 
              data-liked-id="<?php echo esc_attr($user_id); ?>"
              style="color:<?php echo $is_liked ? '#e74c3c' : '#999'; ?>;">
            ♥
        </span>
        <span class="like-count"><?php echo esc_html($like_count); ?></span>
    </div>
    <style>
        .um-custom-like-btn .like-icon {
            font-size: 18px;
            margin-right: 4px;
            transition: all 0.2s;
        }
        .um-custom-like-btn .like-icon.liked {
            transform: scale(1.2);
        }
    </style>
    <?php
}

3. 实现AJAX点赞/取消点赞逻辑 #

// 注册AJAX接口
add_action('wp_ajax_um_toggle_like', 'um_custom_toggle_like');
function um_custom_toggle_like() {
    if (!is_user_logged_in() || !wp_verify_nonce($_POST['nonce'], 'um_like_nonce')) {
        wp_send_json_error('权限校验失败');
    }

    $liker_id = get_current_user_id();
    $liked_id = intval($_POST['liked_id']);
    if ($liker_id == $liked_id) {
        wp_send_json_error('不能给自己点赞');
    }

    global $wpdb;
    $table_name = $wpdb->prefix . 'um_user_likes';
    $exist = $wpdb->get_var($wpdb->prepare(
        "SELECT id FROM $table_name WHERE liker_id = %d AND liked_id = %d",
        $liker_id, $liked_id
    ));

    if ($exist) {
        // 取消点赞
        $wpdb->delete($table_name, ['id' => $exist]);
        $action = 'unliked';
    } else {
        // 添加点赞
        $wpdb->insert($table_name, [
            'liker_id' => $liker_id,
            'liked_id' => $liked_id
        ]);
        $action = 'liked';
    }

    // 返回最新点赞数
    $like_count = $wpdb->get_var($wpdb->prepare(
        "SELECT COUNT(id) FROM $table_name WHERE liked_id = %d",
        $liked_id
    ));

    wp_send_json_success([
        'action' => $action,
        'count' => $like_count
    ]);
}

// 前端AJAX交互脚本
add_action('wp_footer', 'um_custom_like_script');
function um_custom_like_script() {
    ?>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        document.querySelectorAll('.um-custom-like-btn .like-icon').forEach(btn => {
            btn.addEventListener('click', function() {
                const likedId = this.dataset.likedId;
                const nonce = document.getElementById('um_like_nonce').value;
                const countEl = this.nextElementSibling;

                fetch('<?php echo admin_url('admin-ajax.php'); ?>', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: new URLSearchParams({
                        action: 'um_toggle_like',
                        liked_id: likedId,
                        nonce: nonce
                    })
                })
                .then(res => res.json())
                .then(res => {
                    if (res.success) {
                        if (res.data.action === 'liked') {
                            this.classList.add('liked');
                            this.style.color = '#e74c3c';
                        } else {
                            this.classList.remove('liked');
                            this.style.color = '#999';
                        }
                        countEl.textContent = res.data.count;
                    }
                })
            })
        })
    });
    </script>
    <?php
}

4. 个人主页点赞列表标签页实现 #

// 注册个人页点赞列表标签
add_filter('um_profile_tabs', 'um_custom_add_likes_tab', 1000);
function um_custom_add_likes_tab($tabs) {
    $tabs['received_likes'] = [
        'name' => '收到的点赞',
        'icon' => 'um-faicon-heart',
        'priority' => 50,
    ];
    return $tabs;
}

// 输出标签页内容
add_action('um_profile_content_received_likes', 'um_custom_likes_tab_content');
function um_custom_likes_tab_content($args) {
    $profile_user_id = um_profile_id();
    global $wpdb;
    $table_name = $wpdb->prefix . 'um_user_likes';
    $likers = $wpdb->get_results($wpdb->prepare(
        "SELECT liker_id, create_time FROM $table_name WHERE liked_id = %d ORDER BY create_time DESC",
        $profile_user_id
    ));

    if (empty($likers)) {
        echo '<p>暂无收到的点赞</p>';
        return;
    }

    echo '<ul class="um-likes-list" style="list-style:none;padding:0;">';
    foreach ($likers as $liker) {
        $liker_user = get_user_by('id', $liker->liker_id);
        if (!$liker_user) continue;
        $profile_url = um_user_profile_url($liker->liker_id);
        ?>
        <li style="display:flex;align-items:center;margin:12px 0;">
            <?php echo get_avatar($liker->liker_id, 40, '', '', ['style' => 'border-radius:50%;margin-right:12px;']); ?>
            <div>
                <a href="<?php echo esc_url($profile_url); ?>" style="font-weight:600;">
                    <?php echo esc_html($liker_user->display_name); ?>
                </a>
                <p style="font-size:12px;color:#999;margin:2px 0 0;"><?php echo esc_html($liker->create_time); ?></p>
            </div>
        </li>
        <?php
    }
    echo '</ul>';
}

可扩展优化点 #

• 增加点赞消息通知，对接UM的原生通知系统
• 添加点赞记录分页，数据量大时避免页面加载过慢
• 支持点赞列表筛选、排序
• 后台增加点赞数据管理入口

内容的提问来源于stack exchange，提问作者Roberto N