Kuinka lisätä Javascript (tiedostot tai komentosarjat) rikkomatta WordPress-sivustoasi (functions.php, malli tai laajennus)

Lisää Javascript WordPressiin

Yleensä on monia syitä, miksi haluat lisätä Javascriptin WordPressiin, joko pienen muutoksen ominaisuuteen tai ehkä haluat lisätä kolmannen osapuolen komentosarjan. Terveisinless syystä, miksi haluat tehdä sen, haluat varmistaa, ettet ymmärrä väärin - koska saatat pilata verkkosivustosi.

On hyvä tapa lisätä Javascript WordPressiin. Ja sitten on olemassa huonoja tapoja, jotka voivat joko rikkoa verkkosivustosi tai muuten vaikuttaa negatiivisesti suorituskykyyn.

Tässä artikkelissa ehdotamme useita eri tapoja lisätä Javascript-koodi verkkosivustoille ja mitä niitä tulisi käyttää erilaisissa tilanteissa, joita saatat kohdata.

 

 

WordPress on niin laajennettavissa, että sen avulla voit helposti lisätä uusia ominaisuuksia ja toimintoja verkkosivustoosi ilman, että sinun tarvitsee itse suunnitella tai korvata koko teemaa. Sen sijaan, että luot WordPress-teeman uudelleen tyhjästä, voit lisätä toiminnallisuuden yksinkertaisesti lisäämällä laajennuksia.

Ja jos lisättävä toiminto on melko pieni eikä laajennusta tarvitse luoda tai asentaa, voit käyttää functions.php-tiedosto tai useita muita tapoja lisätä Javascript WordPressiin ilman erillisen laajennuksen luomista.

(Erityinen huomautus: Etsitkö luetteloa muokkauksista / temppuista, joita voit helposti tehdä WordPress-sivustollasi ilman laajennusta? Voit tutustua oppaaseen täällä: 101 WordPress-temppua jokaisen vakavan bloggaajan on tiedettävä.)

Parasta siitä toimintotiedosto on, että se toimii kuin laajennus, jota voidaan käyttää sekä teeman että itse WordPressin ominaisuuksien lisäämiseen ja laajentamiseen.

Vaikka voit helposti lisätä Javascript-koodi suoraan omaan header.php-tiedosto, tässä menetelmässä on ongelma.

Se voi itse asiassa aiheuttaa ristiriitoja muiden laajennusten kanssa, kun he lataavat omat JS-komentosarjansa.

Tässä artikkelissa CollectiveRay, katsomme oikeaa tapaa lisätä javascript WordPress -teemoihin. WordPress -kehittäjinä tämä on yksi niistä asioista, jotka meidän on tehtävä hyvin usein.

Jos et ole varma koodin muokkaamisesta itse, saatat haluta tutustua tähän artikkeliin oppiaksesi rekrytoimaan yrityksellesi parhaan WordPress-kehittäjän: https://www.collectiveray.com/wordpress-developers-for-hiretai tutustu seuraaviin halpojen kehitysvaihtoehtojen kanssa. 

Jos et ole varma siitä, sopiiko tämä sinulle ja mitä tehdä tämä nopeasti, tutustu muutamaan Fiverr-keikkaan, jotka voivat tehdä sen sinulle nopeasti

fiverr-logo

Napsauttamalla tätä löydät edullisia asiantuntijoita WordPress-korjauksista

 

Kuinka lisätä JavaScript WordPressiin

On olemassa useita tapoja lisätä mukautettua Javascript-koodia WordPress-sivustoosi, joista jokaisella on oma käyttötarkoituksensa:

  1. Lisää komentosarja valitsemallesi tietylle tai yhdelle sivulle tai useille sivuille funktioiden.php avulla
  2. Lisää komentosarja valituille sivuille käyttämällä laajennuksia, kuten Otsikot ja alatunnisteet
  3. Lisää Javascript-tiedosto teeman otsikkoon

1. Funktioiden käyttäminen. Php

Yksittäinen sivu tai viesti

Tämä koodin muutos käyttää tehtävät mallikansiostasi löytyvä tiedosto lisätäksesi valitsemasi .JS-tiedoston vain yhdelle valitsemallesi sivulle.

