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(); ?>而不是实际路径。有任何想法吗？提前谢谢！

#1 楼

您要查找的是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;
...

太棒了像魅力一样运作！

–詹姆斯·霍尔（James Hall）
16-11-28在15:06

#2 楼

以下是在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保存在一个变量中，并在以后使用，如下所示：
将此代码添加到要使用此路径的js文件之前的header.php文件中。
示例：

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

alert(stylesheet_directory_uri);

wp_localize有效！我也尝试了第二种方法，但是我没有设法使它起作用。 wp_localize的作品可能是更好的做法，不是吗？

– Charlenemasters
13年3月7日在11:31

@charlenemasters使第二种方法按声明变量并对其进行访问的顺序非常重要。

– Vinod Dalvi
13年3月7日在11:33

第二种方法应该与回声，以便工作

– Claudiu Creanga
16-10-21在15:08

@ClaudiuCreanga谢谢，应该回显：var stylesheet_directory_uri =“ <？php echo get_stylesheet_directory_uri（）;？>”;

–cvr
18年6月12日在16:39

#3 楼

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

如果通过wp_enqueue_script或wp_register_script加载javascript文件，操作起来很简单设置如下：

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

#4 楼

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

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

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

这只会如果满足以下条件，则可以正常工作：

1.此代码段通过外部JavaScript文件执行-像这样：

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

2。该js文件位于您网站的主题目录（或子目录）中。

#5 楼

这就是我的方法。

将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/';

#6 楼

如果从管理控制台加载了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';

编程黑洞网