Skip to content

Kõik WordPressist, veebiarendusest — ja mitte ainult

🛠 JavaScripti korrektne lisamine WordPressi teemadesse
WordPressVeebiarendus
6 min1,288 sõna

🛠 JavaScripti korrektne lisamine WordPressi teemadesse

Sinu WordPressi galerii lakkas pärast uuendust töötamast. Kõlab tuttavalt?

Peaaegu alati on põhjuseks header.php-s otse lingitud JavaScript, ilma konksude, sõltuvuste ja arvestamata, et puhverdusplugin võib laadimisjärjekorda segada. Üks plugin tõmbab sisse jQuery, teine oma versiooni jQueryst ja sinu skript satub nende vahele ning jookseb kokku veaga $ is not defined.

Praktikas piisab ühest wp_enqueue_script kutsest õiges kohas, et konfliktid igaveseks unustada. Allpool on täielik ülevaade: alates algajate vigadest kuni defer/async strateegiate ja WordPress 6.6-s ilmunud peenhäälestusvõimalusteni.

💡 Kiirülevaade:

  • Ära lisa skriptisilte otse header.php-sse ega footer.php-sse: see tekitab konflikte pluginatega ja lõhub alamteemasid
  • Lisa JavaScript läbi wp_enqueue_script failis functions.php, kasutades wp_enqueue_scripts konksu: WordPress paigutab sildid ise head-i või /body ette
  • Lühikese sisemise koodi jaoks kasuta wp_add_inline_script, mitte paljast skriptisilti: säilitab täitmise järjekorra ja annab pluginatel võimaluse koodi vahele segada
  • WordPress 6.3+ puhul määra defer või async strateegia otse kutse parameetrites ja alates 6.6-st ka fetchpriority
  • Eemalda kolmandate osapoolte skriptid wp_dequeue_script abil, kui plugin aeglustab sinu saiti: konksu prioriteet määrab

Kuidas JavaScripti WordPressis valesti lisatakse

Tüüpiline stsenaarium: sul on vaja laadida oma custom.js ja arendaja lisab selle rea faili header.php:

1<script src="<?php echo get_template_directory_uri(); ?>/js/custom.js"></script>

Tundub, et töötab. Kuid see lähenemine tekitab kolm probleemi.

Konfliktid pluginatega. Puhverdusplugin kombineerib skripte teises järjekorras, minifitseerimisplugin nimetab faili ümber ja lõhub tee. Kui mõni teine plugin on juba jQuery laadinud ja sina laed selle uuesti, tekib topeltlaadimine ja konsooli vead.

Ei saa alamteema kaudu üle kirjutada. Alamteema kasutamisel kopeeritakse header.php harva. Kui skript on ülemteema header.php-sse kõvasti kodeeritud, ei saa alamteema seda eemaldada ega asendada ilma tervet faili kopeerimata ja see tähendab, et muudatused lähevad ülemteema uuendamisel kaotsi.

Sõltuvused puuduvad. Brauser laeb sinu skripti enne jQueryt ja sa saad vea $ is not defined. Skript laeb kõigil lehtedel, isegi seal, kus seda vaja pole, ja lisapäringud aeglustavad saiti.

Õige viis: wp_enqueue_script

WordPress pakub skriptide ja stiilide jaoks järjekorrasüsteemi. Sa ei lisa <script> käsitsi, vaid registreerid skripti läbi PHP, määrad sõltuvused ja laadimise asukoha. WordPress paigutab sildid ise <head>-i või enne </body>.

Minimaalne töötav näide sinu teema functions.php jaoks:

1/**
2 * Enqueue the main theme script.
3 */
4function mytheme_enqueue_scripts() {
5    wp_enqueue_script(
6        'mytheme-main',                                     // $handle — unique name
7        get_template_directory_uri() . '/js/main.js',       // $src — file path
8        array( 'jquery' ),                                  // $deps — dependencies
9        '1.0.0',                                            // $ver — version for cache busting
10        true                                                // $in_footer — load in footer
11    );
12}
13add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_scripts' );