Tämä käyttää IS_PAGE-toimintoa, jonka löydät täältä: https://developer.wordpress.org/themes/basics/conditional-tags/. Voit itse käyttää useita muita vaihtoehtoja, jos haluat lisätä komentosarjan vain tietyissä olosuhteissa, kuten:

  • is_single(),
  • is_front_page(),
  • is_home,
  • is_admin ja niin edelleen 

Jos haluat katsella videota YouTubessa, miten tämä tehdään, tämä lyhyt video on varsin hyvä video siitä, kuinka lisätä Javascript yhdelle sivulle:

Fw6VDOZYqrM

Sivulla on yksityiskohtaiset ohjeet, joten kun olet nähnyt videon, voit käyttää tätä artikkelia viitteenä.

Jos haluat lisätä tiedoston kaikille sivuille, jatka vierittämistä löytääksesi muita vaihtoehtoja tälle menetelmälle alla.

  • Ensin sinun on tunnistettava sen sivun tunnus, jolle haluat lisätä komentosarjan. Teet tämän siirtymällä sivulle, johon haluat lisätä tiedoston, napsauta muokata ja noudata sitten sivun tunnus URL-osoitteesta, kuten alla näkyy. Tunnus on numero, joka löytyy selainpalkin URL-osoitteesta.
  • wordpress-sivun tunnus

  • Nyt kun sinulla on sivun tunnus, sinun on ladattava .js-tiedosto sijaintiin. Suosittelemme, että lataat .js-tiedoston mallikansioon, ehkä alihakemistoon.
  • Kun olet ladannut sen, sinun on otettava huomioon tarkalleen hakemisto ja .JS-tiedoston nimi, jota käytämme alla olevan PATH_TO_JS_FILE-sijasta. Esimerkiksi tiedostosi voi olla: https://www.yourwebsite.com/wp-content/themes/twentynineteen/js/myjsfile.js
  • Huomioi koko URL-osoite kokonaan ja korvaa alla oleva PATH_T_JS_FILE. Sinun on myös korvattava ylhäältä löytämäsi henkilötodistus.
  • Lisää koko koodi alla olevan koodin loppuun tehtävät tiedosto mallistasi.

toiminto collectiveray_load_js_script () {
  if (is_page (ID)) {
    wp_enqueue_script ('js-tiedosto', 'PATH_TO_JS_FILE', taulukko ('jquery'), '', väärä);
    // tai käytä alla olevaa versiota, jos tiedät tarkalleen tiedoston sijainnin
    // wp_enqueue_script ('js-tiedosto', get_template_directory_uri (). '/js/myscript.js');
  }
}

add_action ('wp_enqueue_scripts', 'collectiveray_load_js_script ');

Jos tiedät tarkalleen, mihin JS-tiedosto on sijoitettu, voit käyttää pientä muunnosta wp_enqueue_script: 

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

Tässä tapauksessa /js/mysript.js-tiedosto on lisättävän tiedoston sijainti.

Kun lataat sivun uudelleen, huomaat, että tiedosto on lisätty. Voit vahvistaa tämän napsauttamalla Näytä sivun lähde.

Jos sen sijaan, että haluat lisätä Javascript-tiedoston sivulle, haluat lisätä sen yhdelle sivulle, voimme käyttää tätä toimintoa hieman säätämällä sitä sovellettavaksi yhteen viestiin. Voit käyttää mitä tahansa muunnosta seuraavista:

  • is_single ('17') - käyttää postitunnusta
  • is_single ('Viestini otsikko') - tarkistaa viestin otsikon avulla, onko tämä viesti, johon tiedosto lisätään
  • is_single ('my-post-title') - tarkastukset postin etanaa vastaan
  • is_single (taulukko (17, 'minun postini otsikko', 'Oma postini otsikko')) - tämä tarkistaa, onko jokin ehdoista post ID: ssä "17", etana on "my-post-title" tai otsikko "My post title"
  • is_single () - muut is_single-funktion muunnelmat käyttämällä arvoryhmää tarkistamiseksi

Koodi olisi tässä tapauksessa seuraava tai pieni vaihtelu funktion is_single parametreista riippuen. 

