Лучший способ добавления встроенных (inline) скриптов в WordPress

Если вы являетесь WordPress-разработчиком, вы, возможно, уже использовали ранее хук wp_print_scripts для добавления необходимого встроенного JavaScript-кода. В качестве альтернативы вы могли использовать wp_localize_script() для добавления встроенных скриптов. Однако знали ли вы, что не так давно в WordPress появилась новая функция для добавления встроенного JavaScript-кода? Начиная с WordPress 4.5+, вы можете использовать функцию wp_add_inline_script().

Приятная особенность этой новой функции заключается в том, что вы можете связать ее с любым зарегистрированным скриптом и включить не только JavaScript-переменные. В этой статье мы расскажем, как работает wp_add_inline_script(), почему он лучше, чем любой другой метод встраивания, и как поддерживать старые версии (до 4.5) WordPress. Попутно мы приведем пример кода, который вы можете настроить и использовать в своих собственных проектах WordPress.

Встраивание скриптов через wp_print_scripts

В прошлом одним из способов добавления встроенных скриптов во фронтэнд было использование хука wp_print_scripts (и/или admin_print_scripts для области администратора). Вот пример функции:

// inline script via wp_print_scripts
function shapeSpace_print_scripts() { 
    
    ?>
    
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%09%09var%20var1%20%3D%20%3C%3Fphp%20echo%20json_encode('var1')%3B%20%3F%3E%3B%0A%09%09var%20var2%20%3D%20%3C%3Fphp%20echo%20json_encode('var2')%3B%20%3F%3E%3B%0A%09%09var%20var3%20%3D%20%3C%3Fphp%20echo%20json_encode('var3')%3B%20%3F%3E%3B%0A%09%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
    
    <?php
    
}
add_action('wp_print_scripts', 'shapeSpace_print_scripts');

Эта функция задает три переменные на основе опций плагина, а затем выводит их в области head (во фронтэнде) с помощью хука wp_print_scripts. Чтобы добавить скрипт в область администратора, необходимо заменить wp_print_scripts на admin_print_scripts и вызвать его.

Плюсы

Позволяет добавлять любые скрипты в секцию head ваших страниц. Нет ограничений на добавляемый код; вы можете добавлять JS-переменные, условия, методы, функции и все остальное.

Минусы

Нет способа связать добавленный код с любым зарегистрированным скриптом. Вы можете управлять относительным расположением добавляемого кода через параметр $priority в функции add_action(). Однако выводимый код в основном зависит от других факторов, потому нет никакого реального, последовательного способа управления расположением вывода.

Встраивание скриптов через wp_localize_script()

Еще один распространенный метод для встраивания произвольного JavaScript-кода – функция wp_localize_script(). Эта функция предназначена для локализации переменных JavaScript с целью использования в языковых переводах. Однако многие разработчики применяют ее для добавления встроенных скриптов. Вот пример:

// inline scripts via wp_localize_script()
function shapeSpace_enqueue_scripts() {
    
    wp_enqueue_script('shapeSpace_script', get_template_directory_uri() .'/js/script.js', array(), '1.0', true);
    
    $array = array(
        'var1' => __('Value for Variable 1', 'shapeSpace'),
        'var2' => __('Value for Variable 2', 'shapeSpace'),
        'var3' => __('Value for Variable 3', 'shapeSpace'),
    );
    
    wp_localize_script('shapeSpace_script', 'shapeSpace', $array);
    
}
add_action('wp_enqueue_scripts', 'shapeSpace_enqueue_scripts');

Здесь функция подключает наш JavaScript-файл и задает handle/ID для shapeSpace_script. Затем определяется ассоциативный массив, содержащий наши переменные. И, наконец, переменные передаются в wp_localize_script() для встраивания вместе с зарегистрированным скриптом shapeSpace_script. В итоге мы можем использовать любую из добавленных JS-переменных (shapeSpace.var1 и т.д.).

Плюсы:

