WordPress 中使用 wp_localize_script 从 PHP 传递参数给 JavaScript

WordPress 的 wp_localize_script 函数从它名字可以看出它是用来进行前端本地化的,它的工作方式是加载翻译之后的文本,接着将它们当做一个 JavaScript 对象输出到 HTML 中,然后 JS 脚本就用该对象去输出对应语言的文本了。

使用 wp_localize_script 从 PHP 传递参数给 JavaScript

但是我们使用 wp_localize_script 过程中,反而主要用来从 PHP 传递参数给 JavaScript,下面我通过微信机器人插件来讲讲如何使用该函数从 PHP 传递参数给 JavaScript。

微信公众平台在用户分享的时候可以让用自定义标题,摘要,图片和链接,我们需要把标题,摘要,图片和链接这些参数从 PHP 传递给 JavaScript,

首先使用 wp_enqueue_script 函数加载微信 JSSDK 的 jweixin.js 和我们自己写的 weixin.js:

代码语言:javascript

复制

wp_enqueue_script('jweixin', 'http://res.wx.qq.com/open/js/jweixin-1.0.0.js', array('jquery') );
wp_enqueue_script('weixin', WEIXIN_ROBOT_PLUGIN_URL.'/template/static/weixin.js', array('jweixin', 'jquery') );

然后我们可以把需要自定义的标题,摘要,图片和链接作为一个数组,

代码语言:javascript

复制

$weixin_data = array('img'	=> $img,'link'	=> $link,'title'	=> $title,'desc'	=> $desc,
);

最后使用 wp_localize_script 将该变量传递给 JavaScript:

代码语言:javascript

复制

wp_localize_script('weixin', 'weixin_data', $weixin_data);

wp_localize_script 函数一共有三个参数:

  • 第一个是:$handle,需把数据附加到脚本的 handle。
  • 第二个是:$object_name,生成 JavaScript 对象名。
  • 第三个是:$data,数据,可以文本,可以二位或者多维数组,会使用 json_encode 函数生成 JavaScript 的对象或者数据。

然后可以看到输出的结果:

代码语言:javascript

复制

<script type='text/javascript'>
/* <![CDATA[ */
var weixin_data = {"img":"http:\/\/77flz7.com1.z0.glb.clouddn.com\/wpjam\/banner\/wp-dkblue-blue-640x960.png?imageView2\/1\/w\/120\/h\/120","link":"http:\/\/blog.wpjam.com\/article\/wordpress-cache-plugins\/?debug","title":"WordPress \u5404\u79cd\u7f13\u5b58\u63d2\u4ef6\b\u4ecb\u7ecd\u548c\u5e94\u7528","desc":"WordPress \u7f13\u5b58\u63d2\u4ef6\u7efc\u8ff0\uff0cWordPress \u7f13\u5b58\u63d2\u4ef6\u6709\u5f88\u591a\u79cd\uff0c\u6709\u6587\u4ef6\u7f13\u5b58\uff0c\u5185\u5b58\u7f13\u5b58\uff0cHTML \u9759\u6001\u7f13\u5b58\u3002\u4f60\u9700\u8981\u6839\u636e\u81ea\u5df1\u7684\u670d\u52a1\u5668\u7684\u7279\u70b9\u7ed9\u81ea\u5df1\u7684 WordPress \u535a\u5ba2\u9009\u62e9\u76f8\u5e94\u7684\u7f13\u5b58\u63d2\u4ef6\u3002","refresh_url":"","post_id":"1406"};
/* ]]> */
</script>

这样就可以在 weixin.js 中使用 weixin_data 了。

将 wp_localize_script 从 PHP 传递给 JavaScript 的参数不编码成 unicode

但是从上面可以看到中文都编码成 unicode,虽然使用上没有什么问题,但是看起来总是不爽,有什么办法呢?

wp_localize_script 在最后 data参数中提供了一个叫做l10nprintafter的key,它可以无任何干扰直接输出值,我们把data 参数,使用 json_encode 函数不编码成 unicode 方式放入 l10n_print_after 的 key 中,最后再传递给 wp_localize_script 即可:

代码语言:javascript

复制

$weixin_data = array('l10n_print_after' => 'weixin_data = ' . json_encode($weixin_data, JSON_UNESCAPED_UNICODE)
);wp_localize_script( $handle, $object_name, $weixin_data );

最后输出的结果是:

代码语言:javascript

复制

