Динамический путь изображения в файле javascript

Содержание

Вопрос или проблема
Ответ или решение
Проблема
Решение
Шаг 1: Использование wp_localize_script()
Шаг 2: Исполнение JavaScript
Обратите внимание
Заключение

Вопрос или проблема

Мне нужно динамически установить путь к изображению в файл темы внутри файла JavaScript. Как это можно сделать?

address.forEach(function(address){
   var markerGeoCoder;

   markerImage = {url: window.mr_variant == undefined ? 'img/mapmarker.png' : '../img/mapmarker.png', size: new google.maps.Size(50,50), scaledSize: new google.maps.Size(50,50)};
   if(/(\-?\d+(\.\d+)?),\s*(\-?\d+(\.\d+)?)/.test(address) ){
       var latlong = address.split(','),
       marker = new google.maps.Marker({
           position: { lat: 1*latlong[0], lng: 1*latlong[1] },
           map: map,
           icon: markerImage,
           title: markerTitle,
           optimised: false
       });
   }

Я уже пробовал это:

address.forEach(function(address){
    var markerGeoCoder;

    markerImage = {url: window.mr_variant == undefined ? '<?php the_field('img/mapmarker.png'); ?>' : '../img/mapmarker.png', size: new google.maps.Size(50,50), scaledSize: new google.maps.Size(50,50)};
    if(/(\-?\d+(\.\d+)?),\s*(\-?\d+(\.\d+)?)/.test(address) ){
        var latlong = address.split(','),
        marker = new google.maps.Marker({
            position: { lat: 1*latlong[0], lng: 1*latlong[1] },
            map: map,
            icon: markerImage,
            title: markerTitle,
            optimised: false
        });
    }

Но это не работает.

Если вы работаете в JS, вы не можете использовать PHP (<?php ?>), необходимо другой способ чтобы получить PHP переменную в JS. Обычный способ с WordPress – использовать wp_localize_script().

wp_localize_script( 'wpse_274344', 'myScriptObject', array(
    'markerImageUrl' => get_theme_file_uri( '/img/mapmarker.png' ),
) );

Добавьте этот код после вашего вызова wp_enqueue_script() или wp_register_script(). Замените wpse_274344 на имя, которое вы использовали при подключении скрипта.

Это означает, что WordPress выведет объект JavaScript с именем myScriptObject на страницу, который содержит значения, которые вы передали в wp_localize_script().

Затем в вашем файле скрипта вы можете получить доступ к markerImageUrl следующим образом:

markerImage = {
    url: window.myScriptObject.markerImageUrl
}

Ответ или решение

Чтобы динамически определить путь к изображению в вашем JavaScript-файле в рамках темы WordPress, необходимо правильно интегрировать PHP и JavaScript. Рассмотрим шаги, как это сделать:

Проблема

Вы хотите динамически задавать путь к изображению внутри JavaScript-файла, что не может быть выполнено напрямую с помощью PHP, поскольку PHP выполняется на сервере до загрузки страницы, а JavaScript – на клиенте после загрузки страницы. В вашем текущем коде вы пытались использовать PHP внутри JavaScript, что не является рабочим решением.

Решение

Наилучший способ решить эту проблему в WordPress – использование функции wp_localize_script(), что позволяет передавать данные из PHP в JavaScript. Рассмотрим, как это сделать.

Шаг 1: Использование `wp_localize_script()`

Регистрация и подключение скриптов
Убедитесь, что ваш JavaScript-файл зарегистрирован и подключен с помощью wp_enqueue_script() или wp_register_script(). Например:
```
function my_enqueue_scripts() {
   wp_enqueue_script('my-custom-script', get_template_directory_uri() . '/js/my-script.js', array('jquery'), null, true);

   wp_localize_script('my-custom-script', 'myScriptObject', array(
       'markerImageUrl' => get_theme_file_uri('/img/mapmarker.png'),
   ));
}
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');
```
В этом коде 'my-custom-script' – это идентификатор, который следует заменить на имя вашего скрипта.
Локализация данных
Функция wp_localize_script() добавляет объект JavaScript на страницу, содержащий данные, которыми можно пользоваться в скриптах.
- 'myScriptObject' – имя JavaScript-объекта, который будет доступен на стороне клиента.
- markerImageUrl – свойство этого объекта, содержащее URL изображения, полученное с помощью get_theme_file_uri().

Шаг 2: Исполнение JavaScript

В вашем JavaScript, используйте объект, созданный wp_localize_script():

address.forEach(function(address) {
    var markerGeoCoder;

    var markerImage = {
        url: window.myScriptObject.markerImageUrl,
        size: new google.maps.Size(50, 50),
        scaledSize: new google.maps.Size(50, 50)
    };

    if(/(\-?\d+(\.\d+)?),\s*(\-?\d+(\.\d+)?)/.test(address)) {
        var latlong = address.split(','),
        marker = new google.maps.Marker({
            position: { lat: parseFloat(latlong[0]), lng: parseFloat(latlong[1]) },
            map: map,
            icon: markerImage,
            title: markerTitle,
            optimized: false
        });
    }
});

Обратите внимание

Проверяйте, что window.myScriptObject действительно определён на странице перед его использованием.
Убедитесь, что ваш JavaScript-файл загружается после jQuery, если используется jQuery как зависимость.

Заключение

Этот метод позволяет надежно интегрировать переменные PHP в JavaScript-код в рамках WordPress. Использование wp_localize_script() не только удобное, но и безопасное решение для передачи данных между серверной и клиентской частями вашего веб-приложения.