Добавьте хук действия в wp_localize_script

На чтение 4 мин Опубликовано 06.10.2024

Содержание

Вопрос или проблема
Ответ или решение
Объяснение:

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

Возможно ли добавить хук действия через wp_localize_script, чтобы я мог разместить его в нужном месте в HTML-коде, который создаётся на JavaScript?

Что-то вроде:

$data = array (
    'ng_slicknav' => array(
        'ng_slicksearch'           => home_url( "https://wordpress.stackexchange.com/" ),
        'ng_slicknav_closedsymbol' => esc_html( $options['ng_slicknav_closedsymbol'] ),
        'ng_slicknav_hook'         => do_action( 'myplugin_after_hook' ),
    ),
);
// Добавить фильтр
$data = apply_filters( 'ng_slicknav_slickNavVars', $data );

// Передать переменные PHP в скрипт jQuery
wp_localize_script( 'slicknav-init', 'slickNavVars', $data );

wp_enqueue_script( 'slicknav-init' );

Переменная, которую я пытаюсь добавить, — это ng_slicknav_hook, но всё, что я подключаю к ней, оказывается вне HTML-разметки в JavaScript; она не уважает позицию, в которой я её разместил.

Всё работает, как ожидается. Проблема в том, что ваш хук генерирует контент на странице, и вы хотите передать этот вывод в переменную JavaScript, включённую в вывод JS. Вам нужно захватить вывод хуков в переменную, а затем добавить её в $data.

// буферизовать вывод
ob_start();

   // выполнить хук
   do_action('myplugin_after_hook');

// получить буфер вывода в переменную
$ng_slicknav_hook = ob_get_clean();

// добавить в данные
$data = array(

    'ng_slicknav' => array(
        'ng_slicksearch'           => home_url("https://wordpress.stackexchange.com/"),
        'ng_slicknav_closedsymbol' => esc_html($options[ 'ng_slicknav_closedsymbol' ]),
        'ng_slicknav_hook'         => $ng_slicknav_hook,
    ),

);

Скорее всего, это нужно будет экранировать, но я оставлю это на ваше усмотрение в зависимости от контента, который вы создаёте.

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

Для того чтобы добавить хук действия в wp_localize_script, и позиционировать его в HTML разметке, создаваемой в JavaScript, необходимо использовать буферизацию вывода PHP. Вы не можете просто добавлять результаты действия с помощью do_action, так как это не возвращает никакого значения. Вместо этого необходимо захватить вывод хука в переменную, прежде чем передать её в JavaScript.

Вот пример, как это можно реализовать:

// Начинаем буферизацию вывода
ob_start();

// Выполняем хук
do_action('myplugin_after_hook');

// Получаем содержимое буфера в переменную
$ng_slicknav_hook = ob_get_clean();

// Создаем массив данных
$data = array(
    'ng_slicknav' => array(
        'ng_slicksearch' => home_url("https://wordpress.stackexchange.com/"),
        'ng_slicknav_closedsymbol' => esc_html($options['ng_slicknav_closedsymbol']),
        'ng_slicknav_hook' => $ng_slicknav_hook, // Добавляем захваченный хук
    ),
);

// Добавляем фильтр для возможности изменения данных
$data = apply_filters('ng_slicknav_slickNavVars', $data);

// Передаем PHP переменные в скрипт JavaScript
wp_localize_script('slicknav-init', 'slickNavVars', $data);

// Подключаем скрипт
wp_enqueue_script('slicknav-init');

Объяснение:

Буферизация вывода: Используя ob_start(), вы начинаете буферизацию, и все последующие выводы будут отправлены в буфер, а не на экран. После вызова do_action('myplugin_after_hook'), вывод этого действия будет сохранён в буфере.
Получение данных из буфера: С помощью ob_get_clean() вы получаете содержимое буфера в переменную $ng_slicknav_hook и очищаете буфер. Таким образом, вывод не появляется в HTML до того момента, когда вы его используете.
Добавление данных к массиву: Затем вы добавляете захваченный вывод в ваш массив данных $data, который будет передан в JavaScript.
Фильтры и локализация скрипта: Применяем фильтр ng_slicknav_slickNavVars для возможности дальнейшей модификации массива данных в других местах вашего приложения. После чего используем wp_localize_script для передачи данных в ваш JavaScript.

Такой подход позволит вам корректно добавить вывод хука в нужное место в вашей JS-разметке. Не забудьте, что перед передачей данных в JavaScript стоит учесть их экранирование, если они могут содержать небезопасный контент.