<script type='text/javascript'>
/* <![CDATA[ */
var weixin_data = [];
weixin_data = {"img":"http:\/\/77flz7.com1.z0.glb.clouddn.com\/wpjam\/banner\/wp-dkblue-blue-640x960.png?imageView2\/1\/w\/120\/h\/120","link":"http:\/\/blog.wpjam.com\/article\/wordpress-cache-plugins\/?debug=2","title":"WordPress 各种缓存插件介绍和应用","desc":"WordPress 缓存插件综述,WordPress 缓存插件有很多种,有文件缓存,内存缓存,HTML 静态缓存。你需要根据自己的服务器的特点给自己的 WordPress 博客选择相应的缓存插件。"};;
/* ]]> */
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/55980.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

22个无版权的4K高清视频素材网站,各种风格视频都有!

平时我也会做一些短视频和宣传片&#xff01; 所以&#xff0c;对找素材这回事不在话下&#xff0c;国内外也有不少高清无水印的视频素材网站&#xff0c;今天就分享一些高清剪辑必备的视频素材渠道&#xff0c;不少也是免费哒&#xff0c;平时需要找素材的同学千万不要错过啦…

解决 Django 数据库迁移报错:无法添加带有 `auto_now_add=True` 的字段20241008

解决 Django 数据库迁移报错&#xff1a;无法添加带有 auto_now_addTrue 的字段 引言 在使用 Django 进行开发时&#xff0c;数据库迁移是不可避免的一部分。然而&#xff0c;添加新字段特别是带有 auto_now_addTrue 的日期时间字段时&#xff0c;可能会遇到一些令人头疼的错…

Python中的数据可视化艺术:用Matplotlib和Seaborn讲故事

Python中的数据可视化艺术&#xff1a;用Matplotlib和Seaborn讲故事 数据可视化不仅仅是图表的绘制&#xff0c;更是通过视觉形式传达复杂信息的一种艺术。使用Python中的两个强大的库——Matplotlib和Seaborn&#xff0c;可以将数据转化为清晰、优美的图表&#xff0c;帮助我…

【Kubernetes】常见面试题汇总(五十六)

目录 123. pod 创建失败&#xff1f; 124. kube-flannel-ds-amd64-ndsf7 插件 pod 的 status 为 Init:0/1 &#xff1f; 特别说明&#xff1a; 题目 1-68 属于【Kubernetes】的常规概念题&#xff0c;即 “ 汇总&#xff08;一&#xff09;~&#xff08;二十二&#x…

道可云人工智能元宇宙每日资讯|中国发布首个汽车智能安全评价体系

道可云元宇宙每日简报&#xff08;2024年10月11日&#xff09;讯&#xff0c;今日元宇宙新鲜事有&#xff1a; 《新疆维吾尔自治区“数据要素”三年行动实施方案》发布 近日&#xff0c;新疆维吾尔自治区数字化发展局、自治区党委网信办、自治区科学技术厅等17部门联合印发《…

计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-05

计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-04 目录 文章目录 计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-04目录1. LLM-Augmented Symbolic Reinforcement Learning with Landmark-Based Task Decomposition摘要研究背景问题与挑战如何…

【大数据】大数据治理的全面解析

目录 引言一、什么是大数据治理&#xff1f;1.1 定义1.2 关键要素 二、大数据治理的框架三、大数据治理的重要性四、大数据治理的实施步骤五、数据治理中的关键技术六、大数据治理面临的挑战七、未来趋势总结 引言 大数据治理是现代企业管理中不可或缺的一部分&#xff0c;随着…

『网络游戏』下线数据清理【29】

修改服务端脚本&#xff1a;ServerSession.cs 修改服务端脚本&#xff1a;ServerRoot.cs 修改服务端脚本&#xff1a;CacheSvc.cs 修改服务端脚本&#xff1a;LoginSys.cs 运行服务器 运行客户端 - 连续登录账号 本章结束

VSCode的常用插件(持续更新)

点击左边工具栏的“扩展”&#xff0c;在搜索栏中查找对应插件&#xff0c;点击“安装”&#xff0c;安装完成后右边界面的插件会显示“卸载”按钮。 1、中文&#xff08;简体&#xff09;语言包 2、Auto Rename Tag 修改开始标签&#xff0c;结束标签也会随之自动变化。 3、O…

Python 网络爬虫高阶用法

