Tilføj Javascript til WordPress-webstedet - 7 trin-for-trin metoder

Der er typisk mange grunde til, at du vil tilføje Javascript til WordPress, enten en lille tweak til en funktion eller måske du ønsker at tilføje et tredjepartsscript. Hilsenless af grunden til, at du vil gøre det, vil du være sikker på, at du ikke tager fejl - for du kan ødelægge din hjemmeside eller skabe en flaskehals i ydeevnen.

Det er ikke muligt at tilføje Javascript til WordPress-sider og indlæg direkte, så vi vil foreslå en række forskellige måder at tilføje Javascript-kode til hjemmesider på, og hvilke der skal bruges under de forskellige omstændigheder, du kan støde på. 

Hvis du har travlt, så brug indholdsfortegnelsen nedenfor til at scrolle til den relevante del af artiklen.

Denne artikel indeholder ændringer i WordPress-kode. Hvis du ikke er sikker på selv at justere koden, vil du måske gøre det lær hvordan du rekrutterer den bedste WordPress-udvikler til din virksomhed eller tjek følgende billige udviklingsmuligheder. 

Hvis du ikke er sikker på, om dette er det rigtige for dig, og hvad du skal få dette gjort hurtigt, skal du tjekke et par Fiverr-koncerter, der hurtigt kan få dette gjort for dig

Klik her for at finde billige eksperter på WordPress-rettelser

Hvad er JavaScript?

Hvis du læser dette indlæg, er du sikkert allerede bekendt med, hvad JavaScript er.

Men for at holde det tilgængeligt for alle, vil vi hurtigt skitsere, hvad JavaScript er, og hvad det gør. Du er velkommen til at springe denne del over, hvis du allerede ved det.

JavaScript er et programmeringssprog, der kører i en browser. Det kan kaldes fra webserveren, men kører i den besøgendes browser.

Dette giver ret mange muligheder for at få det til at gøre seje ting som at indlejre video og tilføje funktioner.

For eksempel kan du bruge JavaScript til at integrere en videoafspiller, så din webserver ikke behøver at gøre det.

Dette forbedrer brugeroplevelsen ved at inkludere video uden at belaste din webserver for at afspille videoen.

JavaScript bruges også i mobilapps, spil, serverapplikationer, frontend-udvikling og for nyligt AI-relateret udvikling.

Kan du bruge JavaScript i WordPress?

Ja, du kan bruge JavaScript i WordPress. I betragtning af CMS'ets iboende fleksibilitet kan du bruge JavaScript til at tilføje interaktive elementer eller placere tredjeparts API'er på en side.

Anvendelsesmulighederne er mange og varierede, men da JavaScript køres af brugerens browser, kan det gøre meget uden at bremse din webserver.

Du kan tilføje script på en række måder, som vi vil diskutere om lidt.

Før du foretager ændringer i filer, vil vi anbefale at oprette et undertema og/eller sikkerhedskopiere dit websted først.

Du kan ikke være for forsigtig!

Sådan tilføjes JavaScript til WordPress

Der er flere måder at tilføje tilpasset Javascript-kode til dit WordPress-websted, hver med deres egne anvendelser:

1. Tilføj et script til udvalgte sider ved hjælp af et plugin såsom WPCode
2. Føj scriptet til en bestemt eller enkelt side efter eget valg eller flere sider ved hjælp af functions.php
3. Tilføj JavaScript til alle sider
4. Føj en Javascript-fil til dit temahoved
5. Brug af wp_head-krogen til at tilføje brugerdefineret JavaScript
6. Tilføj JavaScript til din WordPress-sidefod
7. Tilføjelse af JavaScript til WordPress-video
8. Tilføj JavaScript til en WordPress-widget

Lad os gennemgå hver af disse metoder i detaljer.

Så vil vi hurtigt dele, hvordan du fejlretter JavaScript, når du har tilføjet det til en side.

Bemærk: Nogle af disse teknikker involverer ændringer i kernefiler. Selvom det normalt ikke er en god idé at ændre functions.php og andre kerne WordPress-filer, vil vi gerne vise dig alle måder at tilføje kode på.

