wp_enqueue_script per script inline a causa delle dipendenze

4 ago 2011, 00:11:23
Visualizzazioni: 37.7K
Voti: 40

Esiste un modo per utilizzare wp_enqueue_script() per gli script inline?

Sto cercando di fare questo perché il mio script inline dipende da un altro script e vorrei avere la flessibilità di inserirlo dopo che questo è stato caricato.

Inoltre, è uno script inline perché sto passando variabili PHP nel javascript (come il percorso del tema, ecc.)

Grazie in anticipo.

0
Tutte le risposte alla domanda 6
2
36

Bene, hai wp_localize_script(), ma è solo per passare dati.

Altrimenti, puoi fare così:

function print_my_inline_script() {
  if ( wp_script_is( 'some-script-handle', 'done' ) ) {
?>
<script type="text/javascript">
// il codice js va qui
</script>
<?php
  }
}
add_action( 'wp_footer', 'print_my_inline_script' );

L'idea è che non dovresti fare affidamento sul fatto che il tuo script inline venga stampato esattamente dopo lo script da cui dipende, ma più avanti.

4 ago 2011 01:18:38
Commenti

Sicuramente questo funziona solo se lo script da cui dipendi è già stato generato? Se lo script da cui dipendi è anche registrato in wp_footer, e viene eseguito dopo il codice dello script inline, semplicemente lo script inline non verrà scritto nel client, e quindi non verrà eseguito?

Sam Peacey Sam Peacey
31 mag 2014 07:19:32

A partire da WordPress 4.5 puoi usare wp_add_inline_script() wp_add_inline_script con jQuery di WordPress

Dhinju Divakaran Dhinju Divakaran
25 giu 2016 09:41:03
0

Basta non renderlo uno script inline e poi passare i parametri dinamici come variabili. Otto ha scritto una guida eccellente su come farlo in modo efficace.

WordPress 3.3 renderà anche questo più potente: https://core.trac.wordpress.org/ticket/11520

4 ago 2011 02:02:08
0

Questa soluzione è simile alla risposta di @scribu, ma segue la forma di wp_enquque_script() e posizionerà lo script nell'header se le sue dipendenze sono incluse nell'header.

/**
 * Aggiunge uno script JavaScript inline. @see wp_enqueue_script().
 * 
 * BUG CONOSCIUTO: Gli script inline non possono essere accodati prima 
 *  di qualsiasi script inline da cui dipendono (a meno che non siano
 *  posizionati nell'header e i dipendenti nel footer).
 * 
 * @param string      $handle    Nome identificativo dello script
 * @param string      $src       Il codice JavaScript
 * @param array       $deps      (opzionale) Array di nomi di script da cui questo script dipende
 * @param bool        $in_footer (opzionale) Se accodare lo script prima di </head> o prima di </body>
 * 
 * @return null
 */
function enqueue_inline_script( $handle, $js, $deps = array(), $in_footer = false ){
    // Callback per la stampa dello script inline.
    $cb = function()use( $handle, $js ){
        // Assicura che lo script sia incluso solo una volta.
        if( wp_script_is( $handle, 'done' ) )
            return;
        // Stampa lo script e lo segna come incluso.
        echo "<script type=\"text/javascript\" id=\"js-$handle\">\n$js\n</script>\n";
        global $wp_scripts;
        $wp_scripts->done[] = $handle;
    };
    // (`wp_print_scripts` è chiamato in header e footer, ma $cb ha protezione contro reinclusioni.)
    $hook = $in_footer ? 'wp_print_footer_scripts' : 'wp_print_scripts';

    // Se non ci sono dipendenze, collega semplicemente all'header o al footer.
    if( empty($deps)){
        add_action( $hook, $cb );
        return;
    }

    // Ritarda la stampa dello script finché tutte le dipendenze non sono state incluse.
    $cb_maybe = function()use( $deps, $in_footer, $cb, &$cb_maybe ){
        foreach( $deps as &$dep ){
            if( !wp_script_is( $dep, 'done' ) ){
                // Dipendenze non incluse nell'head, riprova nel footer.
                if( ! $in_footer ){
                    add_action( 'wp_print_footer_scripts', $cb_maybe, 11 );
                }
                else{
                    // Le dipendenze non sono state incluse in `wp_head` o `wp_footer`.
                }
                return;
            }
        }
        call_user_func( $cb );
    };
    add_action( $hook, $cb_maybe, 0 );
}

