wp_add_inline_script без зависимостей

Question

wp_add_inline_script без зависимостей

23 мар. 2018 г., 23:45:46

Просмотры: 23.7K

Голосов: 29

У меня есть фрагмент JavaScript, который я хочу внедрить в подвал страницы. Это код отслеживания, скажем, похожий на Google Analytics. У него нет зависимостей, это автономный фрагмент.

Я могу сделать что-то вроде этого

function render_tracking_code(){
    wp_enqueue_script( 'depends-js', 'https://rdiv.com/dummy.js', array(), '0.01', true );
    wp_add_inline_script( 'depends-js', 'aWholeBunchOfJavascriptCode' );
}
add_action( 'wp_enqueue_scripts', 'render_tracking_code' );

Выглядит немного глупо (dummy.js - это пустой файл), но работает. Есть ли способ обойти зависимость?

jimlongo

393

javascript wp enqueue script

Все ответы на вопрос

Комментарии

Функция wp_add_inline_script() без зависимостей все еще рассматривается для версии 4.9.9, но это не означает, что она точно будет добавлена. Поэтому разумно подождать подтверждения перед использованием этой функции.

Marcio Duarte

2 сент. 2018 г. 00:52:24

Функция готова к использованию начиная с WP 5.0.

Dave Romsey

23 янв. 2019 г. 04:22:42

Кто-то удалил мой комментарий отсюда (я подтверждал ответ birgire о том, что это действительно работает в WP 5.0+), и через месяц мне снова понадобился этот код. Я погуглил, нашел этот ответ, бегло просмотрел, не обнаружил своего комментария и перешел к другим результатам. Через час я вернулся сюда, осознав, что это именно тот ответ, который я искал! Модератору: пожалуйста, НЕ УДАЛЯЙТЕ мои полезные комментарии, они служат МНЕ в качестве будущих ссылок и напоминаний, а не только другим. Спасибо.

dev101

20 февр. 2019 г. 21:10:34

К сожалению, мне приходится оставаться на версии 4.9.x.

Lucas Vendramini

3 дек. 2019 г. 20:06:10

birgire 67.8K · Answer 1 · 2018-08-13T12:41:25Z

`wp_add_inline_style()` - без зависимостей

Функцию wp_add_inline_style() можно использовать без зависимости от исходного файла.

Вот пример от @Flix:

wp_register_style( 'dummy-handle', false );
wp_enqueue_style( 'dummy-handle' );
wp_add_inline_style( 'dummy-handle', '* { color: red; }' );

где мы подключим это через действие wp_enqueue_scripts.

`wp_add_inline_script()` - без зависимостей

Согласно тикету #43565, аналогичная функциональность будет поддерживаться для wp_add_inline_script() в версии ~~4.9.9~~ 5.0 (спасибо @MarcioDuarte, @dev101 и @DaveRomsey за проверку в комментариях):

wp_register_script( 'dummy-handle-header', '' );
wp_enqueue_script( 'dummy-handle-header' );
wp_add_inline_script( 'dummy-handle-header', 'console.log( "header" );' );

что выведет следующее в заголовке, т.е. между тегами <head>...</head>:

<script type='text/javascript'>
console.log( "header" );
</script>

Для вывода в подвале:

wp_register_script( 'dummy-handle-footer', '', [], '', true );
wp_enqueue_script( 'dummy-handle-footer'  );
wp_add_inline_script( 'dummy-handle-footer', 'console.log( "footer" );' );

По умолчанию входной аргумент $position в wp_add_inline_script() имеет значение 'after'. Значение 'before' выводит скрипт выше, чем 'after'.

Dave Romsey 17.9K · Answer 2 · 2018-03-24T00:37:08Z

Обновление: Начиная с версии 5.0, WordPress добавил поддержку добавления встроенных скриптов и стилей без зависимостей. Подробности реализации смотрите в ответе @birgire.

При использовании wp_add_inline_script(), в конечном итоге для вывода встроенных скриптов будет использоваться WP_Scripts::print_inline_script(). По замыслу разработчиков, print_inline_script() требует наличия корректной зависимости — $handle.

Поскольку в данном случае зависимость отсутствует, wp_add_inline_script() не подходит для решения задачи. Вместо создания фейковой зависимости (и нежелательного дополнительного HTTP-запроса) используйте хуки wp_head или wp_footer для вывода встроенного скрипта:

add_action( 'wp_head', 'wpse_add_inline_script' );
function wpse_add_inline_script() {
  echo '<script>' . PHP_EOL;

  // aWholeBunchOfJavascriptCode

  echo '</script>' . PHP_EOL;
}

Как правило, JavaScript-код следует добавлять в .js-файл и подключать с помощью wp_enqueue_script() на хуке wp_enqueue_scripts. Данные можно передать в скрипт с помощью wp_localize_script(). Однако в некоторых случаях может потребоваться добавить скрипт непосредственно в код страницы.

Morgan Estes 1.56K · Answer 3 · 2018-04-13T07:03:03Z

Один из способов сделать это — создать функцию, которая выводит ваш скрипт внутри тега <script>, и подключить её к действию wp_print_footer_scripts. Важно экранировать всё, что вы не контролируете строго, но в целом это безопасный и простой метод.

Например:

add_action( 'wp_print_footer_scripts', function () { 
    ?>
    <script>
        (function myFunction() { 
            /* ваш код здесь */
        })();
    </script>
<?php 
} );

Morgan Estes

1.56K

13 апр. 2018 г. 07:03:03

wp_add_inline_script без зависимостей

wp_add_inline_style() - без зависимостей

wp_add_inline_script() - без зависимостей

`wp_add_inline_style()` - без зависимостей

`wp_add_inline_script()` - без зависимостей