Vi anbefaler ikke nødvendigvis at foretage ændringer på denne måde, men vi tror på at give dig al information og derefter træffe din egen beslutning.

1. Brug et plugin såsom WPCode

Hvis du blot vil bruge et plugin til at indlejre en javascript-reference til WordPress-temaets sidehoved- eller sidefodsfil, er WPCode-plugin en nem og gratis mulighed.

Vi anbefaler at bruge et plugin til alle kodeændringer, da det holder alt rent og kan undgå problemer hen ad vejen.

I stedet for at ændre temaets filer direkte med den brugerdefinerede Javascript-kode, giver et plugin dig mulighed for at indsætte koden, som derefter vil blive tilføjet til sidehovedet eller sidefoden på dit websted, afhængigt af de muligheder, du har valgt. 

Dette plugin understøtter flere forskellige muligheder, så vi vil blot beskrive de mest almindelige, du skal bruge.

Du kan download WPCode her eller installer det ved hjælp af funktionen Installer plugins i WordPress.

Installer WPCode plugin:

• Log ind på dit websteds backend eller administrator.
• Gå til plugins > Tilføj ny
• Søg efter "WPCode" plugin og klik på Installer nu.
• Når det er installeret, klik på Aktivere

Du kan nu enten indlæse et brugerdefineret script uden en fil (f.eks. for at tilføje et script, som du har fået, såsom Google Analytics) eller uploade en tilpasset Javascript-fil. 

Den mest almindelige mulighed, du kan bruge med dette plugin, er muligheden for at tilføje koden direkte til WordPress.

Dette kan bruges, når du bruger en tredjepartstjeneste, såsom Google Analytics, Drip eller et andet værktøj, der skal tilføjes noget script til dit websted. Bare tag scriptet og slip det i Global sidehoved og sidefod vindue.

Du kan vælge at tilføje scriptet til sidehoved, brødtekst eller sidefod. Du bør have vejledning fra udbyderen af ​​scriptet til, hvilke af disse sektioner du skal tilføje scriptet.

Lad os sige, at du vil tilføje det til overskriften:

Klik Gem ændringer at færdiggøre.

WPCode plugin tilføjer nu koden til hver side på dit websted.

Genindlæs frontend, og tjek dit websteds kilde for at sikre dig, at koden nu vises. Det er også en god ide at gennemse et par sider for at bekræfte, at alt stadig fungerer godt.

WPCode giver dig også mulighed for at oprette dine egne kodestykker.

Du kan også indsætte kodestykker hvor som helst på dit websted, såsom inde i indlæg eller sider, før eller efter et indlæg, før eller efter indhold eller en række andre muligheder, som du muligvis har brug for.

Du skal blot navigere til Kodeuddrag > Tilføj uddrag og vælg derefter Opret dit eget.

Du vil nu blive ført til en Opret brugerdefineret kodestykke side, hvor du kan give din kode en titel og indsætte den i Forhåndsvisning af kode boks.

Derefter fra Kodetype dropdown menu, vælg JavaScript-uddrag.

Derefter skal du blot scrolle ned, indtil du når til Indsættelse område.

Det eneste, der er tilbage, er at vælge en placering for koden fra rullemenuen. Find Side, Post, Custom Post Type og angiv, hvor du vil have koden vist på siden eller indlægget.

Hvis du vil have WPCode til at sætte uddraget før eller efter et afsnit, kan du angive, hvilket afsnit i indlægget det skal vises før eller efter.

Hvis du f.eks. indtaster 1 i feltet 'Indsæt nummer', vil kodestykket vises før eller efter første afsnit. For andet afsnit, brug 2, og så videre.

Derefter skal du blot skifte til/fra-knappen nær toppen af ​​skærmen til Aktiv , og klik derefter på Gem uddrag mulighed ved siden af.

Det er alt, der skal til for at tilføje JavaScript til WordPress!

Den største fordel ved at bruge et plugin er, at det er en begyndervenlig mulighed. Du behøver ikke bekymre dig om at redigere dit temas filer. WPCode-plugin'et kan også være nyttigt, hvis du leder efter en sømless måde at tilføje andre typer kode og tilpasset CSS.

