wp_add_inline_script senza dipendenza

Question

wp_add_inline_script senza dipendenza

23 mar 2018, 23:45:46

Visualizzazioni: 23.7K

Voti: 29

Ho uno snippet JavaScript che voglio iniettare nel footer della pagina. È un codice di tracking, simile a Google Analytics. Non ha dipendenze, è uno snippet autonomo.

Posso fare qualcosa del genere

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

Sembra un po' stupido (dummy.js è un file vuoto), ma funziona. C'è un modo per evitare la dipendenza?

jimlongo

393

javascript wp enqueue script

Tutte le risposte alla domanda

Commenti

La funzione wp_add_inline_script() senza dipendenze è ancora in valutazione per la versione 4.9.9, ma ciò non significa necessariamente che verrà aggiunta. Quindi è saggio aspettare una conferma prima di utilizzare questa funzionalità.

Marcio Duarte

2 set 2018 00:52:24

Possiamo procedere a partire da WP 5.0.

Dave Romsey

23 gen 2019 04:22:42

Qualcuno ha cancellato il mio commento da qui (avevo confermato la risposta di birgire sul fatto che funziona effettivamente in WP 5.0+), e un mese dopo mi è servito nuovamente questo codice. Ho cercato su Google, trovato questa risposta, dato un'occhiata veloce, non ho visto il mio commento e sono passato ad altri risultati. Dopo un'ora, sono tornato qui, rendendomi conto che era proprio la risposta che cercavo! Al moderatore: per favore NON cancellate i miei commenti utili, servono a ME come riferimento futuro e promemoria, non solo agli altri. Grazie.

dev101

20 feb 2019 21:10:34

Sfortunatamente devo rimanere alla versione 4.9.x.

Lucas Vendramini

3 dic 2019 20:06:10

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

`wp_add_inline_style()` - senza dipendenze

La funzione wp_add_inline_style() può essere utilizzata senza una dipendenza da un file sorgente.

Ecco un esempio da @Flix:

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

dove andremmo ad agganciare questo codice all'azione wp_enqueue_scripts.

`wp_add_inline_script()` - senza dipendenze

Secondo il ticket #43565, un supporto simile sarà disponibile per wp_add_inline_script() nella versione ~~4.9.9~~ 5.0 (grazie a @MarcioDuarte, @dev101 e @DaveRomsey per la verifica nei commenti):

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

che mostrerà quanto segue nell'header, cioè tra i tag <head>...</head>:

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

Per mostrarlo nel footer:

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

Il valore predefinito dell'argomento $position in wp_add_inline_script() è 'after'. Il valore 'before' lo stampa sopra 'after'.

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

Aggiornamento: WordPress ha aggiunto il supporto per l'inserimento di script e stili inline senza dipendenze nella versione 5.0. Vedi la risposta di @birgire per le implementazioni.

Quando si utilizza wp_add_inline_script(), alla fine verrà usato WP_Scripts::print_inline_script() per l'output degli script inline. Per design, print_inline_script() richiede una dipendenza valida, $handle.

Dato che in questo caso non c'è alcuna dipendenza, wp_add_inline_script() non è lo strumento adatto. Invece di creare un file di dipendenza fittizio (con una richiesta HTTP aggiuntiva indesiderata), è meglio usare wp_head o wp_footer per l'output dello script inline:

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

  // aWholeBunchOfJavascriptCode

  echo '</script>' . PHP_EOL;
}

In generale, il JavaScript dovrebbe essere aggiunto in un file .js e accodato usando wp_enqueue_script() tramite l'hook wp_enqueue_scripts. I dati possono essere resi disponibili allo script usando wp_localize_script(). A volte però può comunque essere necessario aggiungere uno script inline.

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

Un modo per farlo è creare una funzione che visualizzi il tuo script all'interno di un tag <script> e collegarla all'azione wp_print_footer_scripts. Dovresti prestare attenzione a eseguire l'escape di qualsiasi cosa che non controlli strettamente, ma questo è un metodo generalmente sicuro e semplice.

Ad esempio:

add_action( 'wp_print_footer_scripts', function () { 
    ?>
    <script>
        (function myFunction() { 
            /* il tuo codice qui */
        })();
    </script>
<?php 
} );

Morgan Estes

1.56K

13 apr 2018 07:03:03

wp_add_inline_script senza dipendenza

wp_add_inline_style() - senza dipendenze

wp_add_inline_script() - senza dipendenze

`wp_add_inline_style()` - senza dipendenze

`wp_add_inline_script()` - senza dipendenze