avatar
文章
649
标签
2112
分类
180
开发
  • 大前端
  • 人工智能
  • 小程序
  • 桌面应用
  • 游戏开发
服务器&网络
  • 服务器
  • 网络
归档
标签
友链
联系我们
仰观苍穹思环宇
开发
  • 大前端
  • 人工智能
  • 小程序
  • 桌面应用
  • 游戏开发
服务器&网络
  • 服务器
  • 网络
归档
标签
友链
联系我们

深入理解 WordPress wp_localize_script()：如何安全高效地将 PHP 数据传递给前端

发表于2025-02-25|更新于2026-09-12|wordoress
wordpresswp_localize_script()Localizing JavaScript DataWordPress REST API URLWordPress NonceWordPress Ajax URLPHP中的变量传递到前端
cover of previous post
上一篇
创建动态平滑无缝渐变文字效果的技巧
cover of next post
下一篇
孙子兵法36计和相关解释
相关推荐
cover
2026-01-15
CentOS服务器加宝塔环境下为多个独立域名配置Cloudflare CDN并防御DDOS攻击的完整流程与实操指南
cover
2024-06-04
Docker中实现WordPress的持久化存储与第三方数据库连接(一种简单可靠的数据管理方案)
cover
2025-04-25
Enfold主题中结合Contact Form 7与Popup Maker实现表单验证后自动刷新并控制资源下载的功能(邮件真实性验证,验证码验证下载资源)
cover
2026-04-03
Hostinger多站点WordPress媒体404日志分析与自动修复脚本实现批量扫描去重统计精准IP过滤与安全修复
cover
2026-03-04
Linux环境下批量与单文件安全删除WordPress备份Zip中(duplicator)或者wordpress网站站点目录中mu-plugins目录的交互式可视化运维脚本完整解决方案与实践总结
cover
2026-03-27
MySQL数据库管理完整指南包含登录问题处理创建数据库和用户权限分配删除数据库用户以及数据复制迁移方法
avatar
鸢尾花序
文章
649
标签
2112
分类
180
联系我们
目录
  1. 1. 1. 什么是 wp_localize_script()？
  2. 2. 2. wp_localize_script() 的基本用法
    1. 2.1. PHP 代码：
    2. 2.2. 解释：
      1. 2.2.1. 1. 使用自定义 AJAX 接口
        1. 2.2.1.1. 自定义接口的使用方法：
      2. 2.2.2. 2. 使用 WordPress REST API 接口
        1. 2.2.2.1. 使用 REST API 代替传统 AJAX 请求：
      3. 2.2.3. 3. 总结
  3. 3. 3. 前端 JavaScript 中使用传递的数据
    1. 3.1. JavaScript 代码（ajax-script.js）：
  4. 4. 4. 在后台处理 AJAX 请求
    1. 4.1. PHP 代码（处理 AJAX 请求）：
  5. 5. 5. 常见错误及解决方法
    1. 5.1. 1. Nonce 验证失败
    2. 5.2. 2. AJAX URL 配置错误
    3. 5.3. 3. Action 参数不匹配
    4. 5.4. 4. 权限问题
    5. 5.5. 5. 请求数据格式错误
  6. 6. 6. 常见的 400 错误排查
  7. 7. 7. 总结
  8. 8. 经常问道的问题
    1. 8.1. 1，我说的是创建自定义 AJAX 处理接口这里面的/my-custom-ajax-endpoint/应该指向谁？
      1. 8.1.1. 1. 使用 WordPress REST API
        1. 8.1.1.1. 步骤：
      2. 8.1.2. 2. 使用自定义的 AJAX 路由（不使用 REST API）
        1. 8.1.2.1. 步骤：
      3. 8.1.3. 总结
    2. 8.2. 2，wordpress里面这个函数感觉很有用：wp_localize_script()，请进行解释和它解决了哪些使用场景，以及其安全性
      1. 8.2.1. 函数解释：
      2. 8.2.2. 示例：
      3. 8.2.3. 解决的使用场景：
      4. 8.2.4. 安全性：
    3. 8.3. 3，展示更多wp_localize_script()的示例
      1. 8.3.1. 示例 1：传递 AJAX URL 和安全验证（Nonce）
        1. 8.3.1.1. PHP 代码：
        2. 8.3.1.2. JavaScript 代码（ajax-script.js）：
        3. 8.3.1.3. 解释：
      2. 8.3.2. 示例 2：根据当前页面的 ID 定义 JavaScript 变量
        1. 8.3.2.1. PHP 代码：
        2. 8.3.2.2. JavaScript 代码（page-id.js）：
        3. 8.3.2.3. 解释：
      3. 8.3.3. 示例 3：动态配置前端的文本（例如，显示翻译）
        1. 8.3.3.1. PHP 代码：
        2. 8.3.3.2. JavaScript 代码（text-script.js）：
        3. 8.3.3.3. 解释：
      4. 8.3.4. 示例 4：传递自定义配置数据到 JavaScript
        1. 8.3.4.1. PHP 代码：
        2. 8.3.4.2. JavaScript 代码（config-script.js）：
      5. 8.3.5. 解释：
    4. 8.4. 4，wordpress开发和前端开发，如何巧妙得到使用这个wp_localize_script()
      1. 8.4.1. 具体应用场景：
        1. 8.4.1.1. 代码详解：
        2. 8.4.1.2. 解释：
      2. 8.4.2. 如何在前端使用这些数据？
        1. 8.4.2.1. JavaScript 代码（ajax-script.js）：
        2. 8.4.2.2. 解释：
      3. 8.4.3. 结合前端和后端：如何处理请求？
        1. 8.4.3.1. PHP 代码（处理 AJAX 请求）：
        2. 8.4.3.2. 解释：
      4. 8.4.4. 综合示例：
      5. 8.4.5. 安全性：
    5. 8.5. 5，使用wp_localize_script()把后端的admin-ajax.php暴露到前端，可能遇到这个报错：Failed to load resource: the server responded with a status of 400 () amin-ajax.php
      1. 8.5.1. 1. Nonce 验证失败
    6. 8.6. 解决方法：
      1. 8.6.0.1. 前端代码：
      2. 8.6.0.2. 后端代码：
    7. 8.6.1. 2. AJAX URL 配置问题
      1. 8.6.1.1. 检查：
    8. 8.6.2. 3. Action 参数不匹配
      1. 8.6.2.1. 检查：
    9. 8.6.3. 4. 权限问题（针对未登录用户）
      1. 8.6.3.1. 检查：
    10. 8.6.4. 5. 请求数据格式问题
      1. 8.6.4.1. 检查：
    11. 8.6.5. 6. 浏览器控制台和服务器错误日志
    12. 8.6.6. 7. 缓存问题
    13. 8.6.7. 总结：
  • 9. 最简单的示例（wp_localize_script()）
    1. 9.1. 1，wordpress的wp_localize_script()，请使用一个最简单的示例来演示，js代码写在页面里面
      1. 9.1.1. 步骤 1: 在你的主题的 functions.php 文件中添加以下代码：
      2. 9.1.2. 步骤 2: 在 HTML 页面中直接插入 JavaScript：
      3. 9.1.3. 解释：
    2. 9.2. 2，我在前端得到如下报错：
      1. 9.2.1. 1. 确保 wp_localize_script() 先于 JavaScript 使用
      2. 9.2.2. 2. 确保 JavaScript 被正确地加载
      3. 9.2.3. 3. 修正代码
        1. 9.2.3.1. 更新后的 functions.php 代码：
        2. 9.2.3.2. 确保 JavaScript 代码在 my-custom-script.js 文件中：
        3. 9.2.3.3. 注意事项：
      4. 9.2.4. 4. 确认脚本的加载顺序
      5. 9.2.5. 5. 检查调试工具
    3. 9.3. 感觉这个不稳定，有的时候经常提示myScriptData未定义，是否有更加稳定的方式处理
      1. 9.3.1. 1. 确保脚本加载顺序：**
      2. 9.3.2. 修改 functions.php：
      3. 9.3.3. 2. 将 JavaScript 放在页面底部，避免早期访问
      4. 9.3.4. 修改 wp_enqueue_script() 中的参数：
      5. 9.3.5. 3. 使用 wp_footer 钩子插入 JavaScript**
      6. 9.3.6. 4. 避免缓存问题**
      7. 9.3.7. 5. 检查 WordPress 异常或插件冲突
      8. 9.3.8. 总结：
    4. 9.4. 笔者实践
    5. 9.5. 如下是一些个人想法和技巧，以及安全思考，也算是奇淫技巧
      1. 9.5.1. 1. 创建自定义 REST API 端点
      2. 9.5.2. 2. 前端调用这个封装后的 API
      3. 9.5.3. 3. 使用 wp_localize_script() 传递 API URL
      4. 9.5.4. 4. 为什么这样做？
      5. 9.5.5. 方法：使用 wp_remote_get() 代理默认 API
      6. 9.5.6. 解释
      7. 9.5.7. 前端调用
      8. 9.5.8. 优点
      9. 9.5.9. 修改后的代码
      10. 9.5.10. 关键改动
      11. 9.5.11. 前端示例
      12. 9.5.12. 最终效果
      13. 9.5.13. ✅ 代码示例
      14. 9.5.14. ✅ 代码解析
      15. 9.5.15. ✅ 前端示例
      16. 9.5.16. ✅ 最终效果
    • 最新文章
    Hexo静态博客添加联系表单:用Google Apps Script实现邮件直达
    Hexo静态博客添加联系表单:用Google Apps Script实现邮件直达2026-09-17
    白手起家没有资源的人如何通过资源整合一步步突破认知并打通合作路径的完整分析
    白手起家没有资源的人如何通过资源整合一步步突破认知并打通合作路径的完整分析2026-09-15
    独立站定位四步法服务谁、解决什么、凭什么是你、怎么赚钱——WordPress独立站从模糊定位到清晰战略的完整框架
    独立站定位四步法服务谁、解决什么、凭什么是你、怎么赚钱——WordPress独立站从模糊定位到清晰战略的完整框架2026-09-15
    Duplicator全量迁移WordPress后HTTPS挂了正确做法是只换wp-content并在duplicator部署网站的时候1Panel里把数据库host填成mysql而不是localhost
    Duplicator全量迁移WordPress后HTTPS挂了正确做法是只换wp-content并在duplicator部署网站的时候1Panel里把数据库host填成mysql而不是localhost2026-09-15
    多设备Hexo安装Butterfly主题里面博客search.xml过大导致GitHub推送失败的完整解决方案(含交互式清理脚本)
    多设备Hexo安装Butterfly主题里面博客search.xml过大导致GitHub推送失败的完整解决方案(含交互式清理脚本)2026-09-14
    告别逐个转换用md2pdf一键批量把Markdown变成PDF
    告别逐个转换用md2pdf一键批量把Markdown变成PDF2026-09-14
    Hexo+Butterfly主题search.xml过大导致GitHub推送失败之完整排查与解决SOP
    Hexo+Butterfly主题search.xml过大导致GitHub推送失败之完整排查与解决SOP2026-09-14
    用Python批量给Hexo文章自动补齐TDK：DeepSeek驱动、严格YAML、动态备份的完整实践
    用Python批量给Hexo文章自动补齐TDK：DeepSeek驱动、严格YAML、动态备份的完整实践2026-09-12
    ©2022 - 2026 By 鸢尾花序