Men ulempen ved denne metode er, at den involverer installation af et tredjeparts plugin, som nogle webstedsejere forsøger at undgå.

Hvis du vil holde dine udvidelser på et minimum, er du måske bedre stillet ved at bruge en af ​​de andre metoder.  

Selvom dette virker ret simpelt, kan det være uden for din komfortzone, så hvis du vil have det gjort hurtigt, så tjek nogle udviklere på Fiverr, der kan få dette gjort for dig.

Klik her for at finde billige eksperter på WordPress-rettelser

2. Tilføj JavaScript til en specifik WordPress-side eller et specifikt indlæg

Denne kodetilpasning bruger funktioner fil fundet i din skabelonmappe for kun at tilføje en .JS-fil til en enkelt side efter eget valg.

Dette bruger IS_PAGE funktion, som du kan finde link.: 

Du kan faktisk bruge forskellige andre muligheder, hvis du kun vil tilføje scriptet under specifikke forhold, såsom:

• is_single(),
• is_front_page(),
• is_home,
• is_admin etc. 

Hvis du har brug for at tilføje filen til alle sider, skal du fortsætte med at rulle for at finde andre alternativer til denne metode nedenfor.

• Først skal du identificere ID'et på den side, som du vil tilføje scriptet til.
• Det gør du ved at gå til den side, du vil tilføje filen til, klik Redigere og afhent derefter ID'et på siden fra URL'en, som du kan se nedenfor. ID'et er det nummer, der findes i URL-adressen til browserlinjen.

• Nu hvor du har sidens id, skal du uploade .js-filen til en placering. Vi anbefaler, at du uploader .js-filen til din skabelonmappe, måske i underordnet bibliotek.
• Når du har uploadet det, skal du notere nøjagtigt kataloget og navnet på .JS-filen, som vi bruger i stedet for PATH_TO_JS_FILE nedenfor. Som et eksempel kan din fil være i: https://www.yourwebsite.com/wp-content/themes/twentynineteen/js/myjsfile.js
• Noter den fulde URL fuldt ud, og udskift PATH_T_JS_FILE nedenfor. Du bliver også nødt til at erstatte ID, som du har fundet ovenfra.
• Tilføj den fulde kode nedenfor til slutningen af funktioner fil i din skabelon.

funktion collectiveray_load_js_script () {
  hvis (is_page (ID)) {
    wp_enqueue_script ('js-file', 'PATH_TO_JS_FILE', array ('jquery'), '', false);
    // eller brug nedenstående version, hvis du ved nøjagtigt, hvor filen er
    // wp_enqueue_script ('js-file', get_template_directory_uri (). '/js/myscript.js');
  }
}

add_action ('wp_enqueue_scripts', 'collectiveray_load_js_script ');

Hvis du ved nøjagtigt, hvor du har placeret JS-filen, kan du bruge en lille variation af wp_enqueue_script: 

wp_enqueue_script ('js-fil', get_template_directory_uri (). '/js/myscript.js');

I dette tilfælde er /js/mysript.js-filen placeringen af ​​den fil, du vil tilføje.

Når du har genindlæst siden, finder du ud af, at filen er tilføjet. Du kan bekræfte dette ved at klikke på Vis kilde på siden.

Hvis du i stedet for at tilføje Javascript-filen til en side, vil føje den til en enkelt side, kan vi bruge en lille tweak af denne funktion for at få den til at gælde for et enkelt indlæg. Du kan bruge en hvilken som helst variant af følgende:

• er_single ('17') - bruger post-id'et
• is_single ('Mit indlægstitel') - bruger postens titel til at kontrollere, om dette er indlægget, som filen skal føjes til
• is_single ('min post-titel') - kontrollerer mod posten
• is_single (matrix (17, 'min post-titel', 'mit post-titel')) - dette kontrollerer, om nogen af ​​betingelserne for post-id er "17", slug er "min-post-titel" eller titel er "Min post-titel"
• is_single () - andre variationer af is_single-funktionen ved hjælp af en række værdier at kontrollere mod

Koden vil i dette tilfælde være følgende eller en lille variation afhængig af parametrene for is_single-funktionen. 

