当我想到UI时，我脑海中浮现出这样的想法。

视频下有类似的YouTube。

当用户填写输入并单击enter或submit按钮创建列表时，您将发送带有列表名称的ajax请求，并将其保存为中的记录wp_usermeta 具有的表格meta_key _list_user_1 和meta_value 作为列表标题。

要将帖子添加到此列表中，您必须将记录保存在wp_postmeta 具有的表格_list_post_1 中的值meta_key 字段和值umeta_id 从…起_list_user_1 字段中的行meta_value.

wp_usermeta

+----------+---------+--------------+------------+
| umeta_id | user_id | meta_key     | meta_value |
+----------+---------+--------------+------------+
| 100      | 1       | _list_user_1 | List 1     |
+----------+---------+--------------+------------+

wp_postmeta

+---------+---------+--------------+------------+
| meta_id | post_id | meta_key     | meta_value |
+---------+---------+--------------+------------+
| 1       | 1       | _list_post_1 | 100        |
+---------+---------+--------------+------------+

要获取用户的所有列表，请执行以下操作：

SELECT *
FROM `wp_usermeta`
WHERE `user_id` = 1
  AND `meta_key` LIKE "_list_user_%";

要获取列表1的所有帖子，请执行以下操作：

SELECT *
FROM `wp_posts`
INNER JOIN wp_postmeta ON (wp_posts.ID = wp_postmeta.post_id)
WHERE wp_postmeta.`meta_key` LIKE "_list_post_%"
  AND wp_postmeta.`meta_value` = 100;

您可以使用前面的按钮，将当前显示的帖子的ID保存在用户的meta中。以下是一种简单的方法：

在前面输出一个按钮

您需要在single.php （或您想要的任何页面）允许用户实际将帖子设置为收藏夹。下面的模板执行此操作。这个like-overlay 类用于在处理请求时创建加载效果。

<div id="like-button" class="like btn btn-default" type="button">
    <span class="fa fa-heart"></span>
    <span class="like-overlay"><i class="fa fa-spin fa-circle-o-notch"></i></span>
</div>
<input type="hidden" value="<?php the_ID(); ?>" id="current-post-id"/>
<input type="hidden" value="<?php echo get_current_user_id(); ?>" id="current-user-id"/>

当用户单击按钮时，向该按钮添加单击事件，向服务器发送AJAX请求，并根据结果更新按钮。您可能需要本地化脚本以传递rest URL和其他数据。

$(\'#like-button\').on(\'click\',function (e) {
    e.preventDefault();
    $.ajax({
        type: \'GET\',
        url: \'http://example.com/wp-json/my_route/v1/ajax_favorite\',
        data: { post_id: $(\'#current-post-id\').val(), user_id : $(\'#current-user-id\').val() },
        beforeSend: function() {
            $(\'#like-button\').addClass(\'active\').prop(\'disabled\', true);
        },
        success: function(data){

            $(\'#like-button\').removeClass(\'active\').prop(\'disabled\', false);

            if( data != null ){

                if( data == \'400\' ) {
                    $(\'#like-button\').removeClass(\'selected\');
                } else if( data == \'200\') {
                    $(\'#like-button\').addClass(\'selected\');
                }
            }
        },
        error:function(){

        }
    });
});

使用REST-API处理Ajax请求现在创建REST路由并处理数据。如果收到的帖子ID在用户元中不存在，请添加它并返回成功的代码。如果有，请删除它并让脚本知道它。

add_action( \'rest_api_init\', \'my_rest_routes\');
function my_rest_routes() {
    // Path to ajax like function
    register_rest_route(
        \'my_route/v1\',
        \'/ajax_favorite/\',
        array(
            \'methods\' => \'GET\',
            \'callback\' => \'ajax_favorite\'
        )
    );
}

function ajax_favorite(){

    // If the ID is not set, return
    if(!isset($_GET[\'post_id\']) || !isset($_GET[\'user_id\'])){
        return $data[\'status\'] = \'500\';
    }

    // Store user and product\'s ID
    $post_id   = sanitize_text_field($_GET[\'post_id\']);
    $user_id   = sanitize_text_field($_GET[\'user_id\']);
    $user_meta = get_user_meta($user_id,\'_favorite_posts\',false);

    // Check if the post is favorited or not
    if( in_array( $post_id, $user_meta ) ){
        delete_user_meta($user_id,\'_favorite_posts\',$post_id);
        return $data[\'status\'] = \'400\';
    } else {
        add_user_meta($user_id,\'_favorite_posts\',$post_id);
        return $data[\'status\'] = \'200\';
    }

}

您可以将其用作模板，以输出将数据从前端保存到数据库的任何按钮。不要忘记清理数据，也要使用nonce。

现在你当然只需要_favorite_posts 用户meta，只要您想显示它。

我建议使用自定义表格来保持精简。

有两个表：列表表和帖子表以及它们所属的列表。

列表表（我们称之为wp_lists) 看起来像：

+----+---------+----------------+
| id | user_id |      name      |
+----+---------+----------------+
|  1 |       2 | My list        |
|  2 |       2 | My second list |
+----+---------+----------------+

如果列表中有更多的数据，比如描述或相关的颜色，那么这里可以有更多的列。如果表开始增长，您可能希望将其拆分为两个表，并为用户列表关系使用一个单独的表。

列表发布表（我们称之为wp_post_list) 看起来像：

+---------+---------+
| post_id | list_id |
+---------+---------+
|       2 |       2 |
|       3 |       2 |
|       2 |       1 |
+---------+---------+

也许你想要一个ID列，但我不确定你需要它做什么，因为post_id/list_id 组合应该是唯一的，因为帖子不能多次出现在列表中。

所以当有人创建一个列表时，你会将其插入wp_lists. 他们可以创建任意数量的内容，或者您可以通过检查他们已经有多少内容来限制PHP中的内容。

要获取属于当前用户的列表，只需查询wp_lists 基于user_id 柱

当有人向列表中添加帖子时，您会将帖子ID插入其中wp_post_list 在它所属的列表旁边。当您想查看列表中的所有帖子时，可以根据list_id 列，然后将生成的ID放入WP_Query 或get_posts().

在浏览帖子时，您希望显示它已经属于哪个用户列表。如果那样的话，你会问wp_post_list 基于post_id, 但是JOIN it收件人wp_lists 并将结果限制为具有当前用户ID的列表的结果。