EDIT: Complete re-write

在过去的几周里，我一直在为我的主题开发一个自定义扩展。

这是我第一次用Wordpress“开发”。所有的工作都很好，我对结果的功能很满意，尽管它需要一些整理。

我希望将我的js函数移到一个外部文件-自定义。js。

原始格式：

main-block.php

$custom1 = $custom_meta[\'custom1\'];

<form name="customForm">
                Validation Code:<br>
                <!-- <input type="number" name="inputcode"><br> -->
                <input type="password" name="inputcode" id="inputcode" maxlength="6" inputmode="numeric">
                <input type="text" name="message" id="message" style="display:none; background-color: #FFCCCC;"><br>
                <input type="button" name="submitbutton" value="Submit" onClick="customfunction()">
                <div id="errors"></div>
                </form>

<script type="text/javascript">

function customfunction() {
                        const userInput = document.customForm.inputcode.value;
                        const pidR = "<?php echo $postid ?>";
                        const useridR = "<?php echo $userid ?>";
                        fetch(`http://....../wp-json/api/v1/customquery?code=${userInput}&pid=${pidR}&userid=${useridR}`).then(r => r.json()).then(data => {
                .....DO STUFF.....
                        })
                    };
</script>

我真的不喜欢将此javascript声明为内联。

我尝试了很多事情，但更复杂的是，我的函数使用了从php中提取的变量：

  const pidR = "<?php echo $postid ?>";
  const useridR = "<?php echo $userid ?>";
  const userInput = document.customForm.inputcode.value;

Currently in my child\'s functions.php I have written:

add_action(\'wp_head\', function () {
// Register the script
wp_register_script( \'custom_script\', get_stylesheet_directory_uri() . \'/custom.js\' );

// Localize the script with new data
$custom_api_vars = array(
    \'pid\' => get_the_id(),
    \'uid\' => get_current_user()
);
wp_localize_script( \'custom_script\', \'custom_vars\', $custom_api_vars );

// Enqueued script with localized data.
wp_enqueue_script( \'custom_script\' , array(\'jquery\'), \'1.0\', true);

});

and in my custom.js file:

function redeem() {
    const pidR = custom_vars.pid;
    const useridR = custom_vars.uid;
    fetch(`http://....../wp-json/api/v1/customquery?code=${userInput}&pid=${pidR}&userid=${useridR}`).then(r => r.json()).then(data => {
        .....do stuff.....
    })
};

API比较表单中输入代码的值，并根据输入代码是否与存储在数据库中的post值匹配，执行添加/更新\\u user\\u元进程。

当我从页面调用函数时，控制台中出现以下错误：

未捕获（承诺中）引用错误：未定义JQuery

我还需要知道如何从外部调用另一个变量（如下），因为我认为这在函数中没有意义。php，因为它与我页面上的表单相关。

const userInput = document.customForm.inputcode.value;

如果有人能带我走过这段路，我将不胜感激。

如果你能做到这一点，谢谢你。

if ( ! wp_script_is( \'jquery\', \'enqueued\' )) {
    //Enqueue jQuery
    wp_enqueue_script( \'jquery\' );
}

(function ($) {
    const pidR = custom_vars.pid;
    const useridR = custom_vars.uid;
    // do stuff...
})(jQuery);