funktion collectiveray_load_js_script () {
  hvis (is_single ('17 ')) {
    wp_enqueue_script ('js-file', 'PATH_TO_JS_FILE', array ('jquery'), '', false);
    // eller brug nedenstående version, hvis du ved nøjagtigt, hvor filen er
    // wp_enqueue_script ('js-file', get_template_directory_uri (). '/js/myscript.js');
  } 
}

add_action ('wp_enqueue_scripts', 'collectiveray_load_js_script ');

Hvis du har posttitlen, kan du bruge dette i stedet for parameteren "17". Endnu en gang kan wp_enqueue_script også justeres til:

wp_enqueue_script ('js-fil', get_template_directory_uri (). '/js/myscript.js');

3. Tilføj JavaScript til alle sider

Som vi har set, er den nemmeste og reneste metode til at tilføje en javascript-fil til dit WordPress-tema ved hjælp af functions.php fil med wp_enqueue_script.

I dette tilfælde, i stedet for at oprette en betingelse for at tilføje indholdet til bestemte sider, vil vi tilføje en generisk funktion.

Sådan gør du det:

Åbn din functions.php fil og kopier nedenstående kodestykke til den. Sørg for at udskifte skabelon-URL med din, før du gemmer.

funktion collectiveray_theme_scripts_function () {
  wp_enqueue_script ('js-fil', get_template_directory_uri (). '/js/myscript.js');
}
add_action ('wp_enqueue_scripts', 'collectiveray_theme_scripts_function ');

Hvis du er ved hjælp af et børnetema, skal du bruge get_styleheet_directory_uri () i stedet for get_template_directory_uri () 

Ved at bruge denne metode behøver du ikke at installere et andet plugin, hvis du redigerer din functions.php-fil. Denne metode kan også bruges til at tilføje funktioner og funktionalitet til både dit tema og selve WordPress. Denne tilgang kan for eksempel installere JavaScript i et enkelt indlæg eller en side eller alle sider.

Den største ulempe ved denne strategi er, at den kræver, at du håndterer kode og opdaterer din hjemmesides filer. Som et resultat, hvis du mangler erfaring på dette område, er det muligvis ikke det ideelle alternativ.

Klik her for at finde billige eksperter på WordPress-rettelser

4. Føj JavaScript til din temahoved

I visse tilfælde vil du muligvis have JavaScript-filen brugt på hele dit websted, men du vil ikke bruge et plugin til at gøre dette.

Hvis du f.eks. vil tilføje et tredjepartsscript til alle dine sider (f.eks. instantpage.js-scriptet for at gøre dit websted hurtigere), kan du indsætte scriptet eller tilføje selve den refererede scriptfil i head af din header.php skabelonfil. 

DETTE ER IKKE IDEAL. Hvis du opdaterer dit tema, kan du miste disse ændringer. Hvis du stadig gerne vil gøre dette direkte, anbefales det stærkt, at du opretter et børnetema.

I dette scenarie, hvor du vil tilføje dette script overalt, kan du tilføje filen direkte til skabelonen i henhold til nedenstående instruktioner:

Dette kald til filen (eller scriptet) skal tilføjes mellem metatags og stilarklinket. Dette er nøjagtigt det samme som hvis du tilføjede Javascript-kode på en hvilken som helst HTML-side. 

For at "tilføje" Javascript-filen til dit websted, i head, bruger du følgende kode:

Sørg for, at du har defineret type korrekt, ellers er dit websted ikke gyldigt. Sørg også for, at mappen / scripts findes i temaet, og at du har tilføjet myscript.js til det.

Du kan derefter tilføje enhver henvisning til funktioner, der bruges i den fil, du lige har føjet til HTML, hvor du har brug for det. 

For eksempel er dette et eksempel på brug af den funktion, du lige har tilføjet.

" >Overskriften går her

4. Brug af wp_head-krogen til at tilføje brugerdefineret JavaScript

Du kan også tilføje tilpasset JavaScript til din header ved hjælp af wp_head action krog. Igen, denne løsning foretrækkes ikke, fordi den genererer et for stort antal scripts. Det er det alligevelless, foretrækkes frem for manuelt at indsætte scripts i din header.php-fil.