Funktsioon wp_enqueue_script võtab vastu viis parameetrit. $handle, unikaalne identifikaator: kui mõni teine plugin on juba sama handle'iga skripti registreerinud, siis topeltlaadimist ei toimu. $deps, sõltuvuste handle'ite massiiv: WordPress laeb vajalikud skriptid enne sinu oma. $in_footer väärtusega true paigutab <script> sildi enne </body>, mis kiirendab lehe renderdamist.

Märkus: get_template_directory_uri() osutab ülemteema kaustale. Alamteemas kasuta get_stylesheet_directory_uri(), URL osutab alamkaustale ja sinu skript ei kao ülemteema uuendamisel.

Laadimisstrateegiad: defer, async ja fetchpriority

Alates WordPress 6.3-st võtab $args parameeter vastu massiivi täiendavate seadetega:

1wp_enqueue_script(
2    'mytheme-main',
3    get_template_directory_uri() . '/js/main.js',
4    array( 'jquery' ),
5    '1.0.0',
6    array(
7        'in_footer' => true,
8        'strategy'  => 'defer',
9    )
10);

defer strateegia ütleb brauserile: „laadi skript paralleelselt, käivita pärast DOM-i ehitamist". Täitmise järjekord on garanteeritud, defer-iga skriptid käivituvad DOM-i lisamise järjekorras. async strateegia tähendab „käivita kohe, kui laetud", järjekord ei ole garanteeritud. DOM-ist sõltuvate teemaskriptide jaoks vali defer.

Alates WordPress 6.6-st sai $args massiiv kaks parameetrit juurde. fetchpriority juhib laadimise prioriteeti ('high' või 'low'), kasulik kriitiliste skriptide puhul, mis peaksid laadima enne teisi. module_dependencies võtab vastu mooduli ID-de massiivi dünaamiliseks importimiseks, see on mõeldud edasijõudnud stsenaariumide jaoks ES-moodulitega. Oluline: module_dependencies määramisel peab skript laadima jaluses (in_footer => true) või defer strateegiaga, vastasel juhul pole mooduli impordikaart skripti käivitamise ajaks valmis.

Millised skriptid on WordPressis juba olemas

WordPress registreerib vaikimisi kümneid JavaScripti teeke: jQuery, jQuery UI, Backbone, wp-api, MediaElement.js ja teised. Täielik nimekiri ametlikus dokumentatsioonis.

Peamine reegel: ära kunagi laadi jQueryt CDN-ist nagu Google või cdnjs, kui sinu teema töötab WordPressi ökosüsteemis. WordPress ise pakub jQueryt handle'iga jquery. Selle kasutamiseks määra lihtsalt sõltuvustes array( 'jquery' ), WordPress laeb oma versiooni, mille ühilduvus kogu tuumaga on testitud.

Saad kontrollida, kas teek on registreeritud, kasutades wp_script_is():

1if ( wp_script_is( 'jquery-ui-datepicker', 'registered' ) ) {
2    // Library is available — just add to $deps
3}

Wp_enqueue_scripts konksu kasutamine

wp_enqueue_scripts konks käivitub esiküljel. Selle sisse mähitakse wp_enqueue_script kutsed. Ära kutsu funktsiooni otse functions.php kehas ilma konksuta, skript võib laadida enne, kui WordPress süsteemiteegid registreerib.

Administraatori ala jaoks kasuta eraldi konksu:

1add_action( 'admin_enqueue_scripts', 'mytheme_admin_scripts' );
2function mytheme_admin_scripts( $hook_suffix ) {
3    // $hook_suffix contains the current admin page
4    if ( 'post.php' !== $hook_suffix ) {
5        return; // load script only on the post edit page
6    }
7    wp_enqueue_script( 'mytheme-admin', get_template_directory_uri() . '/js/admin.js', array(), '1.0', true );
8}

