тема теми у файлі 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 у вашому файлі function.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 у папці з темами / ресурсами

І відредагуйте наступні файли.

У function.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';