путь до темы в javascript файле

Существует два основных способа добавления пути к теме в 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-folder/assets

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

В functions.php

/* для javascript (только при использовании дочерней темы) */
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 файл загружается из админ-панели WordPress, вы можете использовать эту функцию для получения корневой директории вашей установки 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';