Мне нужно включить путь к файлу моей темы в файле 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);
Я начал использовать этот удобный маленький метод, чтобы получить каталог темы 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, заполненный определенными 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
Если файл 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';