Sådan tilføjes Javascript (filer eller scripts) uden at bryde dit WordPress-websted (functions.php, skabelon eller plugin)

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 sikre dig, at du ikke tager fejl af det - fordi du kan ødelægge dit websted.

Der er en god måde at tilføje Javascript til WordPress. Og så er der de dårlige måder, som enten kan bryde dit websted eller ellers skabe en negativ indvirkning på ydeevnen.

I denne artikel vil vi foreslå en række forskellige måder til at tilføje Javascript-kode til websteder, og hvilke der skal bruges under de forskellige omstændigheder, du kan støde på.

 

 

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.

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

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

Hvis du ikke er sikker på at tilpasse koden selv, kan du se på denne artikel for at lære at rekruttere 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. Føj scriptet til en bestemt eller enkelt side efter eget valg eller flere sider ved hjælp af functions.php
  2. Tilføj et script til udvalgte sider ved hjælp af plugins som sidehoveder og sidefødder
  3. Føj en Javascript-fil til dit temahoved

1. 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:

Fw6VDOZYqrM

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

2. Brug af plugins

Hvis du blot vil bruge et plugin til at integrere en javascript-henvisning til WordPress-temas overskrift eller sidefodsfil, er plugin 'Insert Headers and Footers' en let mulighed.

Som navnet siger, giver det dig mulighed for at tilføje scripts til header- og footer-filerne ved at tilslutte dig wp_head og wp_footer WordPress-funktioner. 

Dette plugin er en god mulighed, fordi det giver dig mulighed for at tilføje ethvert script uden at løbe nogen risiko for at bryde ting. Desuden behøver du ikke selv at ændre eller tilpasse nogen kode (hvis du ikke har det godt), som vi var nødt til at gøre i det foregående eksempel.

Ændring af kode direkte er typisk en bedre mulighed for webdesignere. Metoden ved hjælp af dette plugin er lettere.

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 to muligheder:

  1. Tilføjelse af stien til en bestemt Javascript-fil, som du uploader
  2. Tilføjelse af scriptet direkte (f.eks. Til Analytics eller andre tredjeparts-scripts)

Lad os komme igang: 

Du kan download Indsæt sidehoveder og sidefødder her.

Installer pluginet:

  • Log ind på dit websteds backend eller administrator.
  • Gå til Plugins> Tilføj nyt
  • Søg efter "Headers and Footers" plugin, og klik på Installer nu.
  • Når det er installeret, skal du klikke på Aktivér
Headers og footers
Afhængigt af dit scenario skal du nu følge valgmulighed 1 eller 2. For at tilføje Google Analytics skal du f.eks. Følge valgmulighed 2.

Mulighed 1: Upload en brugerdefineret Javascript-fil

  • Først skal du forberede filen til inkludering
  • Gem din JavaScript-kode eller -fil i en ny testfil med . Js udvidelse.
  • Upload det til dit websted til følgende mappe: wp-indhold / temaer / / js /
  • Gå til Indstillinger> Indsæt sidehoveder og sidefødder.

Vi har nu et par valg til at indlæse vores fil:

  1. Skripter i overskrift (indlæses indeni tag)
  2. Skripter i bundfoden (ilæg inden lukning tag)

Brug det sted, der passer bedst til dine specifikke behov, ved hjælp af følgende som et eksempel. Noter det skal ændres til navnet på kataloget på det tema, du bruger, f.eks. tyveogtyve

/js/file.js">
 
Indsæt script i hovedet
  • Klik på knappen "Gem" for at afslutte og gemme.

Mulighed 2: Indlæs brugerdefineret script uden en fil

Den anden mulighed, du kan bruge med dette plugin, er muligheden for at tilføje koden direkte til WordPress uden brug af en bestemt fil.

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 Scripts i overskrift vindue:

tilføj script / kode direkte
 
Klik igen på "Gem" for at afslutte.

 

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.

 

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

fiverr logo

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

 

Hvis du fandt dette tip nyttigt, kan du tjekke flere af vores WordPress-tip i den relevante menu øverst på siden.

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.

" >Overskrift går her

 

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

101 WordPress-tricks

Klik her for at downloade nu
 

Ofte stillede spørgsmål

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

Den nemmeste måde at tilføje en Javascript-fil til WordPress på er at bruge plugin'en Insert Headers and Footers. 

  • Log ind på dit websteds, og installer plugin'en Headers and Footers.
  • 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 sidehoveder og sidefødder.
  • 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 på WordPress på. Hvis du vil tilføje et simpelt script, kan du bruge plugin'en Insert Headers and Footers til at føje scriptet til header og derefter ringe til scriptet fra hvilken del af temaet, indlægget eller pluginet du har brug for at 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 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 ...