JavaScript文件中的主题路径

我需要在javascript文件中包含主题文件的路径。我将如何处理？我已经尝试过：

var templateUrl = "<?php get_stylesheet_directory_uri(); ?>";

function LightboxOptions() {
  this.fileLoadingImage = "'"+templateUrl+"/img/loading.gif'";
  this.fileCloseImage = "'"+templateUrl+"/img/close.png'";
  this.resizeDuration = 700;
  this.fadeDuration = 500;
  this.labelImage = "Image";
  this.labelOf = "of";
}

这不会给我路径，而只是插入<?php get_stylesheet_directory_uri(); ?>而不是实际路径。有任何想法吗？提前致谢！

您正在寻找的是wp_localize_script函数。

放入脚本时，您可以像这样使用它

wp_register_script( 'my-script', 'myscript_url' );
wp_enqueue_script( 'my-script' );
$translation_array = array( 'templateUrl' => get_stylesheet_directory_uri() );
//after wp_enqueue_script
wp_localize_script( 'my-script', 'object_name', $translation_array );

在您的style.js中，将会有：

var templateUrl = object_name.templateUrl;
...

以下是在javascript文件中添加主题路径的以下两种方法。

1）您可以在functions.php文件中使用wordpress建议的wp_localize_script（）。这将在标头中创建一个Javascript对象，该Javascript对象将在运行时可供您的脚本使用。

范例：

wp_register_script('custom-js',get_stylesheet_directory_uri().'/js/custom.js',array(),NULL,true);
wp_enqueue_script('custom-js');

$wnm_custom = array( 'stylesheet_directory_uri' => get_stylesheet_directory_uri() );
wp_localize_script( 'custom-js', 'directory_uri', $wnm_custom );

并可以在您的js文件中使用，如下所示：

alert(directory_uri.stylesheet_directory_uri); 

2）您可以创建一个Javascript代码段，将模板目录uri保存在一个变量中，然后按以下方式使用它：将此代码添加到header.php文件中您要使用此路径的js文件之前。例：

<script type="text/javascript">
var stylesheet_directory_uri = "<?php echo get_stylesheet_directory_uri(); ?>";
</script>

并可以在您的js文件中使用，如下所示：

alert(stylesheet_directory_uri);

您可以本地化javascript文件，这使您有机会生成一个用PHP定义的值（例如本地化或目录）填充的javascript数组。

如果您通过以下方式加载JavaScript文件槽wp_enqueue_script或wp_register_script易于设置，则如下所示：

function localize_vars() {
    return array(
        'stylesheet_directory' => get_stylesheet_directory_uri()
    );
}

wp_enqueue_script( 'my_script', plugins_url( 'my_plugin/my_script.js' ), array( 'jquery' ) );
wp_localize_script( 'my_script', 'my_unique_name', localize_vars() );

在您的javascript文件中，您可以通过以下方式调用这些变量：

my_unique_name.stylesheet_directory

我开始使用这种方便的小方法来获取WordPress主题目录，并将其存储为全局JavaScript变量（全部来自javascript文件）：

function getThemeDir() {
    var scripts = document.getElementsByTagName('script'),
        index = scripts.length - 1,
        myScript = scripts[index];

    return myScript.src.replace(/themes\/(.*?)\/(.*)/g, 'themes/$1');
}
themeDir = getThemeDir();

仅在满足以下条件时才有效：

    1.此代码段是通过外部JavaScript文件执行的，如下所示：

<script src="/wp-content/themes/themename/assets/app.js"></script>

    2. js文件位于站点的主题目录（或子目录）中。

这就是我的方法。

将javascript文件和图像放在主题文件夹/资产中

并编辑以下文件。

在functions.php中

/* for javascript (only when using child theme) */
wp_enqueue_script('my-script', get_template_directory_uri() . '-child/assets/test.js');
wp_localize_script('my-script', 'myScript', array(
    'theme_directory' => get_template_directory_uri() 
));

在您的javascript文件中

var url = myScript.theme_directory + '-child/assets/';

如果从管理控制台加载了javascript文件，则可以使用此javascript函数获取WordPress安装的根目录。

function getHomeUrl() {
  var href = window.location.href;
  var index = href.indexOf('/wp-admin');
  var homeUrl = href.substring(0, index);
  return homeUrl;
}

然后，如下所示联系主题的路径。

var myThemePath = getHomeUrl() + '/wp-content/themes/myTheme';