wp_add_inline_script senza dipendenza


11

Ho uno snippet javascript che voglio iniettare nel piè di pagina. È un codice di monitoraggio, diciamo 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', 'aWholeBunchOfJavascriptCode' );
}
add_action( 'wp_enqueue_scripts', 'render_tracking_code' );

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

Risposte:


13

wp_add_inline_style() - senza dipendenza

La wp_add_inline_style()può essere utilizzato senza un file sorgente dipendenza.

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 vorremmo agganciarlo wp_enqueue_scriptsall'azione.

wp_add_inline_script() - senza dipendenza

Secondo il ticket # 43565 , simili saranno supportati wp_add_inline_script()nella versione (grazie a @MarcioDuarte, @ dev101 e @DaveRomsey per la verifica nei commenti):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" );' );

che visualizzerà quanto segue nell'intestazione , ovvero tra i <head>...</head>tag:

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

Per visualizzarlo nel piè di pagina :

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

L'impostazione predefinita $positiondell'argomento input in wp_add_inline_script()è 'after'. Il 'before'valore lo stampa sopra 'after'.


La wp_add_inline_script()senza dipendenza viene ancora considerata per 4.9.9, non significa necessariamente che verrà aggiunta. Quindi è consigliabile attendere la conferma prima di utilizzare questa funzione.
Marcio Duarte,

1
Siamo pronti per partire da WP 5.0 .
Dave Romsey,

Qualcuno ha cancellato il mio commento da qui (ho confermato che birgire ha risposto che funziona effettivamente in WP 5.0+), e un mese dopo ho effettivamente avuto di nuovo bisogno di questo codice, ho cercato su Google, ho trovato questa risposta, ho dato un'occhiata, non ho trovato il mio commento e mi sono trasferito su altri risultati. Subito dopo sono tornato qui, rendendomi conto che questa era la risposta che stavo cercando! Al moderatore: per favore NON cancellare i miei commenti utili, mi servono così come riferimenti e promemoria futuri, non solo per gli altri. Grazie.
dev101,

Sfortunatamente devo attenermi alla versione 4.9.x.
Lucas Vendramini,

5

Aggiornamento: WordPress ha aggiunto il supporto per l'aggiunta di script e stili incorporati senza una dipendenza in v5.0. Vedi la risposta di @ birgire per le implementazioni.

Durante l'utilizzo wp_add_inline_script(), WP_Scripts::print_inline_script()verrà utilizzato alla fine per generare script in linea. In base alla progettazione, print_inline_script()richiede una dipendenza valida, $handle.

Poiché in questo caso non esiste alcuna dipendenza, wp_add_inline_script()non è lo strumento giusto per il lavoro. Invece di creare un file di dipendenza falso (e una richiesta HTTP aggiuntiva indesiderata), utilizzare wp_heado wp_footerper generare lo 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, deve essere aggiunto il supporto JavaScript per un .jsfile e la accodato utilizzando wp_enqueue_script()il wp_enqueue_scriptsgancio. I dati possono essere resi disponibili per lo script utilizzando wp_localize_script(). A volte può essere comunque necessario aggiungere uno script in linea.


0

Un modo per farlo è creare una funzione che faccia eco allo script all'interno di un <script>tag e agganciarlo wp_print_footer_scriptsall'azione. Dovresti fare attenzione a sfuggire a tutto ciò che non controlli rigorosamente, ma questo è un metodo generalmente sicuro e facile altrimenti.

Per esempio:

add_action( 'wp_print_footer_scripts', function () { 
    ?>
    <script>
        (function myFunction() { 
            /* your code here */
        })();
    </script>
<?php 
} );
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.