Denne metode, som også kan bruges til sidefoden, gør brug af handlingshook(erne) til at indsætte inline scripts på dit websted. I modsætning til wp enqueue script-funktionen, som sætter brugerdefinerede scripts i kø, udskriver wp head-metoden scripts i din header-skabelon (og sidefod, hvis du bruger wp_footer krog).

For at begynde skal du navigere til din functions.php-fil og kopiere og indsætte følgende kode:

function collectiver_custom_javascript() { ?>

<?php } add_action('wp_head', 'collective_custom_javascript');

Det er værd at bemærke, at wp-hovedkrogen kun virker på forsiden af ​​dit websted. Dette indebærer, at enhver brugerdefineret JavaScript tilføjet gennem denne tilgang ikke vises i administrator- eller login-områderne. Men hvis du vil tilføje JavaScript til disse steder, kan du gøre det ved at bruge admin-hovedet og login-hovedets handlingskroge.

Udviklere kan lide wp enqueue script-funktionen, fordi den undgår konflikter, der kan opstå med andre løsninger, såsom direkte tilføjelse af scripts til din header.php-fil. Desuden genererer denne løsning ikke nogen afhængige scripts.

Det største problem med at tilføje tilpasset WordPress JavaScript til dit websteds header er, at det kan forstyrre andre plugins, der indlæser deres egne scripts. Denne konfiguration kan også forårsage, at flere scripts indlæses flere gange, hvilket kan sænke dit websteds samlede hastighed og ydeevne.

5. Føj JavaScript til din WordPress-sidefod

Tilføjelse af JavaScript til din WordPress-sidefod er relativt enkel. Du kan tilføje kode til sidehoved- eller sidefodsfilen, bruge et brugerdefineret kodeelement i din sidebygger eller tema eller bruge et specifikt sidehoved- og sidefod-plugin.

Da du bør undgå at tilføje JavaScript til dine header.php- eller footer.php-filer, bruger vi et plugin.

Jeg anbefaler WPCode – Indsæt sidehoveder og sidefødder + brugerdefinerede kodestykker plugin.

Type Indstillinger og Indsæt overskrifter og fodfødder menu.

Indsæt derefter din JavaScript-kode i sidefodsektionen på siden.

Gem dine ændringer, når du er færdig.

6. Tilføjelse af JavaScript til WordPress Video

WordPress er så udvidelig, at det giver dig mulighed for nemt at tilføje nye funktioner og funktioner til dit websted uden faktisk at skulle redesigne eller erstatte hele dit tema. I stedet for at genskabe WordPress-temaet fra bunden, kan du tilføje funktionaliteten ved blot at tilføje plugins.

Og hvis den funktionalitet, du gerne vil tilføje, er ret lille, og der ikke er behov for at oprette eller installere et plugin, kan du bruge funktioner.php-fil eller forskellige andre måder at tilføje Javascript til WordPress uden at skulle oprette et separat plugin.

Det bedste ved funktioner-fil er, at det fungerer som et plugin, der kan bruges til at tilføje funktioner og udvide funktionaliteten af ​​både temaet såvel som WordPress selv.

Selvom du nemt kan tilføje Javascript kode direkte til din header.php-fil, men der er et problem med denne metode.

Det kan faktisk forårsage konflikter med andre plugins, når de indlæser deres egne JS-scripts.

I denne artikel af CollectiveRay, tager vi et kig på den rigtige måde at tilføje javascript til WordPress -temaer. Som WordPress -udviklere er dette en af ​​de ting, vi bliver nødt til at gøre meget ofte.

(Særlig note: Leder du efter en liste over tweaks / tricks, du nemt kan lave på dit WordPress-websted uden at bruge et plugin? Du kan se vores guide her: 101 WordPress-tricks enhver seriøs blogger skal vide.)

7. Føj JavaScript til en WordPress-widget

Hvis du vil tilføje noget JavaScript til en WordPress-widget, kan det ikke være nemmere.

Tilføj en widget, vælg menuen og vælg Rediger som HTML.

Tilføj din JavaScript indeni tags and select Opdatering.

