Forzare wp_enqueue_scripts nell'HEADER?

Question

Forzare wp_enqueue_scripts nell'HEADER?

25 mar 2014, 16:40:48

Visualizzazioni: 32.9K

Voti: 3

Un plugin su cui sto lavorando richiede che jQuery sia caricato prima che il contenuto venga elaborato. Alcuni temi predefiniti, come 2010, 2011 e 2012 (credo), inseriscono il JS nel footer.

Come posso forzare il caricamento degli script nell'header (informerò gli utenti del plugin che questo è un requisito necessario)?

Branndon

179

jquery intestazioni

Commenti

se hai bisogno che jQuery venga caricato nell'head, probabilmente stai facendo qualcosa di sbagliato.

Milo

25 mar 2014 17:00:44

Ad esempio, se volessi eseguire un semplice jQuery("body").css("background-color","red"); all'interno di uno shortcode nel body, non potrei farlo. Supponiamo che il mio shortcode sia [body color=red] ma jQuery non viene caricato fino al footer, allora il mio codice non funzionerà.

Branndon

25 mar 2014 17:14:51

Lo script che contiene quella riga può essere dichiarato come dipendente da jQuery, provaci, funzionerà. Potresti dover aspettare fino a quando il documento è pronto, ma dovresti farlo comunque per la maggior parte delle operazioni con jQuery.

Andrew Bartel

25 mar 2014 17:20:39

caricare uno script esterno e passare dati specifici dello shortcode tramite wp_localize_script, o emettere lo script inline nel footer.

Milo

25 mar 2014 17:21:05

Tutte le risposte alla domanda

Commenti

Forse il valore predefinito è nell'head, ma alcuni temi predefiniti lo inseriscono nel footer, e per i temi che cercano di inserirlo nel footer, vorrei l'opzione per sovrascrivere quella funzione e posizionarlo nell'head.

Branndon

25 mar 2014 17:13:34

Certo, ho capito chiaramente e correttamente. E la mia risposta è pensata per aiutarti con questo, perché se l'hai caricato nell'<head>...</head> hai fatto ciò che stai chiedendo. Comunque Milo ha ragione nel suo commento, non direi necessariamente che hai fatto qualcosa di sbagliato, ma puoi sicuramente cambiare il tuo approccio, il che porterebbe a non rendere necessario caricare jQuery nell'head - considera di farlo, perché è meglio, è la best practice. @Branndon

Nicolai Grossherr

25 mar 2014 17:20:17

Ma la tua risposta e la maggior parte delle risposte qui implicano che sto cercando di caricare un file di script, e non un pezzo di codice. Il codice è dinamico e cambia per ogni caricamento di pagina. Mi sto perdendo qualcosa? Posso usare wp_enqueue_script su un frammento di codice anziché su un file completo?

Branndon

25 mar 2014 17:24:32

Immagino tu stia lavorando con script inline, sarebbe comunque meglio non farlo. Inoltre, in genere puoi inserire qualsiasi codice di script inline in un file script. Dai un'occhiata al secondo commento di Milo per iniziare e prendi le parole chiave per usare la funzione di ricerca qui per scoprire di più sulle tue possibilità, sono state chieste e risposte più volte. Buona fortuna! @Branndon

Nicolai Grossherr

25 mar 2014 17:29:26

Grazie @ialocin, vedo che wp_localize_script è una buona strada da percorrere. Grazie per le risposte dettagliate!

Branndon

25 mar 2014 17:44:17

Il terzo parametro di wp_enqueue_script() ti permette di dichiarare le dipendenze per lo script che stai caricando, cioè quali altri script sono necessari per il suo funzionamento.

add_action( 'wp_enqueue_scripts', 'include_script_that_depends_on_jquery' );

function include_script_that_depends_on_jquery() {
    wp_enqueue_script( 'my_script.js', '/path/to/my_scripts.js', array( 'jquery' ) );
}

In questo modo, indipendentemente da dove un tema, plugin o altro carica jquery, il tuo script verrà sempre caricato dopo, assumendo che anche loro seguano le migliori pratiche e non lo deregistrino.

Andrew Bartel

1.84K

25 mar 2014 16:59:43

Commenti

Il punto è che ho bisogno di eseguire codice jQuery, non un file di script.

Branndon

25 mar 2014 17:12:48

Penso che sarebbe utile se modificassi la tua domanda con ciò che effettivamente devi fare. Potrebbe essere possibile non farlo inline.

Andrew Bartel