网络爬虫成为了自动化数据抓取的核心工具。Python 拥有强大的第三方库支持&#xff0c;在网络爬虫领域的应用尤为广泛。本文将深入探讨 Python 网络爬虫的高阶用法&#xff0c;包括处理反爬虫机制、动态网页抓取、分布式爬虫以及并发和异步爬虫等技术。以下内容结合最新技术发展…

docker+mysql创建用户名密码_docker里面的mysql 更换密码

进入mysql容器 操作vi etc/mysql/my.cnf 默认是不安装vi编辑器的&#xff0c;下面安装vi 更新安装包 apt-get update 安装vim 执行这条语句 apt-get install vim 到修改docker容器里面的mysql数据库密码了 启动mysql容器 docker exec -it mysql /bin/bash 编辑配置文件 我这里是…

TON(四)底层编译——PROGRAM{

系列文章目录 文章目录 系列文章目录前言一、PROCGRAM{ 是什么&#xff1f;二、详细分析PROCGRAM{1. 0 : main2. proclist null!variable ( – )hole ( – p)box (x – p)示例 3. proccnt 0!4. gvarcnt 0!5. { bl word newproc } : NEWPROCdeclproc 前言 这次我们将详细讲解PR…

Python 爬取天气预报并进行可视化分析

今天&#xff0c;我们就来学习如何使用 Python 爬取天气预报数据&#xff0c;并用数据可视化的方式将未来几天的天气信息一目了然地展示出来。 在本文中&#xff0c;我们将分三步完成这一任务&#xff1a; 使用 Python 爬取天气数据数据解析与处理用可视化展示天气趋势 让我…

【C++】第五节:内存管理

1、C/C内存分布 看下面一段代码 int globalVar 1; static int staticGlobalVar 1; void Test() {static int staticVar 1;int localVar 1;int num1[10] { 1, 2, 3, 4 };char char2[] "abcd";const char* pChar3 "abcd";int* ptr1 (int*)malloc(s…

在 Oracle 中利用 `ORA_HASH` 高效处理大规模数据:并行分片的最佳实践20241008

在 Oracle 中利用 ORA_HASH 高效处理大规模数据&#xff1a;并行分片的最佳实践 在数据处理规模越来越庞大的今天&#xff0c;如何高效地处理数百万甚至数千万条记录成为数据库性能优化的重要课题。面对这种挑战&#xff0c;单线程处理数据显然会成为瓶颈。通过使用多线程并行…

与C++内存管理和STL简介的爱恨情仇

本文 1.C/C内存分布2.C语言中动态内存管理方式&#xff1a;malloc/calloc/realloc/free总结 3.C内存管理方式new/delete操作内置类型new和delete操作自定义类型 4.operator new与operator delete函数&#xff08;重要点进行讲解&#xff09;5.new和delete的实现原理内置类型自定…

制造业DT数字化之生产制造业务建模

一、工厂建模为何物&#xff1f; 对制造业人员&#xff08;人&#xff09;、设备&#xff08;机&#xff09;、材料&#xff08;料&#xff09;、工艺流程&#xff08;法&#xff09;、工厂环境&#xff08;环&#xff09;数据化管理的过程就叫工厂建模。 二、制造建模有哪几大…

HTTP 和 WebSocket

目录 HTTP是什么HTTP局限性&#xff08;HTTP1.1&#xff09;请求和响应HTTP的主要特点&#xff1a;HTTP版本&#xff1a; HTTP与TCP关系数据封装传输过程1. **协议层次模型**&#xff1a;2. **封装过程**&#xff1a;1. **应用层&#xff08;HTTP&#xff09;**&#xff1a;2. …

【操作系统】引导(Boot)电脑的奇妙开机过程

&#x1f339;&#x1f60a;&#x1f339;博客主页&#xff1a;【Hello_shuoCSDN博客】 ✨操作系统详见 【操作系统专项】 ✨C语言知识详见&#xff1a;【C语言专项】 目录 什么是操作系统的引导&#xff1f; 操作系统的引导&#xff08;开机过程&#xff09; Windows操作系…

QD1-P2 HTML 编辑器:HBuilderX

本节学习&#xff1a; HTML课程内容介绍HBuilderX编辑器的使用 本节视频 www.bilibili.com/video/BV1n64y1U7oj?p2 HTML 内容 基础语法 标签整体架构DOCTYPE 常用标签 标题和水平线段落和换行列表div 和 span格式化标签图片超链接标签表格表单字符实体 编辑器 HBuilder…