使用wp_LOCALIZE_SCRIPT将模板URL存储到一个变量中,以便在JS中使用

时间:2014-12-30 作者:Desi

我试图存储模板url(bloginfo(template_url);) 转换成一个变量,这样我就可以在JavaScript中使用它了。然而,我意识到这是不可能的,有人提醒我wp_localize_script 说它可以做我想做的事。我查阅了法典,但我仍然不确定如何实现这一点。

以下是我目前掌握的情况:

作用

function starter_scripts() {

    wp_enqueue_script( \'jquery\' );

    wp_localize_script( \'my_script\', \'templateUrl\', array(
        \'templateUrl\' => template_url()
        ) );
}
add_action( \'wp_enqueue_scripts\', \'starter_scripts\' );
JS公司

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

    // Fade in Contact background
    $(\'body.page-template-page-contact #content\').css(\'background\', \'url(templateUrl + bg-contact.jpg) 50% 0% no-repeat fixed\').fadeIn(2000);

});
我哪里出错了?

更新时间:

function starter_scripts() {
    wp_enqueue_style( \'starter-style\', get_stylesheet_uri() );

    wp_enqueue_script( \'jquery\' );

    wp_enqueue_script( \'includes\', get_template_directory_uri() . \'/js/min/includes.min.js\', \'\', \'\', true );

    wp_localize_script( \'includes\', \'site\', array(
        \'url\'         => site_url(\'/\'),
        \'theme_path\'  => get_template_directory_uri(),
        \'templateUrl\' => template_url()
        ) );
}
add_action( \'wp_enqueue_scripts\', \'starter_scripts\' );
JS公司

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

    // Fade in Contact background
    $(\'body.page-template-page-contact #content\').css(\'background\', \'url(site.templateUrl/img/bg-contact.jpg) 50% 0% no-repeat fixed\').fadeIn(2000);

});

1 个回复
最合适的回答,由SO网友:Mayeenul Islam 整理而成

您没有将自定义JavaScript文件排入队列。调用var(templateUrl) 在没有句柄的JS文件中。请遵循以下步骤:

我正在将自定义JavaScripts文件排入队列(script.js) 在jQuery的依赖关系下,它将从核心排队jQuery库。我用的是同一个把手my-custom-js 对于my script和localize\\u script,将变量传递到JavaScripts页面。

functions.php

<?php
function project_scripts() {
    wp_enqueue_script( "my-custom-js", get_template_directory_uri() . "/js/script.js", array("jquery"), "20141230", TRUE );
    wp_localize_script("my-custom-js",
                            "site",
                            array(
                                    "theme_path"    => get_template_directory_uri()
                                )
                        );
}
add_action( \'wp_enqueue_scripts\', \'project_scripts\' );

script.js

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

    console.log(site.theme_path);

});
Note 这个site localize\\u脚本和自定义JS文件中的句柄-它是我获取数据的关键。

结束