Paigaldad pluginat ja see toob kaasa oma koopia jQuery teegist. Sinu teema laadis jQuery juba wp_enqueue_script kaudu. Plugin laeb selle veel kord otse CDN aadressilt. Lehel on kaks või isegi kolm versiooni samast teegist. Konfliktid, paisunud maht, ettearvamatu käitumine.

Probleem on sama vana kui WordPress ise, kuid seda juhtub siiani: arendajad kopeerivad header.php faili <script src="jquery.js">, „sest see on kiirem". Kiirem, kuni tekib esimene konflikt pluginaga, mis eeldab WP algset versiooni.

1. aasta seisuga tarnib WordPress vaikimisi jQuery 3.6.0 ja pakub lihtsat, deterministlikku viisi selle kaasamiseks ilma dubleerimise ja versioonide käsitsi jälgimiseta. Allpool on ainuõige lähenemine, alates tavalisest wp_enqueue_script kutsest kuni selle turvalise asendamiseni CDN versiooniga ja noConflict režiimi kasutamiseni.

💡 Kiirülevaade:

• Kuidas WordPress juba laeb jQuery ja miks ei tohiks seda käsitsi teha
• wp_enqueue_script koos jquery sõltuvusega: üks rida functions.php failis
• Millal ja kuidas asendada sisseehitatud jQuery turvaliselt CDN versiooniga (Google / cdnjs)
• noConflict režiim: kaitse kokkupõrgete eest teiste teekidega
• Nõuanded teemadele ja pluginatele: millal EI TOHI sisseehitatud jQueryt üle kirjutada

JQuery on juba tuumas: mida WordPress sinu eest teeb

Alates versioonist 3.6 registreerib WordPress jQuery käepideme jquery all. Sa ei pea alla laadima jquery.min.js faili, paigutama seda oma teema kausta ja kaasama <script> sildiga. Tuum teeb seda automaatselt kohe, kui määrad oma skripti sõltuvustes jquery.

Praegune jQuery versioon WordPressi tuumas on 3.6.0. See tuleb koos jQuery Migrate'iga (tagasiühilduvuseks pärandkoodiga) ja laeb ainult siis, kui mõni skript deklareerib jquery sõltuvusena. Sõltuvuste puudumine tähendab, et jQueryt lehele ei ilmu ja sait ei laadi tarbetuid ressursse.

Seetõttu on otse header.php faili kirjutatud <script src="/wp-content/themes/mytime/jquery.js"> viga, mitte otsetee. Sa lähed sõltuvussüsteemist mööda, eemaldad WP võime laadimisjärjekorda hallata ja saad duplikaadi, kui mõni plugin legitimaalselt wp_enqueue_script kaudu jquery taotleb.

Õige viis: wp_enqueue_script koos sõltuvusega

Põhimehaanika mahub ühte ritta wp_enqueue_scripts konksu sees. Sa kirjutad oma skripti ja WordPress nuputab välja, millal ja mis järjekorras kõik laadida.

Loo (või ava) oma teema functions.php ja lisa:

1
function mytheme_enqueue_scripts() {
2
    wp_enqueue_script(
3
        'mytheme-main',
4
        get_template_directory_uri() . '/js/main.js',
5
        array( 'jquery' ),
6
        '1.0.0',
7
        array(
8
            'strategy'  => 'defer',
9
            'in_footer' => true,
10
        )
11
    );
12
}
13
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_scripts' );

Mis siin toimub:

• mytheme-main on sinu skripti unikaalne käepide. Mõtle ise välja, eesliitega teema nimest.
• get_template_directory_uri() . '/js/main.js' on faili asukoht. Võid kasutada ka välist CDN URL-i.
• array( 'jquery' ) on võtmepunkt: sa ütled WP-le „minu skript sõltub jQueryst". Tuum näeb seda ja paneb jQuery automaatselt järjekorda enne sinu skripti. Mitte ühtegi <script> silti mallis.
• '1.0.0' on versioon puhvri tühjendamiseks. Muuda seda iga skripti uuendusega.
• array( 'strategy' => 'defer', 'in_footer' => true ): alates WordPress 6.3 aktsepteerib $args parameeter massiivi. defer tähendab „käivita skript pärast DOM-i ehitamist, kuid enne DOMContentLoaded sündmust". in_footer paigutab skripti jalusesse.

Vana süntaks viienda tõeväärtusparameetriga (true = jaluses) töötab endiselt, kuid uute projektide puhul kasuta massiivi süntaksit. See on loetavam ja annab sulle kontrolli async/defer üle.