Tingimuslik laadimine säästab ressursse: seadete lehe skript ei peaks laadima kõigil admin-lehtedel. $hook_suffix parameetri annab WordPress automaatselt kaasa, kasuta seda.

Kui skripti on vaja nii esiküljel kui ka adminis, haagi üks funktsioon mõlemasse:

1add_action( 'wp_enqueue_scripts', 'mytheme_global_scripts' );
2add_action( 'admin_enqueue_scripts', 'mytheme_global_scripts' );

Sisemise JavaScripti lisamine: wp_add_inline_script

Kogu koodi ei tasu eraldi faili panna. Lühikeste juppide, loendurite, seadistusmuutujate, kiirete handlerite jaoks pakub WordPress wp_add_inline_script:

1function mytheme_inline_config() {
2    wp_enqueue_script( 'mytheme-main', get_template_directory_uri() . '/js/main.js', array(), '1.0', true );
3    wp_add_inline_script(
4        'mytheme-main',
5        'const MYTHEME_AJAX_URL = "' . admin_url( 'admin-ajax.php' ) . '";',
6        'before'
7    );
8}
9add_action( 'wp_enqueue_scripts', 'mytheme_inline_config' );

Kolmas parameeter, 'before' või 'after', määrab, kuhu kood määratud skripti suhtes lisatakse. See on mugav PHP muutujate JavaScriptile edastamiseks: AJAX handleri URL, turvalisuse nonce võti, praeguse postituse ID.

Oluline detail: wp_add_inline_script töötab ainult registreeritud skriptiga. Kui annad handle'i, mida järjekorras pole, siis koodi ei väljastata. Seega kõigepealt wp_enqueue_script, seejärel wp_add_inline_script.

Alternatiiv alamteemadele: wp_head ja wp_footer

Kui töötad alamteemas ega taha eraldi faili luua, saad koodi väljastada otse läbi wp_head (<head>-is) või wp_footer (enne </body>) konksude:

1add_action( 'wp_footer', function() { ?>
2    <script>
3        ( function( $ ) {
4            'use strict';
5            $( function() {
6                // Your code here — DOM is already ready
7            } );
8        } ( jQuery ) );
9    </script>
10<?php } );

See meetod on lühem, kuid vähem paindlik kui wp_enqueue_script: puuduvad sõltuvused, versioonihaldus ega võimalus skripti alamteema kaudu eemaldada. Kasuta seda väikeste paranduste puhul, kui sa ei taha eraldi faili luua.

Kuidas eemaldada plugin või teema poolt lisatud skript

Mõnikord laeb plugin ebavajaliku skripti kõigil lehtedel ja aeglustab saiti. Saad selle eemaldada wp_dequeue_script abil:

1function mytheme_dequeue_plugin_scripts() {
2    if ( ! is_page( 'contacts' ) ) {
3        wp_dequeue_script( 'plugin-handle' );
4    }
5}
6add_action( 'wp_enqueue_scripts', 'mytheme_dequeue_plugin_scripts', 20 );

Prioriteet 20 (add_action kolmas argument) paigutab sinu funktsiooni plugin registreerimisest hilisemaks, vastasel juhul pole handle veel järjekorras. Skripti handle'i leiad brauseri konsooli kaudu: ava lehe lähtekood ja otsi <script> sildilt id atribuuti, handle vastab tavaliselt id-le ilma -js sufiksita.

Kui on vaja skript täielikult asendada, eemalda esmalt vana registreering wp_deregister_script abil, seejärel registreeri uus:

1function mytheme_replace_script() {
2    wp_deregister_script( 'old-handle' );
3    wp_enqueue_script( 'old-handle', get_template_directory_uri() . '/js/replacement.js', array(), '2.0', true );
4}
5add_action( 'wp_enqueue_scripts', 'mytheme_replace_script', 20 );

Enne selliseid operatsioone tee saidist täielik varukoopia. Plugina skriptide asendamine on otsetee katkise funktsionaalsuseni, kui sa ei testi lavastuskeskkonnas.

