Skip to content

Alt om WordPress, webutvikling — og mer til

🛠 Riktig inkludering av JavaScript i WordPress-temaer
WordPressWebbutvikling
8 min1,550 ord

🛠 Riktig inkludering av JavaScript i WordPress-temaer

Ditt WordPress-galleri sluttet å fungere etter en oppdatering. Høres det kjent ut?

Nesten alltid er årsaken JavaScript som er lenket direkte i header.php, uten hooks, uten avhengigheter, uten å ta høyde for at en hurtigbuffer-plugin kan endre innlastingsrekkefølgen. Én plugin henter inn jQuery, en annen henter sin egen versjon av jQuery, og skriptet ditt havner mellom dem og krasjer med $ is not defined.

I praksis er ett enkelt wp_enqueue_script-kall på riktig sted nok til å glemme konflikter for alltid. Nedenfor følger en komplett gjennomgang: fra nybegynnerfeil til defer/async-strategier og finjusteringsmuligheter som dukket opp i WordPress 6.6.

💡 Hurtigoversikt:

  • Ikke sett inn script-tagger direkte i header.php eller footer.php: dette skaper konflikter med plugins og ødelegger child themes
  • Kø JavaScript gjennom wp_enqueue_script i functions.php med wp_enqueue_scripts-hooken: WordPress plasserer taggene i head eller før /body selv
  • For kort inline-kode, bruk wp_add_inline_script, ikke en naken script-tag: bevarer kjøringsrekkefølgen og gir plugins en sjanse til å fange opp koden
  • På WordPress 6.3+ kan du angi en defer- eller async-strategi direkte i kallparametrene, og fra og med 6.6 også fetchpriority
  • Fjern tredjepartsskript fra køen via wp_dequeue_script hvis en plugin gjør nettstedet tregt: hook-prioritet avgjør

Hvordan JavaScript legges til feil i WordPress

Typisk scenario: du må laste inn din custom.js, og utvikleren setter inn denne linjen i header.php:

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

Ser ut til å fungere. Men denne tilnærmingen skaper tre problemer.

Konflikter med plugins. En hurtigbuffer-plugin kombinerer skript i en annen rekkefølge, en minifiserings-plugin endrer filnavnet og ødelegger filstien. Hvis en annen plugin allerede lastet jQuery og du laster det igjen, får du dobbel lasting og konsollfeil.

Kan ikke overstyres via et child theme. Ved bruk av et child theme kopieres header.php sjelden. Hvis skriptet er hardkodet i forelderens header.php, kan child theme-et ikke fjerne det fra køen eller erstatte det uten å kopiere hele filen, og dette betyr at endringer går tapt når foreldertemaet oppdateres.

Ingen avhengigheter. Nettleseren laster skriptet ditt før jQuery, og du får $ is not defined. Skriptet lastes på alle sider, selv der det ikke trengs, og ekstra forespørsler gjør nettstedet tregere.

Den riktige måten: wp_enqueue_script

WordPress tilbyr et køsystem for skript og stiler. Du setter ikke inn <script> manuelt, i stedet registrerer du skriptet via PHP, angir avhengigheter og innlastingssted. WordPress plasserer taggene i <head> eller før </body> selv.

Minimalt fungerende eksempel for temaets functions.php:

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' );

Funksjonen wp_enqueue_script tar fem parametere. $handle, en unik identifikator: hvis en annen plugin allerede registrerte et skript med samme handle, blir det ingen duplikatlasting. $deps, en array med handle-avhengigheter: WordPress laster de nødvendige skriptene før ditt. $in_footer med verdien true plasserer <script>-taggen før </body>, noe som gjør sidevisningen raskere.

Merk: get_template_directory_uri() peker til foreldertemaets mappe. I et child theme, bruk get_stylesheet_directory_uri(), URL-en vil peke til child-mappen, og skriptet ditt går ikke tapt når foreldertemaet oppdateres.

Lastestrategier: defer, async og fetchpriority

