wp_add_inline_script без залежності

11

У мене є фрагмент javascript, який я хочу вставити у колонтитул сторінки. Скажімо, це код відстеження, скажімо, подібний до аналітики Google. Він не має залежностей, це окремий фрагмент.

Я можу зробити щось подібне

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()є 'after'. 'before'Значення виводить його вище 'after'.

— birgire
джерело

Незалежність wp_add_inline_script()досі вважається 4.9.9, це не обов'язково означає, що вона буде додана. Тому розумно чекати підтвердження, перш ніж використовувати цю функцію.

— Марсіо Дуарте

1

Ми готові перейти на WP 5.0 .

— Дейв Ромсі

Хтось видалив звідси мій коментар (я підтвердив, що Birgire відповів, що він насправді працює у 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 
} );

— Морган Естес
джерело

wp_add_inline_script без залежності

wp_add_inline_style() - без залежності

wp_add_inline_script() - без залежності

`wp_add_inline_style()` - без залежності

`wp_add_inline_script()` - без залежності