путь к теме в файле 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) Вы можете использовать wp_localize_script (), предложенный wordpress в вашем файле functions.php. Это создаст объект 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, которые дают вам возможность генерировать массив javascript, заполненный определенными значениями PHP (такими как локализация или каталоги).

Если вы загружаете свой корыто 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 и изображения в папку theme / assets

И отредактируйте следующие файлы.

В 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';