Forțarea wp_enqueue_scripts în HEADER

Question

Forțarea wp_enqueue_scripts în HEADER

25 mar. 2014, 16:40:48

Vizualizări: 32.9K

Voturi: 3

Un plugin la care lucrez necesită ca jQuery să fie încărcat înainte ca conținutul să fie procesat. Unele teme implicite, precum 2010, 2011 și 2012 (din câte știu) pun scripturile JS în footer.

Cum pot forța încărcarea scripturilor în header (voi notifica utilizatorii plugin-ului că acest lucru este necesar)?

Branndon

179

jquery anteturi

Comentarii

dacă ai nevoie ca jQuery să se încarce în head, probabil faci ceva greșit.

Milo

25 mar. 2014 17:00:44

De exemplu, dacă aș dori un simplu jQuery("body").css("background-color","red"); executat dintr-un shortcode în body, nu pot să fac asta. Să spunem că shortcode-ul meu este [body color=red] dar jquery nu se încarcă decât în footer, atunci codul meu nu va funcționa.

Branndon

25 mar. 2014 17:14:51

Scriptul care include acea linie poate fi declarat ca dependent de jquery, doar încearcă, va funcționa. Poate va trebui să aștepți până când documentul este gata, dar oricum vei face asta pentru majoritatea lucrurilor cu jquery.

Andrew Bartel

25 mar. 2014 17:20:39

încarcă un script extern și transmite date specifice shortcode-ului prin wp_localize_script, sau afișează scriptul inline în footer.

Milo

25 mar. 2014 17:21:05

Toate răspunsurile la întrebare

Comentarii

Poate că implicit este în head, dar unele teme implicite îl pun în footer, iar pentru temele care încearcă să-l pună în footer, aș dori opțiunea de a suprascrie acea funcție și de a-l plasa în head.

Branndon

25 mar. 2014 17:13:34

Sigur, am înțeles clar și corect. Iar răspunsul meu este conceput să te ajute cu asta, pentru că dacă l-ai încărcat în <head>...</head> ai făcut exact ceea ce ceri. Apropo, Milo are dreptate în comentariul său, nu aș spune neapărat că ai greșit cu ceva, dar cu siguranță poți schimba abordarea, ceea ce ar face inutilă încărcarea jQuery în head - ia în considerare acest lucru, pentru că este mai bine, best practice. @Branndon

Nicolai Grossherr

25 mar. 2014 17:20:17

Dar răspunsul tău și majoritatea răspunsurilor de aici sugerează că încerc să încarc un fișier script, și nu un fragment de cod. Codul este dinamic și se schimbă la fiecare încărcare de pagină. Lipsesc ceva? Pot folosi wp_enqueue_script pe un fragment de cod în loc de un fișier întreg?

Branndon

25 mar. 2014 17:24:32

Presupun că lucrezi cu scripturi inline, ar fi mai bine să nu faci asta oricum. În plus, în general poți pune orice cod de script inline într-un fișier de script. Aruncă o privire la al doilea comentariu al lui Milo pentru început și folosește cuvintele cheie pentru a utiliza funcția de căutare de aici pentru a afla mai multe despre opțiunile tale, aceste întrebări au fost puse și răspunsuri de multiple ori. Mult succes! @Branndon

Nicolai Grossherr

25 mar. 2014 17:29:26

Mulțumesc @ialocin, văd că wp_localize_script este o cale bună de urmat. Mulțumesc pentru răspunsurile detaliate!

Branndon

25 mar. 2014 17:44:17

Al treilea parametru al funcției wp_enqueue_script() îți permite să declari dependințele pentru scriptul pe care îl încarci, adică ce alte scripturi sunt necesare pentru ca acesta să funcționeze.

add_action( 'wp_enqueue_scripts', 'include_script_that_depends_on_jquery' );

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