// Utilizzo
enqueue_inline_script('test','alert(\'test script inline accodato\');',array( 'jquery'));

Nota: questa funzione utilizza le funzioni anonime, ma per versioni di PHP precedenti alla 5.3 può essere facilmente convertita in una classe.

28 mar 2014 16:02:40
0

Da WordPress 4.5 puoi utilizzare wp_add_inline_script():

add_action( 'wp_enqueue_scripts', 'cyb_enqueue_scripts' );
function cyb_enqueue_scripts() {
   wp_enqueue_script( 'myscript', 'url/to/myscript.js', array(), '1.0' );
   wp_add_inline_script( 'myscript', 'Your inline javascript code gos here' );
}
15 mag 2016 18:18:08
0

Il metodo migliore che ho trovato è utilizzare wp_localize_script(), come suggerito da @scribu.

Di solito, ho optato per l'uso di JavaScript in linea perché avevo bisogno di passare alcune variabili PHP al mio script. Questo problema può essere risolto con wp_localize_script(). Ecco un esempio:

Supponiamo di avere un array $aFoo con alcune opzioni da passare a uno script.

$aFoo = array( 'option1' => $option1Value, 'option2' => $option2Value );

Utilizzando JavaScript in linea:

<script>
    var oFoo = {};
    oFoo.option1 = <?php echo $aFoo['option1'] ?>;
    oFoo.option2 = <?php echo $aFoo['option2'] ?>;
    //fai qualcosa con oFoo
</script>

Utilizzando wp_localize_script():

wp_register_script( 'script_name', 'pathToScript/script.js', array( 'jquery' )); //se jQuery non è necessario, rimuovi l'ultimo argomento
wp_localize_script( 'script_name', 'object_name', $aFoo ); //passa 'object_name' a script.js
wp_enqueue_script( 'script_name' );

Quindi, il file pathToScript/script.js conterrà:

var oFoo = {};
oFoo.option1 = object_name.option1;
oFoo.option2 = object_name.option2;
//fai qualcosa con oFoo (senza bisogno di PHP)

In questo modo non avrai più bisogno di utilizzare script in linea.

18 ago 2014 17:29:45
1

scribu ha assolutamente ragione. Comunque, voglio aggiungere alcune informazioni:

Voglio che la mia funzione outputti uno script una sola volta, indipendentemente da quante volte viene chiamata. È una funzione relativa al contenuto, quindi non posso aspettare alcun hook. Ho usato le informazioni di scribu e alcune letture del core di WP per creare questo:

function print_script_once() {
    if(!wp_script_is('my-handle', 'done')) {
        echo "<script>alert('once!');</script>";
        global $wp_scripts;
        $wp_scripts->done[] = 'my-handle';
    }
}
add_action('get_footer', print_script_once);

Utilizzando questo metodo sono in grado di stampare uno script inline una sola volta. Nel mio caso ho una funzione che crea un pulsante di condivisione e ha bisogno che uno script venga eseguito per tutti i pulsanti. Ma solo una volta.

29 gen 2014 14:29:13
Commenti

L'approccio dello script inline con echo è come è stato costruito il tema Twenty Seventeen, almeno in un certo periodo. E anche io uso questa tecnica. Funziona benissimo e permette di agganciarsi a diversi punti.

vhs vhs
1 giu 2017 04:05:58