javascript - 在 WordPress 中通过 JavaScript 更新帖子

Question

我已经编写了一个脚本的开头，该脚本应用于 WordPress 管理区域的 edit.php 页面。该脚本收集信息(id、标题和一些使用插件显示在列中的 ACF 字段)并使用此信息为每个帖子生成 div，然后创建一个 Muuri具有这些新 div 的实例。

这个想法是前端的帖子列表应该使用 Muuri 渲染，以创建砖石布局。为了让用户更容易地设置砌体中每个项目的排列和大小，我希望用户在管理区域中使用具有拖放功能的 Muuri，以便他们可以拖放每个帖子和设定他们的位置。然后我想将每个帖子的顺序和大小从管理员传递到前端。

这是我添加到 edit.php 页面的脚本:

    var output = "<div class='grid'>";

    $(window).on("load", function(){
    $("#the-list").find("tr").each(function(index){
        var title = $(this).find(".title").find(".row-title").text();
        var sort = $(this).find(".column-order").text();
        var layout = $(this).find(".column-size").text();
        var id = $(this).attr("id");
        var link = $(this).find(".title").find(".row-title").attr("href");
        var select = "<select class='layout-changer' data-id='" + id +"' style='position:absolute;bottom:0;left:0;'>";
        select += "<option value='layout1'>Layout 1</option>";
        select += "<option value='layout2'>Layout 2</option>";
        select += "<option value='layout3'>Layout 3</option>";
        select += "</select>";
        output += "<div class='item " + layout + "' data-id='" + id +"' data-layout='" + layout + "' data-sort='" + sort + "'><div class='item-content'><div class='my-custom-content'>" + select + "<a href='" + link + "'>" + title + "</a></div></div></div>";
    });

    output += "</div><button class='submitGrid'>Save</button>";

    $(".wrap").append(output);

    var grid = new Muuri('.grid', {
        dragEnabled: true,
        layout: {
            fillGaps: true,
            rounding: false
        },
        sortData: {
            order: function (item, element) {
                return parseFloat(element.getAttribute('data-sort'));
            },
        }
    });

    grid.sort('order');

    $(".layout-changer").change(function(){
        var choice = $(this).find("option:selected").val();
        var parent = $(this).closest(".item");
        var parentEl = $(this).closest(".item")[0];

        parent.removeClass().addClass("item").addClass(choice);
        parent.attr("data-layout", choice);
        grid.refreshItems(parentEl).layout();
        grid.layout();
    })
});

我的想法是，然后我想将 Muuri 实例的属性(id、顺序和代表每个项目大小的 CSS 类)传递给某种 PHP 函数，单击提交按钮后，该函数会更新每个帖子的 ACF数据库中的字段。

这是我已经开始开发的功能:

$(document).on("click", ".submitGrid", function(){
        var allItems = grid.getItems();
        var payload = [];
        var item = {};
        for (i = 0; i < allItems.length; i++) {
            item = {
                order: i,
                layout: allItems[i]._element.dataset.layout,
                id: allItems[i]._element.dataset.id.replace(/\D/g,'')
            }
            payload.push(item);
        }
    })

它为 Muuri 网格中的每个项目/帖子创建一个包含对象的数组，其中使用 for 循环的索引将属性设置为项目的顺序，然后设置 id和 layout 使用我在最初加载页面或更改网格布局时在元素上设置的数据字段。

我如何将此信息发送到 PHP 函数，然后在这些对象的帮助下更新数据库中的每个帖子？

Answer 1

通过 jQuery ajax 函数发送(因为这就是您正在使用的)

 $(document).on("click", ".submitGrid", function(){
        var allItems = grid.getItems();
        var payload = [];
        var item = {};
        for (i = 0; i < allItems.length; i++) {
            item = {
                order: i,
                layout: allItems[i]._element.dataset.layout,
                id: allItems[i]._element.dataset.id.replace(/\D/g,'')
            }
            payload.push(item);
        }

        var itemdata = JSON.stringify(payload);
        $.ajax({
            url: "/path/to/phpfile.php",
            type: "POST",
            data: {
              postitems: itemdata
            },
            beforeSend: function() {
            },
            success: function(response) {
              console.log(response);
            }
        });        
  });

PHP 文件中的 POST 参数:

$postitems = $_POST['postitems'];
$postArray = json_decode($postitems);
print_r($postArray);
exit();