Den kode, du tilføjede, skulle være synlig med det samme, når du ser widgetten på forsiden af ​​dit websted.

Sådan fejlretter du en JavaScript-fejl på en WordPress-side

Fejlretning af JavaScript er en tidskrævende proces, men er uundgåelig for begyndere.

Heldigvis har du værktøjerne ved hånden til at tjekke for fejl.

Åbn en side i din browser og tryk på F12 eller vælg Udviklerværktøjer i menuen (Chrome). Du kan også bruge Ctrl + Shift + J (Windows/Linux) eller Cmd + Option + J (Mac).

Vælg Konsol fanen på den nye del af skærmen, der åbnes, og du vil se alle JavaScript-fejl fremhævet med rødt.

Identificer, hvor fejlen kommer fra, og ret den relevante del af det JavaScript, du tilføjede.

Arbejd dig igennem, indtil alle fejl er rettet.

WordPress har sin egen fejlretningstilstand, men det kan være lidt kompliceret at bruge. Jeg vil anbefale at tjekke ud officiel fejlfindingsside for mere information.

Ofte stillede spørgsmål om tilføjelse af Javascript til WordPress

Hvad er Javascript?

JavaScript er et computersprog, der udføres i brugerens browser i stedet for på din server. Programmering på klientsiden gør det muligt for udviklere at opnå en række interessante ting uden at bremse dit websted. Du kan ofte blive bedt om at kopiere og indsætte et JavaScript-kodestykke på dit WordPress-websted, hvis du ønsker at integrere en videoafspiller, tilføje lommeregnere eller en anden tredjepartstjeneste.

Hvordan tilføjer jeg en Javascript-fil til WordPress?

Kan jeg bruge Javascript i WordPress?

Ja, der er mange måder at bruge Javascript i WordPress. Hvis du vil tilføje et simpelt script, kan du bruge Insert WPCode-plugin'et til at tilføje scriptet til headeren, og derefter kalde scriptet fra den del af temaet, posten eller plugin'et, du skal bruge det fra.

Hvordan tilføjer jeg min egen kode til WordPress?

Den bedste måde at tilføje din egen kode til WordPress på er via functions.php-filen. Det anbefales, at du opretter et underordnet tema og derefter tilføjer dine egne ændringer til underordnet tema, så du ikke bryder opgraderbarheden af ​​dit tema.

Hvordan redigerer jeg Javascript i WordPress?

Den bedste måde at redigere Javascript på WordPress er ved at oprette et underordnet tema og derefter tilføje dine redigeringer af Javascript eller tilpasning af andre funktioner i underordnet tema. Dette giver dig mulighed for at redigere Javascript efter behov uden at bryde resten af ​​dit tema eller opgraderbarheden af ​​temaet.

Konklusion

Ovenstående tre metoder er den reneste måde at tilføje Javascript til WordPress. Generelt bør tweaking af koden direkte udføres af avancerede brugere, der har betydelig kodeoplevelse og kan være sikre på, at de ved, hvordan de skal tilbageføre de ændringer, de har foretaget. Ellers er det bedst at holde sig til plugins. Hvis du ikke har det godt med at tilpasse koden selv, ville det være dejligt at komme i kontakt med vores partnere på Fiverr, der kan få det gjort i dag

Klik her for at finde billige eksperter på WordPress-rettelser

Om forfatteren

Forfatter: David AttardInternet side: https://www.linkedin.com/in/dattard/E-mail: david@collectiveray.com

David har arbejdet i eller omkring online- og digitalindustrien i de sidste 21 år. Han har stor erfaring i software- og webdesignindustrien ved at bruge WordPress, Joomla og nicher omkring dem. Han har arbejdet med softwareudviklingsbureauer, internationale softwarevirksomheder, lokale marketingbureauer og er nu Head of Marketing Operations hos Aphex Media - et SEO-bureau. Som digital konsulent er hans fokus på at hjælpe virksomheder med at få en konkurrencefordel ved at bruge en kombination af deres hjemmeside og digitale platforme, der er tilgængelige i dag. Hans blanding af teknologisk ekspertise kombineret med et stærkt forretningssans giver hans forfatterskab en konkurrencefordel.