wp_add_inline_script fără dependințe

Question

wp_add_inline_script fără dependințe

23 mar. 2018, 23:45:46

Vizualizări: 23.7K

Voturi: 29

Am un fragment de JavaScript pe care vreau să-l injectez în footer-ul paginii. Este un cod de tracking, să zicem similar cu Google Analytics. Nu are dependințe, este un fragment independent.

Pot face ceva de genul acesta

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

Pare puțin prostesc (dummy.js este un fișier gol), dar funcționează. Există vreo modalitate de a evita dependința?

jimlongo

393

javascript wp enqueue script

Toate răspunsurile la întrebare

Comentarii

Funcția wp_add_inline_script() fără dependență este încă luată în considerare pentru versiunea 4.9.9, dar nu înseamnă neapărat că va fi adăugată. Prin urmare, este indicat să așteptați confirmarea înainte de a utiliza această funcționalitate.

Marcio Duarte

2 sept. 2018 00:52:24

Funcționează începând cu WP 5.0.

Dave Romsey

23 ian. 2019 04:22:42

Cineva mi-a șters comentariul de aici (am confirmat răspunsul lui birgire că funcționează într-adevăr în WP 5.0+), iar o lună mai târziu am avut nevoie din nou de acest cod, am căutat pe Google, am găsit acest răspuns, am dat o privire rapidă, nu am găsit comentariul meu și am trecut la alte rezultate. După o oră, m-am întors aici, realizând că acesta era răspunsul pe care îl căutam! Către moderator: vă rog să NU ștergeți comentariile mele utile, ele îmi servesc și mie ca referințe și mementouri viitoare, nu doar altora. Mulțumesc.

dev101

20 feb. 2019 21:10:34

Din păcate, trebuie să rămân la Versiunea 4.9.x.

Lucas Vendramini

3 dec. 2019 20:06:10

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

`wp_add_inline_style()` - fără dependență

Funcția wp_add_inline_style() poate fi utilizată fără o dependență de fișier sursă.

Iată un exemplu de la @Flix:

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

unde am putea înregistra acest cod prin acțiunea wp_enqueue_scripts.

`wp_add_inline_script()` - fără dependență

Conform ticket-ului #43565, o funcționalitate similară va fi suportată pentru wp_add_inline_script() în versiunea ~~4.9.9~~ 5.0 (mulțumită lui @MarcioDuarte, @dev101 și @DaveRomsey pentru verificările din comentarii):

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

care va afișa următorul cod în header, adică între tag-urile <head>...</head>:

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

Pentru a-l afișa în footer:

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

Valoarea implicită a argumentului $position în wp_add_inline_script() este 'after'. Valoarea 'before' o va afișa deasupra poziției 'after'.

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

Actualizare: WordPress a adăugat suport pentru adăugarea de scripturi și stiluri inline fără o dependență în versiunea 5.0. Consultați răspunsul lui @birgire pentru implementări.

Când utilizați wp_add_inline_script(), WP_Scripts::print_inline_script() va fi folosit în final pentru a afișa scripturile inline. Prin design, print_inline_script() necesită o dependență validă, $handle.

Deoarece în acest caz nu există o dependență, wp_add_inline_script() nu este instrumentul potrivit pentru această sarcină. În loc să creați un fișier de dependență fals (și o cerere HTTP suplimentară nedorită), folosiți wp_head sau wp_footer pentru a afișa scriptul inline:

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

  // aWholeBunchOfJavascriptCode

  echo '</script>' . PHP_EOL;
}

În general, JavaScript-ul ar trebui adăugat într-un fișier .js și încărcat folosind wp_enqueue_script() pe hook-ul wp_enqueue_scripts. Datele pot fi puse la dispoziția scriptului folosind wp_localize_script(). Uneori poate fi totuși necesar să adăugați un script inline.

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

O metodă de a face acest lucru este să creezi o funcție care afișează scriptul tău în interiorul unui tag <script> și să o conectezi la acțiunea wp_print_footer_scripts. Ar trebui să ai grijă să escopezi orice element pe care nu-l controlezi în mod strict, dar în rest, aceasta este o metodă sigură și ușoară.

De exemplu:

add_action( 'wp_print_footer_scripts', function () { 
    ?>
    <script>
        (function myFunction() { 
            /* codul tău aici */
        })();
    </script>
<?php 
} );

Morgan Estes

1.56K

13 apr. 2018 07:03:03

wp_add_inline_script fără dependințe

wp_add_inline_style() - fără dependență

wp_add_inline_script() - fără dependență

`wp_add_inline_style()` - fără dependență

`wp_add_inline_script()` - fără dependență