Kontrolli, et sinu teema kutsuks wp_head() enne </head> sulgevat silti ja wp_footer() enne </body>. Ilma nende kutseteta wp_enqueue_script lihtsalt ei tööta. See on levinud lõks iidsetelt teemadelt üleminekul.

Kuidas asendada sisseehitatud jQuery oma versiooniga

Mõnikord ei piisa algsest versioonist. Soovid CDN-ilt jQuery 4.0.0 uusimate paranduste saamiseks või vajad kindlat versiooni ühilduvuseks mõne pärandpluginaga. Saad selle asendada, kuid ettevaatlikult.

Viga: lihtsalt wp_enqueue_script('jquery', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js') kutsumine. WordPress EI kirjuta juba registreeritud käepidet üle. Saad samale lehele nii algse versiooni KUI KA CDN versiooni.

Õige järjekord: esmalt eemalda registreering algsest jquery käepidemest, seejärel registreeri enda oma:

1
function mytheme_use_cdn_jquery() {
2
    // Deregister the built-in jQuery
3
    wp_deregister_script( 'jquery' );
4
 
5
    // Register your own — from CDN
6
    wp_register_script(
7
        'jquery',
8
        'https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js',
9
        array(),
10
        '4.0.0',
11
        true
12
    );
13
 
14
    // Enqueue it
15
    wp_enqueue_script( 'jquery' );
16
}
17
add_action( 'wp_enqueue_scripts', 'mytheme_use_cdn_jquery' );

Kolm tihti tähelepanuta jäävat punkti:

Google Hosted Libraries. Google'i alternatiivne CDN on endiselt elus ja hostib jQuery 3.7.1: https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js. Eelis: miljonid saidid on selle URL-i brauseri puhvris juba soojendanud. Puudus: Google lisab oma päised ega uuenda versioone kohe pärast väljalaset.

cdnjs. Kui vajad jQuery 4.0.0, võta see aadressilt cdn.jsdelivr.net/npm/[email protected]/. cdnjs peegeldab npm paketti ja serveerib seda korrektsete CORS päistega.

Ära eemalda jQuery registreeringut avalikes teemades. Kui sinu teema läheb WordPress.org repositooriumisse, kasuta tuuma poolt pakutavat jQueryt. Põhjus on lihtne: kui saidil on nii teema (CDN jQuery 4.0.0-ga) kui ka plugin (mis eeldab tuuma jQuery 3.6.0), lahendab konflikti kasutaja, mitte arendaja. Kommertsteemade ja eriprojektide puhul asenda julgelt.

NoConflict režiim: kui lehel on rohkem kui üks teek

Vaikimisi hõivab jQuery globaalse muutuja $. Probleem on selles, et $ on populaarne nimi: Prototype, MooTools ja mõned pärandraamistikud kasutavad seda samuti. Kui plugin või mõni muu skript nõuab samuti $, võidab see, mis laaditi viimasena, ja teised lähevad katki.

Kaitse ühes reas oma skripti alguses:

1
var $j = jQuery.noConflict();

Pärast seda on $ vabastatud teistele teekidele ja sinu kood töötab läbi $j. Täielik näide: külgriba hõljumanimatsiooniga:

1
jQuery(document).ready( function( $ ) {
2
    // Here $ is jQuery, but only inside this function
3
    $( '#sidebar li a' ).hover(
4
        function() {
5
            $( this ).stop().animate( { paddingLeft: '20px' }, 400 );
6
        },
7
        function() {
8
            $( this ).stop().animate( { paddingLeft: '0' }, 400 );
9
        }
10
    );
11
} );

Siin töötab $ jQueryna jQuery(document).ready() sulundi sees ja väljaspool on see teistele vaba. See on puhtam kui $j, $jq ja $myJQ muutujate tekitamine üle kogu koodi.

Millal noConflict EI OLE vajalik: kui sinu sait töötab täielikult WordPressil ilma kolmanda osapoole JS raamistikuteta ja kõik pluginad on kirjutatud wp_enqueue_script jaoks, on $ ohutu. Kuid noConflict kaasamine oma teema standardsesse põhja on hea tava, mis maksab vaid ühe rea.

Mida pluginarendajad peaksid tegema

Kui kirjutad pluginat avalikuks levitamiseks, kasuta ainult wp_enqueue_script koos sõltuvusega jquery-le. Mitte mingit wp_deregister_script('jquery') pluginates: sa ei tea, millist jQuery versiooni teised pluginad samal saidil eeldavad.

Õige muster plugina jaoks näeb välja selline:

1
function myplugin_frontend_scripts() {
2
    wp_enqueue_script(
3
        'myplugin-frontend',
4
        plugins_url( '/js/frontend.js', __FILE__ ),
5
        array( 'jquery' ),
6
        MYPLUGIN_VERSION,
7
        true
8
    );
9
}
10
add_action( 'wp_enqueue_scripts', 'myplugin_frontend_scripts' );

MYPLUGIN_VERSION on plugina versioonikonstant. Iga plugina uuendusega saab kasutaja brauser värske skripti, mitte puhverdatud vana.

Administraatori skriptide jaoks (ainult admin-paneel) kasuta admin_enqueue_scripts konksu. jQuery adminis on registreeritud sama käepideme jquery all.

⁉️🤔 Korduma kippuvad küsimused

Miks minu jQuery kood ei tööta, kuigi wp_enqueue_script on õigesti kutsutud?

Kõige levinum põhjus: teema ei kutsu wp_head() ja wp_footer(). Ilma nende funktsioonideta ei saa WordPress füüsiliselt <script> silte HTML-i sisestada. Ava header.php. Seal peaks enne </head> olema <?php wp_head(); ?>. footer.php failis peaks enne </body> olema <?php wp_footer(); ?>. Kui teema on iidne ja need kutsed puuduvad, lisa need. See on ohutu. Kõik kaasaegsed teemad ja pluginad toetuvad wp_head/wp_footer funktsioonidele. Ilma nendeta on katki mitte ainult skriptide laadimine, vaid ka SEO pluginad, fondid ja struktureeritud andmed.

Kas ma saan WordPressis kasutada jQuery 4.0.0, kui tuum tarnib 3.6.0?

Jah, wp_deregister_script + wp_register_script kaudu (vt ülaltoodud jaotist). Kuid pane tähele: jQuery 4.0.0 loobus IE 11 toest ja mitmest aegunud meetodist. Kui sinu sait või plugin toetub jQuery Migrate'ile, jää tuumaversiooni juurde või kaasa Migrate eraldi. WordPress liigub järk-järgult natiivse JavaScripti ja Reacti poole plokiredaktori jaoks, kuid jQuery jääb tuuma veel pikaks ajaks: liiga paljud teemad ja pluginad sõltuvad sellest.

Plugin laeb oma jQuery, kuigi ma juba kaasasin selle functions.php kaudu. Mida teha?

Plugin ilmselt kõvakodeeris <script src="jquery...">, minnes mööda wp_enqueue_script kutsest. See on plugina viga. Kaks lahendust: leia plugina koodist otsekutse ja asenda see wp_enqueue_script kutsuga koos sõltuvusega (kui oled nõus pluginat parandama) või võta ühendust plugina autoriga ja palu tal see parandada. Ajutise lahendusena võid kutsuda wp_dequeue_script või eemaldada plugina konksu, kuid see ravib sümptomeid, mitte põhjust.

Mis on kiirem: jQuery WordPressi tuumast või CDN-ilt?

Kui kasutaja brauser on jQuery juba CDN-ilt (Google või cdnjs) puhverdanud, laeb CDN versioon koheselt 304 Not Modified koodiga. Kui mitte, on laadimiskiiruse erinevus tuuma ja CDN vahel jQuery puhul tühine (umbes 85 KB pakitult). Suure külastatavusega projektide puhul säästab CDN sinu serveri ribalaiust; tüüpilise WordPressi saidi jaoks pole vahet.

Kas peaksid jQuery loobuma natiivse JS kasuks

Lühike vastus: oleneb projektist. Pakitud jQuery 4.0.0 kaalub umbes 85 KB. See pole null, kuid pole ka paanikapõhjus. Kaasaegne natiivne JS (querySelectorAll, fetch ja classList) katab 90% sellest, milleks inimesed 2015. aastal jQueryt vajasid. Kui ehitad uut teemat nullist ja ei sõltu jQuery pluginatest, kaalu vanilla JS-i. See on puhtam ja kiirem.

Kuid kui projektis on juba jQuery sõltuvusi (liugurid, galeriid, pluginate UI komponendid), ära aja asju keeruliseks. WordPress laeb jQuery niikuinii, kui mõni plugin seda taotleb. Kirjuta puhtaid wp_enqueue_script kutsungeid koos sõltuvustega, ära sega tuuma laadimisjärjekorra haldamist ja jQuery töötab kiiresti ja ettearvatavalt.

🔗 wp_enqueue_script dokumentatsioon | 🔗 wp_deregister_script dokumentatsioon