如何在WordPress页面中使用内联JS创建自定义配置文件和获取数据

时间：2021-04-09 作者：aditya

我对WordPress和PHP都是新手，并用它制作了我的第一个应用程序。

目前，我使用“HTML块元素”（HTML block Element）在空白的WordPress页面上添加带有自定义HTML和内联Javascript代码的内容（使用Elementor）。我想创建一个新的配置文件（或在现有的配置文件上添加数据），在这个文件上我可以定义一些变量，然后使用Js获取这些变量并相应地工作。

我尝试在wp config文件中添加定义并使用Js访问它们，但没有成功。

wp-config

define(\'PERSONAL_KEY\', \'VALUE\');
在WP页面的自定义HTML代码元素中

<script>   
   var data = "<?php echo PERSONAL_KEY; ?>";
   // Didn\'t worked
</script>
有没有办法从外部配置文件中获取内嵌JS代码中的变量？

1 个回复
最合适的回答,由SO网友:Antti Koskinen 整理而成

我怀疑您使用的html块元素不能处理php，这就是为什么script标记不能按您希望的方式工作。

wp_localize_script() 是一个方便的函数，用于将数据从PHP传递到脚本。该函数的作用基本上与您尝试使用html块时所做的相同。

假设你在你的主题中这样做，你有以下结构，

// theme structure
/your-theme
    style.css
    functions.php
    /assets
        scripts.js
你已经定义了一个常数wp-config.php 文件

// wp-config.php
define(\'PERSONAL_KEY\', \'VALUE\');
在您的主题中functions.php 然后您可以enqueue your scripts file, 其中需要定义的常量，并使用wp_localize_script().

// functions.php
<?php
add_action(\'wp_enqueue_scripts\', \'your_theme_assets\');
function your_theme_assets() {
    $url = get_template_directory_uri();
    // enqueue scripts
    wp_enqueue_script( \'your-theme\', $url . \'/assets/scripts.js\', array(\'\'), \'1.0.0\', true );
    // localize variable for scripts
    wp_localize_script(
        \'your-theme\', 
        \'yourTheme\', 
        array(
            \'personalKey\' => defined(\'PERSONAL_KEY\') ? PERSONAL_KEY : \'\',
            // \'more\' => \'values\',
        )
    );
}
之后，您可以访问personalKey 从本地化yourTheme 全局变量。

// assets/scripts.js
console.log(yourTheme.personalKey);

标签： php   javascript   小码农  

相关推荐

使用WordPress的PHP代码，如何一次仅从数千个用户中批量删除100个订阅者？

使用WordPress PHP代码，如何一次从数千个用户中批量删除100个订阅者？（以下代码试图一次删除所有50k用户，而我的服务器挂起。如果我一次只能删除100个用户，那么我可以每5分钟使用一次Cron作业。）<?php $blogusers = get_users( ‘role=subscriber’ ); // Array of WP_User objects. foreach ( $blogusers as $user ) { $user_id = $user