Метод хорош тем, что он разрешает (читай: требует) ассоциацию с существующим/зарегистрированным скриптом. Таким образом, он обеспечивает согласованный способ управления относительным расположением вывода нашего произвольного скрипта.

Минусы:

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

Идеальный вариант: встраивание скриптов через wp_add_inline_script()

Теперь, когда мы рассмотрели плюсы и минусы двух альтернативных техник встраивания скриптов, давайте коснемся лучшего способа, основанного на новой функции wp_add_inline_script(). На практике эта функция похожа на wp_localize_script(), но может гораздо больше. Вот пример:

// inline scripts via wp_add_inline_script()
function shapeSpace_enqueue_scripts() {
    
    wp_enqueue_script('shapeSpace_script', get_template_directory_uri() .'/js/script.js', array(), '1.0', true);
    
    $script  = 'var1 = '. json_encode('var1') .'; ';
    $script .= 'var2 = '. json_encode('var2') .'; ';
    $script .= 'var3 = '. json_encode('var3') .'; ';
    
    wp_add_inline_script('shapeSpace_script', $script, 'before');
    
}
add_action('wp_enqueue_scripts', 'shapeSpace_enqueue_scripts');

Мы можем делать следующее:

• Добавлять любой JavaScript-сниппет
• Ассоциироваться с любым зарегистрированным скриптом.

Мы имеем полный контроль над контентом скрипта и его относительным расположением. Также обратите внимание на третий параметр, $position. Он позволяет нам включать $script либо до (before), либо после (after) $handle, shapeSpace_script.

Плюсы:

Полный контроль над выполнением скриптов.

Минусы:

Нет.

Пример встроенного скрипта

Мы можем создать технику добавления встроенных скриптов, которая будет работать с любой версией WordPress. К примеру, я использую следующую методику с 3 функциями в своем плагине:

// enqueue scripts
function shapeSpace_enqueue_scripts() {
    
    wp_enqueue_script('shapeSpace_script', get_template_directory_uri() .'/js/script.js', array(), '1.0', true);
    
    shapeSpace_inline_script();
    
}
add_action('wp_enqueue_scripts', 'shapeSpace_enqueue_scripts');


// inline scripts WP >= 4.5
function shapeSpace_inline_script() {
    
    $wp_version = get_bloginfo('version');
    
    if (version_compare($wp_version, '4.5', '>=')) {
        
        $script  = 'var1 = '. json_encode('var1') .'; ';
        $script .= 'var2 = '. json_encode('var2') .'; ';
        $script .= 'var3 = '. json_encode('var3') .'; ';
        
        wp_add_inline_script('shapeSpace_script', $script, 'before');
        
    }
    
}


// inline scripts WP < 4.5
function shapeSpace_print_scripts() { 
    
    $wp_version = get_bloginfo('version');
    
    if (version_compare($wp_version, '4.5', '<')) { ?>
        
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%09%09%09var%20var1%20%3D%20%3C%3Fphp%20echo%20json_encode('var1')%3B%20%3F%3E%3B%0A%09%09%09var%20var2%20%3D%20%3C%3Fphp%20echo%20json_encode('var2')%3B%20%3F%3E%3B%0A%09%09%09var%20var3%20%3D%20%3C%3Fphp%20echo%20json_encode('var3')%3B%20%3F%3E%3B%0A%09%09%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
        
        <?php
        
    }
    
}
add_action('wp_print_scripts', 'shapeSpace_print_scripts');

В итоге мы имеем три простых функции. Сначала мы подключаем наш JavaScript-файл. Затем мы вызываем нашу вторую функцию, которая добавляет наш встроенный скрипт с помощью wp_add_inline_script() для WordPress 4.5 и выше. Наконец, третья и последняя функция – fallback для старых версий WP. Если версия WP ниже 4.5, то в таком случае будет использоваться добавление встроенных скриптов через wp_print_scripts. Эта функция прекрасно работает вплоть до версии 2.1.

Источник: https://digwp.com