wp_add_inline_script()
Додає додатковий JavaScript до зареєстрованого скрипту.
JS додається прямо в HTML документ, після основного (вказаного) скрипта. Можна вказати, щоб до скрипта.
Код скрипта вказується у параметрі $data. Якщо на один обробник (назва) додано кілька скриптів, то вони не будуть виведені в порядку їх додавання, в єдиному блоці <script> .
Використовувати функцію потрібно після того, як основний скрипт доданий у чергу на висновок, але ще не виведено на екран. Тобто. якщо скрипт доданий і вже виведений на екран використання, функція нічого не виведе.
Аналогічна функція для стилів: wp_add_inline_style()
wp_scripts()
wp_localize_jquery_ui_datepicker()
Хуків немає.
Повертає
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.0.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 );
}