如何获取WordPress定制器未保存小部件列表及侧边栏数量的JS存储位置？

嘿，我来帮你搞定这两个WordPress定制器的小部件状态问题——这俩细节确实有点藏得深，我之前做定制器扩展的时候也踩过类似的坑：

WordPress定制器的未保存状态其实都托管在wp.customize的变更集合里，而小部件的实时状态是由wp.customize.widgets这个核心对象来管理的。你可以通过它的instances集合来获取所有当前在定制器中的小部件实例，包括新增、修改但还没保存的那些。

如果只想筛选出有未保存更改的小部件，可以用changed()方法判断：

// 收集所有未保存的小部件实例
const unsavedWidgets = [];
wp.customize.widgets.instances.each( (widget) => {
  // changed() 会返回该小部件是否有未提交的修改
  if (widget.changed()) {
    unsavedWidgets.push({
      id: widget.id,
      name: widget.get('name'),
      // 还可以获取修改后的属性，比如 widget.get('instance')
    });
  }
});

console.log('未保存的小部件列表:', unsavedWidgets);

如果是要获取所有当前在定制器中的小部件（不管有没有修改，包括刚添加的未保存小部件），直接遍历wp.customize.widgets.instances就行——新增的小部件会立刻被加入这个集合，不需要等保存。

服务器端的wp_get_sidebars_widgets只能拿到已保存的状态，但前端未保存的实时状态，其实存在wp.customize.widgets.sidebars这个Backbone集合里。每个侧边栏模型的widgets属性，就是当前关联的小部件ID数组，会实时反映你在定制器里的添加/移除操作。

下面是获取指定侧边栏未保存小部件数量的示例：

// 封装一个获取侧边栏当前小部件数量的函数
function getCurrentSidebarWidgetCount(sidebarId) {
  // 从sidebars集合中找到目标侧边栏
  const sidebar = wp.customize.widgets.sidebars.get(sidebarId);
  if (sidebar) {
    // widgets属性是该侧边栏下的小部件ID数组，length就是数量
    return sidebar.widgets.length;
  }
  // 如果找不到对应侧边栏，返回0
  return 0;
}

// 示例：获取默认侧边栏（假设ID是sidebar-1）的当前数量
console.log('sidebar-1 未保存的小部件数量:', getCurrentSidebarWidgetCount('sidebar-1'));

如果需要实时监听数量变化（比如用户添加/移除小部件时立刻更新显示），可以绑定change:widgets事件：

// 监听所有侧边栏的小部件列表变化
wp.customize.widgets.sidebars.on('change:widgets', (sidebar) => {
  console.log(`侧边栏 ${sidebar.id} 的小部件数量更新为:`, sidebar.widgets.length);
});

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