URL-адрес пути WordPress в файле сценария js

35

Я добавил пользовательский script:

wp_enqueue_script('functions', get_bloginfo('template_url') . '/js/functions.js', 'search', null, false);

Он отлично работает, кроме functions.js у меня есть:

Reset.style.background = "url('../images/searchfield_clear.png') no-repeat top left";

Раньше это работало до тех пор, пока я не переменился на довольно постоянные ссылки и .htaccess

Иерархия папок похожа:

themename/js themename/images (изображения и папка js находятся в папке с именами)

Я пробовал.. /images -./image -/images

Обычно он должен возвращаться на 1 уровень, где находится файл js....

Я не хочу использовать полный путь.

Есть ли другой способ, который WordPress может распознать в файле javascript, чтобы иметь правильный путь?

В настоящее время я просто смущен тем, что делаю неправильно.

Теги:
wordpress-theming

4 ответа

50
Лучший ответ

Вы можете избежать жесткого кодирования полного пути, установив JS-переменную в заголовок вашего шаблона, до вызова wp_head(), удерживая URL-адрес шаблона. Как:

<script type="text/javascript">
var templateUrl = '<?= get_bloginfo("template_url"); ?>';
</script>

И используйте эту переменную для установки фона (я понимаю, что вы знаете, как это сделать, я включаю только эти данные, если они помогают другим):

Reset.style.background = " url('"+templateUrl+"/images/searchfield_clear.png') ";
Поделиться
  • 6
    Это решение прекрасно работает, но ответ Криса предпочтителен в большинстве ситуаций - я не знал о существовании wp_localize_script ().
  • 1
    Я нашел эту статью полезной. Помог мне реализовать wp_localize_script()
Показать ещё 3 комментария
84

Согласно документации Wordpress, вы должны использовать wp_localize_script() в файле functions.php. Это создаст объект Javascript в заголовке, который будет доступен для ваших скриптов во время выполнения.

См. Codex

Пример:

<?php wp_localize_script('mylib', 'WPURLS', array( 'siteurl' => get_option('siteurl') )); ?>

Чтобы получить доступ к этой переменной внутри Javascript, вы просто выполните:

<script type="text/javascript">
    var url = WPURLS.siteurl;
</script>
Поделиться
  • 1
    Было бы хорошо, если бы вы также показали, как получить переменную в JavaScript. Я знаю, это показывает, как в ссылке, но это будет сделать более полный ответ.
  • 2
    Добавлена реализация JS ...
Показать ещё 1 комментарий
19 
    wp_register_script('custom-js',WP_PLUGIN_URL.'/PLUGIN_NAME/js/custom.js',array(),NULL,true);
    wp_enqueue_script('custom-js');

    $wnm_custom = array( 'template_url' => get_bloginfo('template_url') );
    wp_localize_script( 'custom-js', 'wnm_custom', $wnm_custom );

и в custom.js

alert(wnm_custom.template_url);
Поделиться
  • 1
    это определенно лучший и самый простой способ! Спасибо!
  • 0
    это не работает, я использую дочернюю тему
Показать ещё 1 комментарий
2

Если файл javascript загружен из панели управления admin, эта функция javascript предоставит вам корень вашей установки WordPress. Я использую это много, когда создаю плагины, которые должны делать ajax-запросы с панели управления admin.

function getHomeUrl() {
  var href = window.location.href;
  var index = href.indexOf('/wp-admin');
  var homeUrl = href.substring(0, index);
  return homeUrl;
}
Поделиться
  • 0
    Могу ли я получить локализованную переменную в файле functions.php темы, установленную из файла плагина?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню