尧图网页设计 
WordPress Agent Skills 交互性 API 指南data-wp-* 指令与状态管理实战【免费下载链接】agent-skillsExpert-level WordPress knowledge for AI coding assistants - blocks, themes, plugins, and best practices项目地址: https://gitcode.com/gh_mirrors/agents/agent-skills本指南基于 agent-skills 项目中的 wp-interactivity-api 技能手把手讲解 WordPress 交互性 APIInteractivity API如何用data-wp-*指令驱动前端交互以及如何用 Store 完成状态管理。全程几乎不需要写复杂 JavaScript是新手快速打造动态 WordPress 区块、主题与插件功能的完整教程。为什么选择 WordPress 交互性 API传统的 jQuery 方案需要监听 DOM、手动序列化数据、自己处理异步请求而 WordPress 6.5 引入的交互性 API 带来了三个核心变化对比项传统方案交互性 API交互绑定JS 里选择器监听HTML 属性直接声明状态管理分散在各处统一的 Store状态动作服务端渲染需自己拼 HTMLPHP 原生命中SEO 友好对新手最直观的感受你在 HTML 上写data-wp-on--clickactions.toggle点击就生效——不用写监听代码。三大核心概念Store、State、Action 理解状态管理只需记住三层结构Store仓库以命名空间划分的独立状态盒子如myPluginState状态仓库里可变的响应式数据如menuOpen、fruitsAction动作修改状态的函数如toggle()、addMango()Store 用store( 命名空间, { state, actions } )注册。命名空间必须与 HTML 上data-wp-interactive的值完全一致否则指令会静默失效——这是新手踩坑第一名。data-wp-* 指令速查表 以下是最常用的指令完整清单见 directives-quickref.md指令作用新手理解data-wp-interactive声明交互区域命名空间划出活动范围data-wp-context提供局部上下文给子元素传参数data-wp-on--click绑定点击事件点击执行动作data-wp-on-async--click绑定异步事件推荐涉及请求时必用data-wp-bind--hidden状态绑定到 DOM 属性有值就隐藏/显示data-wp-class--name状态切换 CSS 类名控制样式开关data-wp-text/data-wp-html状态绑定到文本内容动态改文字data-wp-each循环渲染列表数组变列表WordPress 6.9 重要变更 ⚠️data-wp-ignore已弃用会破坏上下文继承和客户端导航请避免使用唯一指令 ID同一元素可挂多个同类指令用---分隔如data-wp-on--click---plugin-a...多个插件不再互相覆盖状态管理实战服务端渲染最佳实践 ✨官方技能强烈建议先在服务端渲染好 HTML好处是无布局抖动、首屏快、SEO 友好、JS 未加载时内容依然完整。第一步开启指令处理区块在block.json中声明支持{ supports: { interactivity: true } }主题/插件没有block.json时则用wp_interactivity_process_directives()手动处理 HTML。第二步用 PHP 初始化状态wp_interactivity_state( myPlugin, array( fruits array( Apple, Banana, Cherry ), hasFruits count( $fruits ) 0, ) );状态会自动序列化传给客户端 JS无需手动传参。第三步局部上下文元素级上下文用wp_interactivity_data_wp_context()生成data-wp-context属性适合在循环中给每一项传独立数据如itemId。第四步派生状态也要在 PHP 里定义 这是新手最容易忽略的一点如果hasFruits这类派生状态只写在 JS 里data-wp-bind--hiddenstate.hasFruits在服务端就不会生成hidden属性页面加载时会先闪现再隐藏布局抖动。正确做法是让 PHP 与 JS 的派生逻辑保持一致动态场景可用闭包onShoppingList function() { $state wp_interactivity_state(); $context wp_interactivity_get_context(); return in_array( $context[item], $state[shoppingList] ); }完整的服务端渲染示例PHP view.js 渲染结果见 server-side-rendering.md包含翻译文本、Ajax URL 与 Nonce 序列化到客户端的用法。快速排错清单点击没反应怎么办当什么都不发生时按顺序检查源自 debugging.md渲染出的 HTML 里是否存在data-wp-interactive根元素view 脚本模块viewScriptModule是否真的加载了看网络面板Store 命名空间与data-wp-interactive的值是否一致浏览器控制台在交互前有没有 JS 报错逐步缩小范围临时移除部分指令定位是哪条指令/哪个 Store 路径断了另外注意 WordPress 6.9 中getServerState()/getServerContext()会在客户端页面切换后重置不要假设旧值会保留路由区域新增attachTo属性可让弹层弹窗、遮罩渲染在页面任意位置。配套技能与工具链 交互性 API 不是孤立的agent-skills 项目中它与其他技能协同工作wp-project-triage自动检测项目类型与是否使用了交互性 APIsignals.usesInteractivityApi修改后应复检wp-block-development区块开发block.json、属性与渲染回调注册方式见 registration.mdwordpress-router判断项目归属并路由到正确的技能流程场景示例 interactivity-route-and-debug.json演示了点击无反应从分类项目、检测配置到验证 Store 的完整 10 步排查路径总结新手上手四步走 ✅声明HTML 加data-wp-interactive命名空间注册JS 中用store()定义 state 与 actions命名空间对齐绑定用data-wp-on--*、data-wp-bind--*等指令连接 DOM 与状态服务端打底PHP 里用wp_interactivity_state()初始化状态含派生状态保证首屏正确掌握这四步配合 SKILL.md 中的流程指引你就能用最少代码构建性能与 SEO 都出色的 WordPress 交互功能。【免费下载链接】agent-skillsExpert-level WordPress knowledge for AI coding assistants - blocks, themes, plugins, and best practices项目地址: https://gitcode.com/gh_mirrors/agents/agent-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 WordPress Agent Skills 交互性 API 指南：data-wp-* 指令与状态管理实战
WordPress Agent Skills 交互性 API 指南data-wp-* 指令与状态管理实战【免费下载链接】agent-skillsExpert-level WordPress knowledge for AI coding assistants - blocks, themes, plugins, and best practices项目地址: https://gitcode.com/gh_mirrors/agents/agent-skills本指南基于 agent-skills 项目中的 wp-interactivity-api 技能手把手讲解 WordPress 交互性 APIInteractivity API如何用data-wp-*指令驱动前端交互以及如何用 Store 完成状态管理。全程几乎不需要写复杂 JavaScript是新手快速打造动态 WordPress 区块、主题与插件功能的完整教程。为什么选择 WordPress 交互性 API传统的 jQuery 方案需要监听 DOM、手动序列化数据、自己处理异步请求而 WordPress 6.5 引入的交互性 API 带来了三个核心变化对比项传统方案交互性 API交互绑定JS 里选择器监听HTML 属性直接声明状态管理分散在各处统一的 Store状态动作服务端渲染需自己拼 HTMLPHP 原生命中SEO 友好对新手最直观的感受你在 HTML 上写data-wp-on--clickactions.toggle点击就生效——不用写监听代码。三大核心概念Store、State、Action 理解状态管理只需记住三层结构Store仓库以命名空间划分的独立状态盒子如myPluginState状态仓库里可变的响应式数据如menuOpen、fruitsAction动作修改状态的函数如toggle()、addMango()Store 用store( 命名空间, { state, actions } )注册。命名空间必须与 HTML 上data-wp-interactive的值完全一致否则指令会静默失效——这是新手踩坑第一名。data-wp-* 指令速查表 以下是最常用的指令完整清单见 directives-quickref.md指令作用新手理解data-wp-interactive声明交互区域命名空间划出活动范围data-wp-context提供局部上下文给子元素传参数data-wp-on--click绑定点击事件点击执行动作data-wp-on-async--click绑定异步事件推荐涉及请求时必用data-wp-bind--hidden状态绑定到 DOM 属性有值就隐藏/显示data-wp-class--name状态切换 CSS 类名控制样式开关data-wp-text/data-wp-html状态绑定到文本内容动态改文字data-wp-each循环渲染列表数组变列表WordPress 6.9 重要变更 ⚠️data-wp-ignore已弃用会破坏上下文继承和客户端导航请避免使用唯一指令 ID同一元素可挂多个同类指令用---分隔如data-wp-on--click---plugin-a...多个插件不再互相覆盖状态管理实战服务端渲染最佳实践 ✨官方技能强烈建议先在服务端渲染好 HTML好处是无布局抖动、首屏快、SEO 友好、JS 未加载时内容依然完整。第一步开启指令处理区块在block.json中声明支持{ supports: { interactivity: true } }主题/插件没有block.json时则用wp_interactivity_process_directives()手动处理 HTML。第二步用 PHP 初始化状态wp_interactivity_state( myPlugin, array( fruits array( Apple, Banana, Cherry ), hasFruits count( $fruits ) 0, ) );状态会自动序列化传给客户端 JS无需手动传参。第三步局部上下文元素级上下文用wp_interactivity_data_wp_context()生成data-wp-context属性适合在循环中给每一项传独立数据如itemId。第四步派生状态也要在 PHP 里定义 这是新手最容易忽略的一点如果hasFruits这类派生状态只写在 JS 里data-wp-bind--hiddenstate.hasFruits在服务端就不会生成hidden属性页面加载时会先闪现再隐藏布局抖动。正确做法是让 PHP 与 JS 的派生逻辑保持一致动态场景可用闭包onShoppingList function() { $state wp_interactivity_state(); $context wp_interactivity_get_context(); return in_array( $context[item], $state[shoppingList] ); }完整的服务端渲染示例PHP view.js 渲染结果见 server-side-rendering.md包含翻译文本、Ajax URL 与 Nonce 序列化到客户端的用法。快速排错清单点击没反应怎么办当什么都不发生时按顺序检查源自 debugging.md渲染出的 HTML 里是否存在data-wp-interactive根元素view 脚本模块viewScriptModule是否真的加载了看网络面板Store 命名空间与data-wp-interactive的值是否一致浏览器控制台在交互前有没有 JS 报错逐步缩小范围临时移除部分指令定位是哪条指令/哪个 Store 路径断了另外注意 WordPress 6.9 中getServerState()/getServerContext()会在客户端页面切换后重置不要假设旧值会保留路由区域新增attachTo属性可让弹层弹窗、遮罩渲染在页面任意位置。配套技能与工具链 交互性 API 不是孤立的agent-skills 项目中它与其他技能协同工作wp-project-triage自动检测项目类型与是否使用了交互性 APIsignals.usesInteractivityApi修改后应复检wp-block-development区块开发block.json、属性与渲染回调注册方式见 registration.mdwordpress-router判断项目归属并路由到正确的技能流程场景示例 interactivity-route-and-debug.json演示了点击无反应从分类项目、检测配置到验证 Store 的完整 10 步排查路径总结新手上手四步走 ✅声明HTML 加data-wp-interactive命名空间注册JS 中用store()定义 state 与 actions命名空间对齐绑定用data-wp-on--*、data-wp-bind--*等指令连接 DOM 与状态服务端打底PHP 里用wp_interactivity_state()初始化状态含派生状态保证首屏正确掌握这四步配合 SKILL.md 中的流程指引你就能用最少代码构建性能与 SEO 都出色的 WordPress 交互功能。【免费下载链接】agent-skillsExpert-level WordPress knowledge for AI coding assistants - blocks, themes, plugins, and best practices项目地址: https://gitcode.com/gh_mirrors/agents/agent-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考