toiminto collectiveray_load_js_script () {
  if (is_single ('17 ')) {
    wp_enqueue_script ('js-tiedosto', 'PATH_TO_JS_FILE', taulukko ('jquery'), '', väärä);
    // tai käytä alla olevaa versiota, jos tiedät tarkalleen tiedoston sijainnin
    // wp_enqueue_script ('js-tiedosto', get_template_directory_uri (). '/js/myscript.js');
  } 
}

add_action ('wp_enqueue_scripts', 'collectiveray_load_js_script ');

Jos sinulla on viestin otsikko, voit käyttää sitä parametrin "17" sijaan. Jälleen kerran wp_enqueue_script voidaan myös säätää:

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

Lisää Javascript kaikille sivuille 

Kuten olemme nähneet, helpoin ja puhtain tapa lisätä javascript-tiedosto WordPress-teemaan on käyttämällä functions.php tiedoston kanssa wp_enqueue_script. Tässä tapauksessa sen sijaan, että luomme ehdon lisätä sisältöä tietyille sivuille, lisätään yleinen toiminto.

Näin voit tehdä sen:

Avaa sinun functions.php tiedosto ja kopioi alla oleva koodinpätkä siihen. Muista korvata mallin URL-osoite omalla ennen tallennusta.

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

Jos olet käyttämällä lapsiteemaa, sinun on käytettävä get_stylesheet_directory_uri () sijaan get_template_directory_uri () 

2. Lisäosien käyttäminen

Jos haluat yksinkertaisesti käyttää laajennusta Javascript-viittauksen upottamiseen WordPress-teeman otsikko- tai alatunnistetiedostoon, Lisää otsikot ja alatunnisteet -laajennus on helppo vaihtoehto.

Kuten nimestä käy ilmi, sen avulla voit lisätä komentosarjoja otsikko- ja alatunnistetiedostoihin kytkemällä ne wp_head että wp_footer WordPressin toiminnot. 

Tämä laajennus on hyvä vaihtoehto, koska sen avulla voit lisätä minkä tahansa komentosarjan ilman vaaraa rikkoa tavaraa. Lisäksi sinun ei tarvitse muuttaa tai säätää mitään koodia itse (jos et ole tyytyväinen tekemään sitä), kuten meidän oli tehtävä edellisessä esimerkissä.

Koodin vaihtaminen suoraan on yleensä parempi vaihtoehto verkkosuunnittelijoille. Tämän laajennuksen käyttäminen on helpompaa.

Sen sijaan, että teeman tiedostoja muokattaisiin suoraan mukautetulla Javascript-koodilla, laajennuksen avulla voit lisätä koodin, joka lisätään sitten sivustosi otsikkoon tai alatunnisteeseen valitsemiesi vaihtoehtojen mukaan. 

Tämä laajennus tukee kahta vaihtoehtoa:

  1. Polun lisääminen tiettyyn lataamaasi Javascript-tiedostoon
  2. Komentosarjan lisääminen suoraan (esim. Analyticsille tai muille kolmannen osapuolen komentosarjoille)

Aloitetaan: 

Sinä pystyt Lataa Lisää otsikot ja alatunnisteet tästä.

Asenna laajennus:

  • Kirjaudu sisään sivustosi backendiin tai järjestelmänvalvojaan.
  • Valitse Laajennukset> Lisää uusi
  • Etsi "Otsikot ja alatunnisteet" -laajennus ja napsauta Asenna nyt.
  • Kun se on asennettu, napsauta Aktivoi
Yläosat ja alatunnisteet
Skenaariosta riippuen sinun on nyt noudatettava vaihtoehtoa 1 tai 2. Esimerkiksi, jos haluat lisätä Google Analyticsin, sinun on noudatettava vaihtoehtoa 2.

Vaihtoehto 1: Lataa mukautettu Javascript-tiedosto

  • Ensin sinun on valmisteltava tiedosto sisällytettäväksi
  • Tallenna JavaScript-koodi tai tiedosto uuteen testitiedostoon . Js laajennus.
  • Lataa se sivustollesi seuraavaan kansioon: wp-content / themes / / js /
  • Valitse Asetukset> Lisää otsikot ja alatunnisteet.

Meillä on nyt muutama vaihtoehto ladata tiedosto:

  1. Komentosarjat otsikossa (lataa sisälle tag)
  2. Komentosarjat alatunnisteessa (lataa ennen sulkemista tag)

