每周获取最新的 Wordpress 资源

在 WordPress 中如何将 PHP 中的值传递给 Javascript

为了将 PHP 中的值传递给 WordPress 中的 JavaScript 文件,你必须使用 wp_localize_script 函数。 在使用 wp_localize_script 函数访问本地化的 JavaScript 变量之前,您需要先注册脚本,然后将脚本加入队列。

第一步:在 WordPress 中注册 Javascript 文件

首先打开你的主题中 function.php 文件,然后找到类似 enqueue_scripts 用来加载 Javascript 脚本的函数。将下面的代码粘贴进去:

wp_register_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/plugin-name-admin.js', array(), $this->version, false );

如果你的脚本依赖于 jQuery,你需要调整参数如下所示:

wp_register_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/plugin-name-admin.js', array( 'jquery' ), $this->version, false );

第二步:将该 JavaScript 文件加入 WordPress 队列

接下来,需要在 enqueue_scripts 方法中运行 wp_enqueue_script 函数。

wp_enqueue_script( $this->plugin_name);

第三步:创建 PHP 变量用来传递到 JavaScript 文件

enqueue_scripts 方法中创建 add_something_nonceuser_id 变量,待会我们要将这两个变量的值传递到 JavaScript 文件中。

$add_something_nonce = wp_create_nonce( "add_something" );
$user_id = get_current_user_id();

第四步:运行 wp_localize_script

我们终于到达了本文的核心部分,wp_localize_script 函数。我们要把它添加到我们的 enqueue_scripts 函数中。 wp_localize_script 函数的三个参数分别代表:

  • 第一个参数必须与上面注册的脚本相关联,在我们的例子中就是 plugin_name 要一致,这个设置的是我们要把 PHP 变量值传递给哪个 Javascript 文件
  • 第二个参数设置包含 PHP 变量值的 JavaScript 变量的名称
  • 第三个参数是要传递给 JavaScript 文件的 PHP 变量值数组
wp_localize_script( $this->plugin_name, 'plugin_name_ajax_object', 
    array( 
        'ajax_url' => admin_url( 'admin-ajax.php' ),
        'add_something_nonce'=> $add_something_nonce,
        'user_id' => $user_id
    ) 
);

第五步:在 Javascript 文件中访问 PHP 变量

这样你就可以在 plugin-name-admin.js 文件中访问之前创建的 PHP 变量值了。

(function($) {
    'use strict';
     console.log(plugin_name_ajax_object);
     console.log(plugin_name_ajax_object.ajax_url);
     console.log(plugin_name_ajax_object.user_id);
     console.log(plugin_name_ajax_object.add_something_nonce);
})(jQuery);

You May Also Like

About the Author: ted

发表评论

电子邮件地址不会被公开。 必填项已用*标注