25 mar 2014 17:41:52

Ad esempio, se volessi eseguire un semplice jQuery("body").css("background-color","red"); dall'interno di uno shortcode nel corpo della pagina, non posso farlo. Supponiamo che il mio shortcode sia [body color=red] ma jQuery non viene caricato fino al footer, allora il mio codice non funzionerà.

Nel gestore dello shortcode potresti restituire un elemento segnaposto HTML o una variabile JavaScript, e poi agganciarti a wp_footer con un'altra funzione che "esegue" jQuery.

function wpse_139154_shortcode( $atts ) {
    // Codice fantastico

    wp_enqueue_script( 'jquery' ); // Verrà caricato nel footer se non è già presente nell'head
    add_action( 'wp_footer', 'wpse_139154_shortcode_script', 100 ); // Assicurati che venga eseguito dopo wp_print_footer_scripts

    return <<<html
<script>
    var arguments = arguments || {}; arguments.backgroundColor = "{$atts['color']}";
</script>
html;
}

function wpse_139154_shortcode_script() {
    echo <<<html
<script>jQuery( "body" ).css( arguments );</script>
html;
}

TheDeadMedic

36.6K

25 mar 2014 17:33:39

Secondo la documentazione ufficiale di WordPress per wp_enqueue_scripts

wp_enqueue_script( string $handle, string $src = false, array $deps = array(), string|bool|null $ver = false, bool $in_footer = false )

L'ultimo parametro determina dove lo script verrà caricato. Ci sono alcune insidie che possono modificare questo comportamento! Prova a trovare e commentare/rimuovere queste righe dal tuo file functions.php

remove_action('wp_head', 'wp_print_scripts');
remove_action('wp_head', 'wp_print_head_scripts', 9);
remove_action('wp_head', 'wp_enqueue_scripts', 1);
add_action('wp_footer', 'wp_print_scripts', 5);
add_action('wp_footer', 'wp_enqueue_scripts', 5);
add_action('wp_footer', 'wp_print_head_scripts', 5);

Lo scopo di queste sei azioni è spostare automaticamente il codice JavaScript nel footer della pagina, rendendo inutile l'ultimo parametro di wp_enqueue_scripts! Se queste azioni non possono essere rimosse, puoi modificare le loro priorità. Da 5 a 9999 per esempio. Sperimenta con le priorità per trovare quella giusta per te.

Devi anche verificare se ci sono dipendenze specificate nell'array $deps. Queste forzeranno lo script a caricarsi solo dopo la risoluzione delle dipendenze.

Non provare soluzioni approssimative, è una cattiva pratica

Buona programmazione

Rangel Nikolov

1

25 ago 2016 11:08:33

Prima, rimuovi dalla coda il jQuery caricato dal tema. Poi ricaricalo nuovamente.

function jquery_at_header() {
    // Rimuovi dalla coda il jQuery corrente
    wp_dequeue_script( 'jquery' );

    // Ricarica jQuery
    wp_enqueue_script( 'jquery' );

    // Poi il tuo script
    wp_enqueue_script( 'script-name', plugins_url( 'js/scrip-name.js' , __FILE__ ), array( 'jquery' ), '1.0' );
}
add_action( 'wp_enqueue_scripts', 'jquery_at_header', 5 );

Potresti aver bisogno di giocare con la priorità per ottenere ciò che ti serve.

Abhik

2.92K

25 mar 2014 18:39:21

Commenti

No, non è necessario fare il dequeue di jQuery, questa strada porta alla follia.

Andrew Bartel

25 mar 2014 18:46:10

@AndrewBartel perché dici così? Se jQuery è enqueued nel footer, c'è qualche modo per spostarlo nell'head senza prima fare il dequeue? Nessuna polemica intenzionale, ma questa soluzione ha funzionato per me.

Abhik

26 mar 2014 21:54:44

Nicolai Grossherr 18.9K · Accepted Answer · 2014-03-25T16:58:38Z

Il comportamento normale di wp_enqueue_script è quello di inserire l'output dello script nella sezione head, il parametro $in_footer è opzionale e ha come valore predefinito false. Quindi, puoi caricare jQuery con il tuo plugin nell'head e, assumendo che tu abbia a che fare con temi/plugin ben programmati, non verrà caricato nuovamente, perché wp_enqueue_script previene questo comportamento per impostazione predefinita - ulteriori informazioni a riguardo qui.

Nicolai Grossherr

18.9K

25 mar 2014 16:58:38