Føj Javascript til WordPress-webstedet - 3 nemme måder (indlæg/sider)

Føj Javascript til WordPress

Der er typisk mange grunde til, at du vil tilføje Javascript til WordPress, enten en lille tweak til en funktion, eller måske ønsker du at tilføje et tredjeparts script. Henvisningless 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å at justere koden selv, vil du måske se på denne artikel for at lære, hvordan du rekrutterer den bedste WordPress-udvikler til din virksomhed: https://www.collectiveray.com/wordpress-developers-for-hire, eller find ud af 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

fiverr logo

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

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. Føj en Javascript-fil til dit temahoved

Lad os gennemgå hver af disse metoder i detaljer.

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.

Som navnet siger, giver det dig mulighed for at tilføje små stykker kode, såsom scripts, til sidehoved- og sidefodsfilerne, hvor de ofte skal være. 

I stedet for at ændre temaets filer direkte med den brugerdefinerede Javascript-kode giver pluginet dig mulighed for at indsætte koden, som derefter føjes til sidehovedet eller sidefoden på dit websted, afhængigt af de valg, 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 nyt
  • Søg efter "WPCode" plugin og klik på Installer nu.
  • Når det er installeret, skal du klikke på Aktivér

installere wpcode

 

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:

tilføjer javascript-kode til wordpress header

Klik på "Gem ændringer" for at afslutte.

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 Kodestykker > Tilføj kodestykke og derefter vælge 'Opret dit eget'.

tilføje din brugerdefinerede kode

Du vil nu blive ført til en 'Create Custom Snippet'-side, hvor du kan give din kode en titel og indsætte den i 'Code Preview'-boksen.

opret brugerdefineret javascript-kodestykke

Vælg derefter 'JavaScript Snippet' fra rullemenuen 'Kodetype'.

javascript uddrag

Derefter skal du blot rulle ned, indtil du når 'Indsættelse'-området.

Det eneste, der er tilbage, er at vælge en 'Location' for koden fra rullemenuen. Find 'Side, indlæg, brugerdefineret indlægstype' 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 øverst på skærmen til 'Aktiv' og derefter klikke på 'Gem uddrag'-indstillingen ved siden af.

Det er alt, der skal til for at få din kodeprøve online!

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.

fiverr logo

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

 

2. Brug af functions.php

Enkeltside eller post

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-funktionen, som du kan finde her: https://developer.wordpress.org/themes/basics/conditional-tags/. Du kan faktisk bruge forskellige andre muligheder, hvis du kun vil tilføje scriptet under bestemte forhold, såsom:

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

Hvis du foretrækker at se en video på YouTube om, hvordan du gør dette, er denne korte video ganske god, hvordan du tilføjer Javascript til en enkelt side:

Vi har detaljerede instruktioner på siden, så når du har set videoen, kan du bruge denne artikel som din reference.

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. Du gør dette ved at gå til siden, du vil føje filen til, klikke på 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.

wordpress side-id

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

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 vil vi i stedet for at oprette en betingelse for at tilføje indholdet til bestemte sider 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.

fiverr logo

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

3. 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 tredjeparts script på 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 IDEALT. Hvis du opdaterer dit tema, mister du muligvis disse ændringer. Hvis du stadig 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

 

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.

Download listen over 101 WordPress-tricks, som enhver blogger skal kende

101 WordPress-tricks

Klik her for at downloade nu

Tilføjelse af Javascript til WordPress Video

Vil du se, hvordan du tilføjer Javascript til WordPress på en YouTube-video? Dette er et godt ur:

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

Ofte stillede spørgsmål

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?

Den nemmeste måde at tilføje en Javascript-fil til WordPress er at bruge Insert WPCode plugin. 

  • Log ind på dit websted og installer WPCode plugin.
  • Når det er installeret, skal du klikke på Aktivér
  • Gem din JavaScript-kode eller -fil i en ny fil med . Js udvidelse.
  • Upload det til dit websted til følgende mappe: wp-indhold / temaer / / js /
  • Gå til Indstillinger > Indsæt WPCode
  • Føj følgende til Scripts in Header:  <script src="https://www.website.com/wp-content/themes/<theme-you-are-using>/js/file.js"></script>

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

fiverr logo

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

 

Om forfatteren
David Attard
Forfatter: David AttardInternet side: https://www.linkedin.com/in/dattard/
David har arbejdet i eller omkring online / digital industri i de sidste 18 år. Han har stor erfaring inden for software- og webdesignindustrien ved hjælp af WordPress, Joomla og nicher, der omgiver dem. Som digital konsulent er hans fokus på at hjælpe virksomheder med at få en konkurrencemæssig fordel ved hjælp af en kombination af deres hjemmeside og digitale platforme, der er tilgængelige i dag.

En ting mere... Vidste du, at folk, der deler nyttige ting som dette indlæg, også ser FANTASTISKE ud? ;-)
Vær venlig at forlade a nyttigt kommenter med dine tanker, så del dette på din Facebook-gruppe (r), der ville finde det nyttigt, og lad os høste fordelene sammen. Tak fordi du delte og var god!

Afsløring: Denne side kan indeholde links til eksterne websteder for produkter, som vi elsker og helhjertet anbefaler. Hvis du køber produkter, vi foreslår, tjener vi muligvis et henvisningsgebyr. Sådanne gebyrer påvirker ikke vores anbefalinger, og vi accepterer ikke betalinger for positive anmeldelser.

Forfatter (e) Fremhævet den:  Inc Magazine-logo   Sitepoint-logo   CSS Tricks-logo    webdesignerdepot logo   WPMU DEV-logo   og mange flere ...