用于插入图像的wp_localize_script - wp_localize_script for inserting an image

wp_localize_script for inserting an image

我在使用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">');   });

有人能告诉我我做错了什么吗？提前谢谢。

谨致问候，Stef

您需要在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

您的变量$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">');   });