wp_add_inline_script bez zależności

11

Mam fragment kodu javascript, który chcę wstrzyknąć w stopkę strony. To kod śledzenia, powiedzmy podobny do Google Analytics. Nie ma żadnych zależności, to samodzielny fragment kodu.

Mogę zrobić coś takiego

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' );

Wydaje się trochę głupi (dummy.js to pusty plik), ale działa. Czy istnieje sposób na pominięcie zależności?

javascript wp-enqueue-script jimlongo
źródło

Odpowiedzi:

13

wp_add_inline_style() - bez zależności

wp_add_inline_style()Może być używany bez uzależnienia pliku źródłowego.

Oto przykład z @Flix:

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

gdzie zaczepilibyśmy to w wp_enqueue_scriptsakcji.

wp_add_inline_script() - bez zależności

Zgodnie z biletem # 43565 , podobne będą obsługiwane wp_add_inline_script()w wersji (dzięki @MarcioDuarte, @ dev101 i @DaveRomsey za weryfikację w komentarzach):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" );' );

która wyświetli następujące informacje w nagłówku , tj. między <head>...</head>tagami:

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

Aby wyświetlić go w stopce :

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

Domyślny $positionargument wejściowy wp_add_inline_script()to 'after'. 'before'Wartość drukuje go powyżej 'after'.

birgire
źródło
Brak wp_add_inline_script()zależności jest nadal rozważany w wersji 4.9.9, niekoniecznie oznacza to, że zostanie dodany. Dlatego mądrze jest poczekać na potwierdzenie przed użyciem tej funkcji.
Marcio Duarte,
1
Jesteśmy gotowi, aby przejść od wersji WP 5.0 .
Dave Romsey
Ktoś usunął mój komentarz stąd (potwierdziłem odpowiedź birgire'a, że ​​faktycznie działa w WP 5.0+), a miesiąc później naprawdę potrzebowałem tego kodu ponownie, przejrzałem go, znalazłem tę odpowiedź, zmieściłem na pierwszy rzut oka, nie znalazłem mojego komentarza i przeniosłem się na inne wyniki. Po godzinie wróciłem tutaj, zdając sobie sprawę, że to jest odpowiedź, której szukałem! Do moderatora: NIE usuwaj moich użytecznych komentarzy, służą one MNIE, a także przyszłym referencjom i przypomnieniom, nie tylko innym osobom. Dziękuję Ci.
dev101
Niestety muszę trzymać się wersji 4.9.x.
Lucas Vendramini,
5

Aktualizacja: WordPress dodał obsługę dodawania wbudowanych skryptów i stylów bez zależności w wersji 5.0. Zobacz @ odpowiedź birgire za wdrożeń.

Podczas używania wp_add_inline_script(), WP_Scripts::print_inline_script()zostanie ostatecznie użyty do wyprowadzenia wbudowanych skryptów. Zgodnie z projektem, print_inline_script()wymaga prawidłowego zależność, $handle.

Ponieważ w tym przypadku wp_add_inline_script()nie ma zależności, nie jest odpowiednim narzędziem do pracy. Zamiast tworzyć fałszywy plik zależności (i niepożądane dodatkowe żądanie HTTP), użyj wp_headlub, wp_footeraby wypisać wbudowany skrypt:

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

  // aWholeBunchOfJavascriptCode

  echo '</script>' . PHP_EOL;
}

Generalnie JavaScript powinny zostać dodane do .jspliku i skolejkowany stosując wp_enqueue_script()na wp_enqueue_scriptshaku. Dane można udostępnić skryptowi za pomocą wp_localize_script(). Czasami jednak może być konieczne dodanie wbudowanego skryptu.

Dave Romsey
źródło
0

Jednym ze sposobów na to jest utworzenie funkcji, która wywoła echo skryptu wewnątrz <script>znacznika i podłączy go do wp_print_footer_scriptsakcji. Powinieneś zadbać o to, by uciec od wszystkiego, nad czym nie masz ścisłej kontroli, ale w przeciwnym razie jest to ogólnie bezpieczna i łatwa metoda.

Na przykład:

add_action( 'wp_print_footer_scripts', function () { 
    ?>
    <script>
        (function myFunction() { 
            /* your code here */
        })();
    </script>
<?php 
} );
Morgan Estes
źródło