Fra og med WordPress 6.3 aksepterer $args-parameteren en array med tilleggsinnstillinger:

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-strategien forteller nettleseren: «last skriptet parallelt, kjør etter DOM-konstruksjon». Kjøringsrekkefølgen er garantert, skript med defer kjøres i den rekkefølgen de ble lagt til i DOM-en. async-strategien betyr «kjør så snart det er lastet», rekkefølgen er ikke garantert. For temaskript som er avhengige av DOM-en, velg defer.

Fra og med WordPress 6.6 fikk $args-arrayen to parametere til. fetchpriority styrer innlastingsprioritet ('high' eller 'low'), nyttig for kritiske skript som skal lastes før andre. module_dependencies aksepterer en array med modul-ID-er for dynamisk import, dette er for avanserte scenarioer med ES-moduler. Viktig: når du angir module_dependencies, må skriptet lastes i footer (in_footer => true) eller med defer-strategien, ellers vil ikke modulimportkartet være klart når skriptet kjøres.

Hvilke skript som allerede finnes i WordPress

WordPress registrerer dusinvis av JavaScript-biblioteker ut av boksen: jQuery, jQuery UI, Backbone, wp-api, MediaElement.js og andre. Fullstendig liste i den offisielle dokumentasjonen.

Hovedregelen: aldri last jQuery fra et CDN som Google eller cdnjs hvis temaet ditt fungerer i WordPress-økosystemet. WordPress leverer selv jQuery med handle-en jquery. For å bruke det, spesifiser ganske enkelt array( 'jquery' ) i avhengigheter, så laster WordPress sin egen versjon som er testet for kompatibilitet med hele kjernen.

Du kan sjekke om et bibliotek er registrert via wp_script_is():

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

Bruk av wp_enqueue_scripts-hooken

wp_enqueue_scripts-hooken kjøres på frontend. Det er denne wp_enqueue_script-kall pakkes inn i. Ikke kall funksjonen direkte i hoveddelen av functions.php uten en hook, skriptet kan bli lastet før WordPress registrerer systembiblioteker.

For admin-området, bruk en egen hook:

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}

Betinget lasting sparer ressurser: et skript for en innstillingsside skal ikke lastes på alle admin-sider. Parameteren $hook_suffix sendes automatisk av WordPress, bruk den.

Hvis et skript trengs både på frontend og i admin, koble én funksjon til begge:

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

Legge til inline JavaScript: wp_add_inline_script

Ikke all kode er verdt å legge i en egen fil. For korte snutter, tellere, konfigurasjonsvariabler, kjappe handlere, tilbyr 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' );

Den tredje parameteren, 'before' eller 'after', bestemmer hvor koden settes inn i forhold til det angitte skriptet. Dette er praktisk for å sende PHP-variabler til JavaScript: URL-en til AJAX-handleren, sikkerhetsnøkkel (nonce), gjeldende innleggs-ID.

Viktig detalj: wp_add_inline_script fungerer bare med et registrert skript. Hvis du sender en handle som ikke er i køen, vil ikke koden bli skrevet ut. Så først wp_enqueue_script, deretter wp_add_inline_script.

Alternativ for child themes: wp_head og wp_footer

Hvis du jobber i et child theme og ikke vil opprette en egen fil, kan du skrive ut kode direkte via wp_head- (i <head>) eller wp_footer-hooken (før </body>):

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 } );

Denne metoden er kortere, men mindre fleksibel enn wp_enqueue_script: ingen avhengigheter, versjonering eller mulighet til å fjerne skriptet fra køen via et child theme. Bruk den til små fikser når du ikke vil opprette en egen fil.

Hvordan fjerne et skript fra køen som er lagt til av en plugin eller et tema

Noen ganger laster en plugin et unødvendig skript på alle sider og gjør nettstedet tregt. Du kan fjerne det via wp_dequeue_script:

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 );

Prioritet 20 (tredje argument i add_action) plasserer funksjonen din etter plugin-registreringen, ellers vil ikke handle-en være i køen ennå. Du kan finne et skripts handle via nettleserkonsollen: åpne sidekilden og finn id-attributtet på <script>-taggen, handle-en samsvarer vanligvis med id-en uten -js-suffikset.

