javascript - WordPress - 使用自定义帖子字段中的参数创建动态 onclick 重定向方法

Question

说实话，我不是 wordpress env 的专家。但我必须解决某个问题。我的模板代码如下:

<div class="section-one">
    <div class="section-one-container">
        <h1><?php the_title(); ?></h1>
        <?php the_excerpt(); ?>
        <div class="link">
            <a href="" target="_blank">Go to the presentation</a>
        </div>
    </div>
    <?php if(has_post_thumbnail())
        echo '<div class="image">';
        the_post_thumbnail('full');
        echo '</div>'; 
    ?>
</div>

我想在单击“转到演示文稿”后将用户重定向到新浏览器选项卡内的演示文稿页面。问题是我必须传递一些位于 WordPress 自定义字段中的参数，并且每个 WordPress 帖子都不同。

我的想法是创建 JS 函数，该函数将在使用 HTML onclick 方法时启动。

function gotoUrl(path, params, method) {
    //Null check
    method = method || "post"; // Set method to post by default if not specified.

    // The rest of this code assumes you are not using a library.
    // It can be made less wordy if you use one.
    var form = document.createElement("form");
    form.setAttribute("method", method);
    form.setAttribute("action", path);

    //Fill the hidden form
    if (typeof params === 'string') {
        var hiddenField = document.createElement("input");
        hiddenField.setAttribute("type", "hidden");
        hiddenField.setAttribute("name", 'data');
        hiddenField.setAttribute("value", params);
        form.appendChild(hiddenField);
    }
    else {
        for (var key in params) {
            if (params.hasOwnProperty(key)) {
                var hiddenField = document.createElement("input");
                hiddenField.setAttribute("type", "hidden");
                hiddenField.setAttribute("name", key);
                if(typeof params[key] === 'object'){
                    hiddenField.setAttribute("value", JSON.stringify(params[key]));
                }
                else{
                    hiddenField.setAttribute("value", params[key]);
                }
                form.appendChild(hiddenField);
            }
        }
    }

    document.body.appendChild(form);
    form.submit();
}

问题是，将自定义字段值传递到 goToUrl 函数的正确方法是什么？如何使用 wordpress 字段值创建 JS params 对象？ 如何将 JS 代码与 PHP 代码混合，例如:

const params = {
    color:  <?php the_field('color'); ?>,
    label: <?php the_field('label'); ?>,
    mode: <?php the_field('mode'); ?>
    ...
}

Answer 1

您似乎面临的主要问题是将 php 数据传递给 JS 文件。 wp_localize 函数正是针对这种情况而设计的。在您的情况下，您需要首先在functions.php中注册js文件并本地化变量，如下所示:

// Register the script
wp_register_script( 'some_handle', 'path/to/myscript.js' );
$custom_field = get_post_meta($postid,"meta_key",true); //get the custom field
// Localize the script with new data
$data = array(
    'some_value' => $custom_field
);
wp_localize_script( 'some_handle', '_object', $data );

// Enqueued script with localized data.
wp_enqueue_script( 'some_handle' );

然后您可以像这样访问 php 中的变量:

var value = _object.some_value;