În acest fel, indiferent unde încarcă orice temă, plugin sau altceva jQuery, scriptul tău se va încărca întotdeauna mai târziu, presupunând că și ei urmează cele mai bune practici și nu îl deregistrează.

Andrew Bartel

1.84K

25 mar. 2014 16:59:43

Comentarii

Problema este că trebuie să execut cod jQuery, nu un fișier de scripturi.

Branndon

25 mar. 2014 17:12:48

Cred că ar fi de ajutor dacă ai editat întrebarea ta cu ceea ce chiar trebuie să faci. Este posibil să nu fie necesar să o faci inline.

Andrew Bartel

25 mar. 2014 17:41:52

De exemplu, dacă aș dori să execut un simplu jQuery("body").css("background-color","red"); dintr-un shortcode în corpul paginii, nu pot face asta. Să spunem că shortcode-ul meu este [body color=red] dar jQuery nu este încărcat până în subsol, atunci codul meu nu va funcționa.

În gestionarul de shortcode, ai putea returna un element HTML placeholder sau o variabilă JavaScript, apoi să te conectezi la wp_footer cu o altă funcție care "rulează" jQuery.

function wpse_139154_shortcode( $atts ) {
    // Cod minunat

    wp_enqueue_script( 'jquery' ); // Va fi afișat în subsol dacă nu este deja în head
    add_action( 'wp_footer', 'wpse_139154_shortcode_script', 100 ); // Asigură-te că rulăm după 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

Conform referinței WP pentru wp_enqueue_scripts

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

Ultimul parametru este responsabil pentru locul în care scriptul va fi încărcat. Există câteva capcane care îi pot schimba comportamentul! Încearcă să găsești și să comentezi/ștergi aceste linii din fișierul tău function.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);

Scopul acestor șase acțiuni este de a muta automat codul JavaScript în subsolul paginii, făcând ultimul parametru din wp_enqueue_scripts inutil! Dacă aceste acțiuni nu pot fi eliminate, atunci poți schimba prioritățile lor. De la 5 la 9999, de exemplu. Joacă-te cu prioritățile pentru a găsi cea potrivită pentru tine.

De asemenea, trebuie să verifici dacă există dependențe specificate în array-ul $deps. Acestea vor forța scriptul să fie încărcat după rezolvarea lor.

Nu încerca nicio soluție murdară, este o practică proastă

Codare fericită

Rangel Nikolov

1

25 aug. 2016 11:08:33

Întâi, scoateți jQuery din coadă (dequeue) așa cum a fost adăugat de temă. Apoi adăugați-l din nou în coadă (enqueue).

function jquery_at_header() {
    // Scoate jQuery din coadă
    wp_dequeue_script( 'jquery' );

    // Adaugă jQuery din nou în coadă
    wp_enqueue_script( 'jquery' );

    // Apoi scriptul tău
    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 );

Poate fi necesar să ajustați prioritatea pentru a obține rezultatul dorit.

Abhik

2.92K

25 mar. 2014 18:39:21

Comentarii

Nu, nu este nevoie să elimini jquery din coadă, această cale duce la probleme.

Andrew Bartel

25 mar. 2014 18:46:10

@AndrewBartel de ce? Dacă jQuery este încărcat în footer, există vreo modalitate de a-l muta în head fără să-l elimini mai întâi din coadă? Nu intenționez să critic, dar asta a funcționat pentru mine.

Abhik

26 mar. 2014 21:54:44

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

Comportamentul normal al funcției wp_enqueue_script este de a plasa scriptul în secțiunea head a paginii, parametrul $in_footer este opțional și are valoarea implicită false. Astfel, poți încărca jQuery prin plugin-ul tău în secțiunea head și, presupunând că lucrezi cu teme/plugin-uri bine programate, acesta nu se va încărca din nou, deoarece wp_enqueue_script previne acest lucru în mod implicit - informații suplimentare despre aceasta aici.

Nicolai Grossherr

18.9K

25 mar. 2014 16:58:38