wp_localize_script 用于插入图像

Posted 2023-05-09

【中文标题】wp_localize_script 用于插入图像

【英文标题】：wp_localize_script for inserting an image

【发布时间】：2016-09-09 15:36:02

【问题描述】：

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

谁能告诉我我做错了什么？提前致谢。

亲切的问候， 史蒂夫

【参考方案1】：

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

【讨论】：

谢谢！我对 Wordpress 很陌生，所以我的代码可能与我在互联网上找到的答案相去甚远。两个答案都是正确的:)

【参考方案2】：

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