如何在WordPress中使用Rest API开发支持文章收藏功能的自定义插件

1. 基础配置与数据存储设计 #

首先完成基础的存储结构和后台配置项开发，满足管理员自定义收藏按钮样式的需求：

• 数据存储选用WordPress原生元数据表实现，无需额外创建数据表：
  • 用户收藏记录存在用户元表，键名可设为user_favorite_posts，值为对应用户收藏的文章ID数组
  • 文章收藏计数存在文章元表，键名可设为post_favorite_count，用于快速展示单篇文章的收藏总量
• 后台新增设置页面，支持管理员上传两张收藏按钮素材：未收藏状态的默认按钮图、已收藏状态的激活按钮图，直接调用WordPress自带媒体上传器实现即可
  示例注册后台设置的代码：

// 注册设置项
add_action('admin_init', 'register_favorite_btn_settings');
function register_favorite_btn_settings() {
    register_setting('favorite_btn_group', 'favorite_default_icon_url');
    register_setting('favorite_btn_group', 'favorite_active_icon_url');
}

// 新增设置菜单入口
add_action('admin_menu', 'add_favorite_settings_page');
function add_favorite_settings_page() {
    add_options_page('收藏按钮设置', '收藏按钮设置', 'manage_options', 'favorite-btn-settings', 'render_favorite_settings_page');
}

2. Rest API 接口开发 #

注册两个自定义REST接口，分别处理收藏、取消收藏请求，同时做好权限校验，仅登录用户可操作：

add_action('rest_api_init', 'register_favorite_rest_routes');
function register_favorite_rest_routes() {
    // 收藏文章接口
    register_rest_route('favorite/v1', '/add/(?P<post_id>\d+)', [
        'methods' => 'POST',
        'callback' => 'do_add_favorite',
        'permission_callback' => function() {
            return is_user_logged_in();
        }
    ]);
    // 取消收藏文章接口
    register_rest_route('favorite/v1', '/remove/(?P<post_id>\d+)', [
        'methods' => 'POST',
        'callback' => 'do_remove_favorite',
        'permission_callback' => function() {
            return is_user_logged_in();
        }
    ]);
}

接口回调逻辑说明：

• 收藏接口：校验文章ID有效性后，将文章ID加入对应用户的收藏数组，同时对应文章收藏计数+1，返回当前收藏状态
• 取消收藏接口：将文章ID从用户收藏数组中移除，同时对应文章收藏计数-1，返回当前收藏状态
• 所有请求默认自带WordPress REST API的nonce校验，无需额外做CSRF防护，前端请求时携带X-WP-Nonce请求头即可

3. 前端按钮渲染与交互实现 #

通过the_content过滤器自动将收藏按钮插入文章页面，也可支持短代码手动调用：

add_filter('the_content', 'append_favorite_btn_to_post');
function append_favorite_btn_to_post($content) {
    // 仅在单篇文章页且用户登录时展示按钮，可按需调整展示规则
    if (is_singular('post') && is_user_logged_in()) {
        $post_id = get_the_ID();
        $user_id = get_current_user_id();
        // 获取用户收藏列表判断当前文章是否已收藏
        $user_favorites = get_user_meta($user_id, 'user_favorite_posts', true) ?: [];
        $is_favorited = in_array($post_id, $user_favorites);
        // 读取后台设置的按钮素材
        $default_icon = get_option('favorite_default_icon_url');
        $active_icon = get_option('favorite_active_icon_url');
        $current_icon = $is_favorited ? $active_icon : $default_icon;
        // 拼接按钮HTML
        $btn_html = sprintf(
            '<div class="wp-favorite-btn" data-post-id="%d" data-favorited="%d">
                <img src="%s" alt="收藏按钮" />
            </div>',
            $post_id,
            $is_favorited ? 1 : 0,
            esc_url($current_icon)
        );
        // 可自行调整按钮插入位置，这里示例插入到内容最上方
        $content = $btn_html . $content;
    }
    return $content;
}

前端JS交互逻辑：

• 监听收藏按钮点击事件，根据按钮的data-favorited属性判断当前状态，调用对应收藏/取消收藏接口
• 请求成功后切换按钮的图片链接和data-favorited属性值即可
• 页面加载时提前输出rest nonce到前端，供请求时使用

可选优化方向 #

• 支持未登录用户展示按钮，点击触发登录提示
• 新增用户收藏列表短代码，插入到任意页面即可展示当前用户的所有收藏文章
• 新增收藏数展示选项，可在按钮旁显示当前文章的收藏总量
• 增加缓存机制，收藏计数存入对象缓存减少数据库查询压力

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