Käytä sijaintia, joka vastaa parhaiten erityistarpeitasi, käyttämällä seuraavaa esimerkkinä. Ota huomioon, että on vaihdettava käyttämäsi teeman hakemiston nimeksi, esim. kaksikymmentä

/js/file.js">
 
Lisää komentosarja päähän
  • Viimeistele ja tallenna napsauttamalla Tallenna-painiketta.

Vaihtoehto 2: Lataa mukautettu komentosarja ilman tiedostoa

Toinen vaihtoehto, jota voit käyttää tämän laajennuksen kanssa, on mahdollisuus lisätä koodi suoraan WordPressiin tarvitsematta käyttää tiettyä tiedostoa.

Tätä voidaan käyttää, kun käytät kolmannen osapuolen palvelua, kuten Google Analyticsia, Dripiä tai muuta työkalua, joka tarvitsee lisätä komentosarjan sivustoosi. Ota vain komentosarja ja pudota se Komentosarjat otsikossa ikkuna:

lisää komentosarja / koodi suoraan
 
Napsauta vielä kerran "Tallenna" lopettaaksesi.

 

Lataa käyttöliittymä uudelleen ja tarkista verkkosivustosi lähde varmistaaksesi, että koodi näkyy nyt. On myös hyvä selata muutama sivu vahvistaa, että kaikki toimii edelleen hyvin.

 

Vaikka tämä tuntuu melko yksinkertaiselta, se saattaa olla mukavuusvyöhykkeeltäsi, joten jos haluat tehdä tämän nopeasti, tutustu joihinkin Fiverrin kehittäjiin, jotka voivat tehdä sen sinulle.

fiverr-logo

Napsauttamalla tätä löydät edullisia asiantuntijoita WordPress-korjauksista

 

Jos pidit tästä vinkistä hyödyllistä, saatat haluta tarkistaa lisää WordPress-vinkkejä asiaankuuluvasta valikosta sivun yläosassa.

3. Lisää JavaScript teeman otsikkoon

Joissakin tapauksissa saatat haluta, että JavaScript-tiedostoa käytetään koko sivustossasi, mutta et halua käyttää laajennusta tähän.

Esimerkiksi, jos haluat lisätä kolmannen osapuolen komentosarjan kaikille sivuillesi (esim. Instantpage.js-komentosarja verkkosivustosi nopeuttamiseksi), voit lisätä komentosarjan tai lisätä itse viitatun komentotiedoston head oman header.php mallitiedosto. 

TÄMÄ EI OLE IDEALISTA. Jos päivität teeman, saatat menettää nämä muutokset. Jos haluat silti tehdä tämän suoraan, on erittäin suositeltavaa luoda lapsiteema.

Tässä skenaariossa, jos haluat tämän komentosarjan lisäämisen kaikkialle, voit lisätä tiedoston suoraan malliin alla olevien ohjeiden mukaisesti:

Tämä kutsu tiedostoon (tai komentosarjaan) tulisi lisätä sisällönkuvauskenttien ja tyylitaulukon väliin. Tämä on täsmälleen sama kuin jos lisäät Javascript-koodin mille tahansa HTML-sivulle. 

Jos haluat "lisätä" Javascript-tiedoston sivustoosi, head, käytät seuraavaa koodia:


Varmista, että olet määrittänyt type oikein, muuten sivustosi ei ole kelvollinen. Varmista myös, että hakemistossa / skripteissä on teema ja olet lisännyt siihen myscript.js.

Tämän jälkeen voit lisätä viittauksia funktioihin, jotka olet juuri lisännyt HTML-tiedostoon, missä sinun on käytettävä sitä. 

Tämä on esimerkki juuri lisäämäsi toiminnon käytöstä.

" >Otsikko menee tänne

 

Lataa luettelo 101 WordPress-temppusta, jonka jokaisen bloggaajan tulisi tietää

101 WordPress-temppua

Napsauta tätä ja lataa nyt
 

Usein kysytyt kysymykset

Kuinka voin lisätä Javascript-tiedoston WordPressiin?