Hvis du trenger å erstatte et skript fullstendig, avregistrer først det gamle via wp_deregister_script, og registrer deretter det nye:

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 );

Før slike operasjoner, ta en fullstendig sikkerhetskopi av nettstedet. Å erstatte plugin-skript er en direkte vei til ødelagt funksjonalitet hvis du ikke tester i et staging-miljø.

Videoen over viser en trinnvis gjennomgang av hvordan du legger CSS og JavaScript i kø i et WordPress-tema via wp_enqueue_script og wp_enqueue_style. Hvis du er ny til hooks, start med den, og kom så tilbake til denne skriftlige guiden for detaljer.

⁉️🤔 Ofte stilte spørsmål

Er det obligatorisk å bruke wp_enqueue_script for hver js-fil?

I praksis, ja, for alle globalt innlastede skript. For et skript som fungerer på én enkelt side og genereres dynamisk, er det akseptabelt å sette inn <script> direkte i malen. Men så snart du har to eller flere skript, sparer køen via wp_enqueue_script deg for timer med feilsøking.

Hvordan skiller wp_register_script seg fra wp_enqueue_script?

wp_register_script registrerer bare et skript i systemet (setter handle, sti, avhengigheter), men skriver ikke ut taggen på siden. wp_enqueue_script registrerer OG legger umiddelbart i kø for utskrift. Separasjonen er nyttig når skriptet ikke alltid trengs: registrer én gang i functions.php, og kall wp_enqueue_script('my-handle') bare på de nødvendige sidene.

Kan jeg laste skript fra et eksternt CDN?

Teknisk sett, ja, send hele URL-en som den andre parameteren. Men for jQuery og andre kjernebiblioteker i WordPress er dette dårlig praksis: WordPress inkluderer dem allerede og tester kompatibilitet. Et eksternt CDN er berettiget for tredjepartstjenester som Google Analytics, reCAPTCHA, chat-widgets. Der angir du URL-en som den er.

Hvordan bekrefter jeg at et skript faktisk ble lastet?

Åpne utviklerverktøy (F12), Nettverk-fanen, filtrer på JS og oppdater siden. Filen din skal være i listen med statuskode 200. Hvis skriptet mangler, sjekk at wp_enqueue_scripts-hooken kjøres på denne siden og at filstien er korrekt. For feilsøking, skriv ut get_template_directory_uri() separat og sammenlign URL-en.

Hva bør jeg gjøre hvis skript slutter å fungere etter en temaoppdatering?

Mest sannsynlig overskrev oppdateringen din functions.php. Løsningen er et child theme: opprett ett, flytt funksjonene dine dit og aktiver det. Etter det vil oppdateringer av foreldertemaet la koden din være urørt.

Hva betyr feilen "$ is not defined" når jeg bruker jQuery?

WordPress laster jQuery i noConflict-modus, variabelen $ er ikke okkupert av jQuery for å unngå konflikter med andre biblioteker. Bruk det fulle navnet jQuery i stedet for $, eller pakk koden inn i en selvpåkallende funksjon: (function($) { ... })(jQuery);.

Er det verdt bryet med wp_enqueue_script for et par skript?

Hvis du har mer enn én plugin på nettstedet, er det verdt det. WordPress' skriptkø er designet slik at én plugin som laster jQuery direkte, ødelegger halve nettstedet i det øyeblikket du installerer en hurtigbuffer-plugin. wp_enqueue_script eliminerer hele denne problemklassen.

For et tema med fem filer, bruk wp_enqueue_script. For én kort snutt på en spesifikk side, holder wp_add_inline_script eller wp_footer-hooken. Men så snart du har to eller flere skript, gå tilbake til køen. En time brukt på riktig køhåndtering nå, sparer en kveld med feilsøking etter neste WordPress-oppdatering.

Redaksjonen
RedaksjonenRedaksjonelt team→ All publications

Et profesjonelt team av forfattere og redaktører som spesialiserer seg på å lage kvalitetsinnhold.