wp_add_inline_script()
Добавляет дополнительный javascript код к зарегистрированному скрипту.
JS добавляется прямо в html документ, после основного (указанного) скрипта. Можно указать чтобы до скрипта.
Код скрипта указывается в параметре $data
. Если на один обработчик (название) добавлено несколько скриптов, то ни будут выведены в порядке их добавления, в едином блоке <script>.
Использовать функцию нужно после того, как основной скрипт добавлен в очередь на вывод, но еще не был выведен на экран. Т.е. если скрипт добавлен и уже выведен на экран использование функция ничего не выведет.
Аналогичная функция для стилей: wp_add_inline_style()
Хуков нет.
Возвращает
true|false
. True если удалось добавить код скрипта, false в противном случае.
Использование
wp_add_inline_script( $handle, $data, $position );
- $handle(строка) (обязательный)
- Название (ID) скрипта к которому будут добавлен дополнительный блок скрипта.
- $data(строка) (обязательный)
- JS код в виде строки. Открывающий/закрывающий <script> добавляется автоматически.
- $position(строка)
- Куда добавить код: до (before) или после (after) указанного в
$handle
скрипта.
По умолчанию: 'after'
Примеры
#1 Демонстрация работы
Подключим JS код после файла JS:
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_typekit' ); function mytheme_enqueue_typekit(){ wp_enqueue_script( 'mytheme-typekit', 'https://use.typekit.net/.js', array(), '1.0' ); wp_add_inline_script( 'mytheme-typekit', 'try{ Typekit.load({ async: true }); }catch(e){} ' ); } /* Получим в HTML коде <script type="text/javascript" src="https://use.typekit.net/.js?ver=1.0"></script> <script type="text/javascript"> try{ Typekit.load({ async: true }); }catch(e){} </script> */
#2 Передача данных из PHP в JS
Допустим нам нужно указать ajax URL для нашего скрипта и какие-то еще дополнительные параметры. Это можно сделать так:
wp_enqueue_script( 'my-script', 'https://url-to/my-script.js' ); wp_add_inline_script( 'my-script', 'const MYSCRIPT = ' . json_encode( [ 'ajaxUrl' => admin_url( 'admin-ajax.php' ), 'param1' => 'some value', 'param2' => 'value 2', ] ), 'before' );
#3 Произвольный код JS перед файлом
Допустим у нас уже подключен файл скрипта my_scripts.js
с идентификатором my_scripts
. И нам нужно дополнить его произвольным кодом. К примеру для него нужно указать глобальные переменные: color1 и color2:
add_action( 'wp_enqueue_scripts', function(){ wp_enqueue_script( 'my_scripts', get_stylesheet_directory_uri() .'/my_scripts.js' ); // добавим произвольный код wp_add_inline_script( 'my_scripts', 'var color1 = "red"; var color2 = "blue";', 'before' ); } ); /* Получим в HTML коде <script type='text/javascript'> var color1 = "red"; var color2 = "blue"; </script> <script type='text/javascript' src='http://example.com/wp-content/themes/mytheme/my_scripts.js'></script> */
#4 Несколько вызовов wp_add_inline_script()
add_action('wp_enqueue_scripts', function(){ wp_enqueue_script('my_scripts', get_stylesheet_directory_uri() .'/my_scripts.js' ); // добавим произвольный код wp_add_inline_script( 'my_scripts', 'var color1 = "red"; var color2 = "blue";' ); wp_add_inline_script( 'my_scripts', 'var color3 = "#fff"; var color3 = "#000";' ); } ); /* Получим в HTML коде <script type='text/javascript' src='http://example.com/wp-content/themes/mytheme/my_scripts.js'></script> <script type='text/javascript'> var color1 = "red"; var color2 = "blue"; var color3 = "#fff"; var color3 = "#000"; </script> */
Заметки
- Смотрите: WP_Scripts::add_inline_script()
Список изменений
С версии 4.5.0 | Введена. |
Код wp_add_inline_script() wp add inline script WP 6.2.2
function wp_add_inline_script( $handle, $data, $position = 'after' ) { _wp_scripts_maybe_doing_it_wrong( __FUNCTION__, $handle ); if ( false !== stripos( $data, '</script>' ) ) { _doing_it_wrong( __FUNCTION__, sprintf( /* translators: 1: <script>, 2: wp_add_inline_script() */ __( 'Do not pass %1$s tags to %2$s.' ), '<code><script></code>', '<code>wp_add_inline_script()</code>' ), '4.5.0' ); $data = trim( preg_replace( '#<script[^>]*>(.*)</script>#is', '$1', $data ) ); } return wp_scripts()->add_inline_script( $handle, $data, $position ); }