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

11

У меня есть фрагмент 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 - пустой файл), но работает. Есть ли способ пропустить зависимость?

javascript wp-enqueue-script jimlongo
источник

Ответы:

13

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()в версии (спасибо @MarcioDuarte, @ dev101 и @DaveRomsey за проверку в комментариях):4.9.9 5.0

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()IS 'after'. 'before'Значение выводит его выше 'after'.

birgire
источник
wp_add_inline_script()Без зависимостей все еще рассматривается в 4.9.9, это не обязательно означает , что он будет добавлен. Поэтому целесообразно дождаться подтверждения, прежде чем использовать эту функцию.
Марсио Дуарте
1
Мы хорошо подошли к WP 5.0 .
Дэйв Ромси
Кто-то удалил мой комментарий отсюда (я подтвердил ответ Биргире, что он на самом деле работает в WP 5.0+), и через месяц мне снова понадобился этот код, он погуглил, нашел этот ответ, быстро взглянул, не нашел свой комментарий и переехал на другие результаты. Через час я вернулся сюда, понимая, что это был ответ, который я искал! Модератору: пожалуйста, НЕ удаляйте мои полезные комментарии, они служат МНЕ, а также будущие ссылки и напоминания, а не только для других. Спасибо.
dev101
К сожалению, я должен придерживаться версии 4.9.x.
Лукас Вендрамини
5

Обновление: WordPress добавил поддержку добавления встроенных скриптов и стилей без зависимости в v5.0. Смотрите ответ @ 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(). Иногда все же может потребоваться добавить встроенный скрипт.

Дейв Ромси
источник
0

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

Например:

add_action( 'wp_print_footer_scripts', function () { 
    ?>
    <script>
        (function myFunction() { 
            /* your code here */
        })();
    </script>
<?php 
} );
Морган Эстес
источник