Ülaltoodud video näitab samm-sammult CSS-i ja JavaScripti järjekorda panemist WordPressi teemas wp_enqueue_script ja wp_enqueue_style abil. Kui oled konksudega uus, alusta sellest, seejärel tule detailide saamiseks selle kirjaliku juhendi juurde tagasi.

⁉️🤔 Korduma kippuvad küsimused

Kas wp_enqueue_script on kohustuslik iga js-faili jaoks?

Praktikas jah, kõigi globaalselt laetavate skriptide puhul. Ühelainsal lehel töötava ja dünaamiliselt genereeritud skripti puhul on vastuvõetav lisada <script> otse malli. Kuid niipea, kui sul on kaks või enam skripti, säästab wp_enqueue_script kaudu järjekorda panemine tunde silumist.

Mille poolest erineb wp_register_script funktsioonist wp_enqueue_script?

wp_register_script ainult registreerib skripti süsteemis (määrab handle'i, tee, sõltuvused), kuid ei väljasta silti lehel. wp_enqueue_script registreerib JA paneb kohe väljastamiseks järjekorda. Eraldamine on kasulik, kui skripti pole alati vaja: registreeri üks kord failis functions.php ja kutsu wp_enqueue_script('my-handle') ainult vajalikel lehtedel.

Kas ma võin skripte laadida välisest CDN-ist?

Tehniliselt jah, anna täis-URL teise parameetrina. Kuid jQuery ja teiste WordPressi tuumateekide puhul on see halb tava: WordPress juba sisaldab neid ja testib ühilduvust. Väline CDN on õigustatud kolmandate osapoolte teenuste puhul nagu Google Analytics, reCAPTCHA, jutividinad. Seal määra URL nii, nagu see on.

Kuidas kontrollida, kas skript tegelikult laadis?

Ava arendaja tööriistad (F12), vahekaart Network, filtreeri JS järgi ja värskenda lehte. Sinu fail peaks olema nimekirjas staatuskoodiga 200. Kui skript puudub, kontrolli, kas wp_enqueue_scripts konks sellel lehel käivitub ja kas failitee on õige. Silumiseks väljasta get_template_directory_uri() eraldi ja võrdle URL-i.

Mida teha, kui skriptid lakkavad pärast teema uuendamist töötamast?

Suure tõenäosusega kirjutas uuendus sinu functions.php üle. Lahendus on alamteema: loo see, tõsta oma funktsioonid sinna ja aktiveeri. Pärast seda jätavad ülemteema uuendused sinu koodi puutumata.

Mida tähendab viga "$ is not defined" jQuery kasutamisel?

WordPress laeb jQuery noConflict režiimis, muutuja $ ei ole jQuery poolt hõivatud, et vältida konflikte teiste teekidega. Kasuta $ asemel täisnime jQuery või mähi kood isekäivituvasse funktsiooni: (function($) { ... })(jQuery);.

Kas wp_enqueue_scriptiga tasub paari skripti pärast vaeva näha?

Kui sul on saidil rohkem kui üks plugin, siis tasub. WordPressi skriptijärjekord on loodud nii, et üks jQueryt otse laadiv plugin lõhub poole saidist sel hetkel, kui paigaldad puhverdusplugina. wp_enqueue_script kõrvaldab terve selle probleemide klassi.

Viiefaililise teema puhul kasuta wp_enqueue_script. Ühe lühikese jupi jaoks konkreetsel lehel sobib wp_add_inline_script või wp_footer konks. Kuid niipea, kui sul on kaks või enam skripti, tule tagasi järjekorra juurde. Tund, mis kulub korralikule järjekorda panemisele praegu, säästab õhtu silumist pärast järgmist WordPressi uuendust.

Toimetus
ToimetusToimetuse meeskond→ All publications

Professionaalne kirjanike ja toimetajate meeskond, kes on spetsialiseerunud kvaliteetse sisu loomisele.