Helpoin tapa lisätä Javascript-tiedosto WordPressiin on käyttää Lisää otsikot ja alatunnisteet -laajennusta. 

  • Kirjaudu sisään sivustosi ja asenna Otsikot ja alatunnisteet -laajennus.
  • Kun se on asennettu, napsauta Aktivoi
  • Tallenna JavaScript-koodi tai tiedosto uuteen tiedostoon . Js laajennus.
  • Lataa se sivustollesi seuraavaan kansioon: wp-content / themes / / js /
  • Valitse Asetukset> Lisää otsikot ja alatunnisteet.
  • Lisää seuraava Otsikon komentosarjoihin:  <script src="https://www.website.com/wp-content/themes/<theme-you-are-using>/js/file.js"></script>

 

Voinko käyttää Javascriptia WordPressissä?

Kyllä, on monia tapoja käyttää Javascriptiä WordPressissä. Jos haluat lisätä yksinkertaisen komentosarjan, voit lisätä komentosarjan otsikkoon Lisää otsikot ja alatunnisteet -lisäosan avulla ja kutsua sitten komentosarjan mistä tahansa teeman, viestin tai laajennuksen osasta, josta sitä haluat käyttää.

Kuinka voin lisätä oman koodini WordPressiin?

Paras tapa lisätä oma koodi WordPressiin on files.php-tiedosto. On suositeltavaa, että luot lapsiteeman ja lisäät sitten omat muokkauksesi lapsiteemaan siten, että et hajota teeman päivitettävyyttä.

Kuinka muokkaan Javascriptia WordPressissä?

Paras tapa muokata Javascriptia WordPressissä on luoda lapsiteema ja lisätä sitten muokkauksesi Javascriptiin tai mukauttaa muita toimintoja aliteemassa. Tämän avulla voit muokata Javascriptia tarpeen mukaan rikkomatta loppuasi teemaa tai teeman päivitettävyyttä.

Yhteenveto

Edellä mainitut kolme menetelmää ovat puhtain tapa lisätä Javascript WordPressiin. Yleensä koodin muokkaamisen tulisi tehdä edistyneille käyttäjille, joilla on merkittävä kokemus koodista ja jotka voivat olla varmoja tietävänsä, miten he voivat palauttaa tekemänsä muutokset. Muussa tapauksessa on parasta pitää kiinni laajennuksista. Jos et ole mukava säätää koodia itse, olisi hienoa ottaa yhteyttä Fiverrin kumppaneihimme, jotka voivat tehdä sen tänään

fiverr-logo

Napsauttamalla tätä löydät edullisia asiantuntijoita WordPress-korjauksista

 

kirjailijasta
David Attard
Kirjoittaja: David AttardVerkkosivu: https://www.linkedin.com/in/dattard/
David on työskennellyt verkko- / digitaalialalla tai sen ympäristössä viimeiset 18 vuotta. Hänellä on laaja kokemus ohjelmisto- ja verkkosuunnitteluteollisuudesta WordPressin, Joomlan ja niitä ympäröivien markkinarakojen käytöstä. Digitaalisena konsulttina hän keskittyy auttamaan yrityksiä saamaan kilpailuetua käyttämällä verkkosivustonsa ja tänään saatavilla olevien digitaalisten alustojen yhdistelmää.

Yksi asia vielä... Tiesitkö, että ihmiset, jotka jakavat hyödyllisiä juttuja, kuten tämä viesti, näyttävät myös mahtavilta? ;-)
Ole hyvä Jätä hyödyllinen kommentoi ajatuksiasi ja jaa tämä sitten Facebook-ryhmissäsi (ryhmissä), jotka pitävät tätä hyödyllisenä, ja hyödynnetään yhdessä. Kiitos jakamisesta ja mukavuudesta!

Disclosure: Tämä sivu voi sisältää linkkejä ulkoisille sivustoille tuotteille, joita rakastamme ja kannatamme sydämestämme. Jos ostat suosittelemiamme tuotteita, saatamme ansaita viittausmaksun. Tällaiset maksut eivät vaikuta suosituksiimme, emmekä hyväksy maksuja positiivisista arvosteluista.

Kirjoittaja (t) esillä:  Inc-lehden logo   Sitepoint-logo   CSS Tricks -logo    webdesignerdepot-logo   WPMU DEV -logo   ja paljon muuta ...