Question

我在使用wp_localize_script时遇到了一些麻烦。关于这个已经存在很多问题，但我不知道如何在这个具体案例中实现它们。我制作了一个jQuery文件，其中包含每个具有特定类的div之后的图像。 jQuery本身很好，因为我可以使用段落标记更改图像标记，然后它会显示在我的浏览器中。这是我在functions.php中的内容

function wpa_scripts() {
wp_enqueue_script(
    'divider',
    get_template_directory_uri() . '/js/divider.js',
    array('jquery'),
    null,
    true
);
$script_data = array(
    'image_path' => get_template_directory_uri() . '/images/'
);
wp_localize_script(
    'divider',
    'divider_data',
    $script_data
); } add_action( 'wp_enqueue_scripts', 'wpa_scripts' );

这就是我在.js中所拥有的东西

jQuery(document).ready(function($){

$('.contentpage').after('<img src=" '$script_data' + divider_placeholder.png">');   });

我可以告诉我我做错了什么吗？提前谢谢。

亲切的问候，燕姿

Answer 1

您的变量$script_data在您的js文件中没有正确的语法，也无法访问您预定义的本地化变量divider_data：

而不是：
$('.contentpage').after('<img src=" '$script_data' + divider_placeholder.png">'); });

应该是：

$('.contentpage').after('<img src="' + divider_data.image_path + 'divider_placeholder.png">');   });

Answer 2

您需要在jQuery函数中使用'divider_data.image_path'而不是$script_data：

jQuery(document).ready(function($){

    $('.contentpage').after('<img src="' + divider_data.image_path + 'divider_placeholder.png">');

});

参考：https://codex.wordpress.org/Function_Reference/wp_localize_script

用于插入图像的wp_localize_script

2 个答案: