Hvernig á að bæta við Javascript (skrár eða forskriftir) án þess að brjóta WordPress vefsíðuna þína (functions.php, sniðmát eða viðbót)

Bættu Javascript við WordPress

Það eru venjulega margar ástæður fyrir því að þú vilt bæta Javascript við WordPress, annaðhvort smá klip í eiginleika eða kannski að þú viljir bæta við þriðja aðila handriti. Álitless af ástæðunni fyrir því að þú vilt gera það, viltu ganga úr skugga um að þú hafir ekki rangt fyrir þér - því þú gætir eyðilagt vefsíðuna þína.

Það er góð leið til að bæta Javascript við WordPress. Og svo eru slæmu leiðirnar, sem annað hvort geta brotið vefsíðu þína eða annars haft neikvæð áhrif á árangur.

Í þessari grein munum við leggja til fjölda mismunandi leiða til að bæta Javascript kóða við vefsíður og hverjar ætti að nota við mismunandi aðstæður sem þú gætir lent í.

 

 

WordPress er svo teygjanlegt að það gerir þér kleift að bæta auðveldlega við nýjum eiginleikum og virkni á vefsíðuna þína án þess að þurfa í raun að endurhanna eða skipta um allt þemað. Frekar en að endurskapa WordPress þema frá grunni, getur þú bætt við virkni með því einfaldlega að bæta við viðbótum.

Og ef virkni sem þú vilt bæta við er frekar lítil og það er engin þörf á að búa til eða setja upp viðbót, getur þú notað functions.php skrá eða ýmsar aðrar leiðir til að bæta Javascript við WordPress án þess að þurfa að búa til sérstakt viðbót.

(Sérstök athugasemd: Ertu að leita að lista yfir klip / brellur sem þú getur auðveldlega búið til á WordPress síðunni þinni án þess að nota viðbót? Þú getur vísað leiðarvísinum okkar hér: 101 WordPress brellur sem allir alvarlegir bloggarar verða að vita.)

Það besta við aðgerðarskrá er að það virkar eins og viðbót, sem hægt er að nota til að bæta við eiginleikum og auka virkni bæði þemans sem og WordPress sjálfs.

Þó að þú getir auðveldlega bætt við Javascript kóði beint til þín header.php skrá, það er vandamál með þessa aðferð.

Það getur í raun valdið átökum við önnur viðbætur þegar þau hlaða eigin JS forskriftir.

Í þessari grein eftir CollectiveRay, við skoðum réttu leiðina til að bæta javascript við WordPress þemu. Sem WordPress verktaki er þetta eitt af því sem við þurfum að gera mjög oft.

Ef þú ert ekki öruggur um að laga kóðann sjálfur gætirðu viljað skoða þessa grein til að læra hvernig á að ráða besta WordPress verktaki fyrir fyrirtæki þitt: https://www.collectiveray.com/wordpress-developers-for-hire, eða finndu skoðaðu eftirfarandi ódýra þróunarmöguleika. 

Ef þú ert ekki viss um hvort þetta henti þér og hvað eigi að fá þetta hratt, skoðaðu nokkur Fiverr tónleika sem geta gert þetta fljótt fyrir þig

fiverr merki

Smelltu hér til að finna ódýra sérfræðinga um WordPress lagfæringar

 

Hvernig á að bæta JavaScript við WordPress

Það eru margar leiðir til að bæta sérsniðnum Javascript kóða við WordPress síðuna þína, hver með sína notkun:

  1. Bættu handritinu við ákveðna eða staka síðu að eigin vali, eða margar síður með því að nota functions.php
  2. Bættu handriti við á völdum síðum með því að nota viðbætur eins og haus og fót
  3. Bættu Javascript skrá við þemahausinn þinn

1. Að nota aðgerðir.php

Stak síða eða færsla

Þessi kóða klip mun nota aðgerðir skrá sem er að finna í sniðmátamöppunni þinni til að bæta við .JS skrá að eigin vali á einni síðu að eigin vali.

Þetta notar IS_PAGE aðgerðina sem þú getur fundið hér: https://developer.wordpress.org/themes/basics/conditional-tags/. Þú getur raunverulega notað ýmsa aðra valkosti ef þú vilt aðeins bæta við handritinu við sérstakar aðstæður eins og:

  • is_single(),
  • is_front_page(),
  • is_home,
  • is_admin o.fl. 

Ef þú vilt horfa á myndband á YouTube um hvernig á að gera þetta, þá er þetta stutta myndband alveg ágætt, um hvernig á að bæta Javascript við eina síðu:

Fw6VDOZYqrM

Við höfum nákvæmar leiðbeiningar á síðunni, svo þegar þú hefur séð myndbandið geturðu notað þessa grein til viðmiðunar.

Ef þú þarft að bæta skránni við allar síður skaltu halda áfram að fletta til að finna aðra valkosti við þessa aðferð hér að neðan.

  • Í fyrsta lagi þarftu að bera kennsl á auðkenni síðunnar sem þú vilt bæta handritinu við. Þú gerir þetta með því að fara á síðuna, þú vilt bæta skránni við, smelltu á Breyta og sóttu síðan auðkenni síðunnar af slóðinni eins og sjá má hér að neðan. Auðkenni er númerið sem er að finna í vefslóð vafrastikunnar.
  • auðkenni wordpress síðu

  • Nú þegar þú ert með auðkenni síðunnar þarftu að hlaða .js skránni á staðsetningu. Við mælum með því að þú sendir .js skrána í sniðmátamöppuna þína, kannski í barnaskrána.
  • Þegar þú hefur hlaðið því inn þarftu að taka nákvæmlega mark á skráasafninu og nafninu á .JS skránni, sem við notum í stað PATH_TO_JS_FILE hér að neðan. Sem dæmi gæti skráin þín verið í: https://www.yourwebsite.com/wp-content/themes/twentynineteen/js/myjsfile.js
  • Taktu fulla athugasemd við alla slóðina og skiptu um PATH_T_JS_FILE hér að neðan. Þú verður einnig að skipta um skilríki sem þú hefur fundið að ofan.
  • Bættu við kóðanum að neðan til loka aðgerðir skrá af sniðmátinu þínu.

virka collectiveray_load_js_script () {
  ef (is_page (ID)) {
    wp_enqueue_script ('js-file', 'PATH_TO_JS_FILE', array ('jquery'), '', false);
    // eða notaðu útgáfuna hér að neðan ef þú veist nákvæmlega hvar skráin er
    // wp_enqueue_script ('js-file', get_template_directory_uri (). '/js/myscript.js');
  }
}

add_action ('wp_enqueue_scripts', 'collectiveray_load_js_script ');

Ef þú veist nákvæmlega hvar þú hefur sett JS skrána, getur þú notað smá afbrigði af wp_enqueue_script: 

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

Í þessu tilfelli er /js/mysript.js skráin staðsetning skrárinnar sem þú vilt bæta við.

Þegar þú hefur endurhlaðið síðuna finnurðu að skránni hefur verið bætt við. Þú getur staðfest þetta með því að smella á View Source af síðunni.

Ef í stað þess að bæta Javascript skránni við síðu, viltu bæta henni við eina síðu, getum við notað smá klip af þessari aðgerð til að láta hana gilda um eina færslu. Þú getur notað hvaða afbrigði sem er af eftirfarandi:

  • er_single ('17') - notar færsluskilríkin
  • is_single ('Titill færslunnar') - notar titilinn á færslunni til að athuga hvort þetta sé færslan til að bæta skránni við
  • is_single ('minn-eftir-titill') - tékkar á móti snigli póstsins
  • is_single (array (17, 'my-post-title', 'My Post Title')) - þetta athugar hvort einhver skilyrðin eftir skilríkjum „17“, slug er „mitt-eftir-titill“ eða titill er „Mitt innleggstitill“
  • er_single () - önnur afbrigði af is_single aðgerðinni með því að nota fylki af gildum til að athuga með

Kóðinn, í þessu tilfelli, væri eftirfarandi eða lítil breyting eftir breytum is_single aðgerðarinnar. 

virka collectiveray_load_js_script () {
  ef (er_single ('17 ')) {
    wp_enqueue_script ('js-file', 'PATH_TO_JS_FILE', array ('jquery'), '', false);
    // eða notaðu útgáfuna hér að neðan ef þú veist nákvæmlega hvar skráin er
    // wp_enqueue_script ('js-file', get_template_directory_uri (). '/js/myscript.js');
  } 
}

add_action ('wp_enqueue_scripts', 'collectiveray_load_js_script ');

Ef þú ert með titilinn á færslunni geturðu notað þetta í stað breytunnar „17“. Enn og aftur er einnig hægt að laga wp_enqueue_script til:

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

Bættu Javascript við allar síður 

Eins og við höfum séð er auðveldasta og hreinasta aðferðin til að bæta javascript skrá við WordPress þema þitt með því að nota functions.php skrá með wp_enqueue_script. Í þessu tilfelli, í stað þess að búa til skilyrði til að bæta innihaldinu við tilteknar síður, ætlum við að bæta við almennri aðgerð.

Hér er hvernig á að gera það:

Opnaðu functions.php skrá og afritaðu kóðann hér að neðan til þess. Vertu viss um að skipta um vefslóð sniðmátsins fyrir þína áður en þú vistar.

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

Ef þú ert með barnþema, þú þarft að nota get_styleheet_directory_uri () í stað get_template_directory_uri () 

2. Notkun viðbóta

Ef þú vilt einfaldlega nota tappi til að fella JavaScript tilvísun í haus eða fótfótaskrá WordPress þemans, þá er „Bæta við hausum og fótum“ tappi auðveldur kostur.

Eins og nafnið segir gerir það þér kleift að bæta við forskriftir í haus- og fótaskrárnar með því að krækja í wp_head og wp_footer aðgerðir WordPress. 

Þessi viðbót er góður kostur vegna þess að það gerir þér kleift að bæta við hvaða handriti sem er án þess að eiga á hættu að brjóta efni. Þar að auki þarftu ekki að breyta eða breyta einhverjum kóða sjálfur (ef þér líður ekki vel með það), eins og við þurftum að gera í fyrra dæminu.

Að breyta kóða beint er yfirleitt betri kostur fyrir vefhönnuði. Aðferðin með því að nota þessa viðbót er auðveldari.

Í stað þess að breyta skrám þemans beint með sérsniðna Javascript kóðanum, gerir viðbótin þér kleift að setja inn kóðann, sem verður síðan bætt við haus eða fót á síðuna þína, allt eftir því hvaða valkostir þú hefur valið. 

Þetta tappi styður tvo möguleika:

  1. Bætir slóðinni við ákveðna Javascript skrá sem þú hleður upp
  2. Bæti handritinu beint við (t.d. fyrir Analytics eða önnur skrift frá þriðja aðila)

Byrjum: 

Þú getur halaðu niður Settu haus og fót hér.

Settu viðbótina upp:

  • Skráðu þig inn í bakenda eða stjórnanda vefsvæðisins.
  • Farðu í viðbætur> Bæta við nýjum
  • Leitaðu að „hausum og fótum“ tappanum og smelltu á Install Now.
  • Þegar það hefur verið sett upp skaltu smella á Virkja
Fyrirsagnir og fótar
Það fer eftir atburðarás þinni, þú þarft nú að fylgja valkosti 1 eða 2. Til dæmis, til að bæta við Google Analytics þarftu að fylgja valkosti 2.

Valkostur 1: Sendu upp sérsniðna Javascript-skrá

  • Í fyrsta lagi þarftu að undirbúa skrána fyrir opnun
  • Vistaðu JavaScript kóðann þinn eða skrána í nýja prófunarskrá með JavaScript útlit framlenging.
  • Settu það inn á síðuna þína í eftirfarandi möppu: wp-content / þemu / / js /
  • Farðu í Stillingar> Settu haus og fót.

Við höfum nú nokkra möguleika til að hlaða skránni okkar:

  1. Handrit í haus (hlaða inn tag)
  2. Handrit í fótfóðri (hlaðið fyrir lokun tag)

Notaðu staðsetninguna sem passar best við sérstakar þarfir þínar og notaðu eftirfarandi sem dæmi. Athugaðu að þarf að breyta í heiti skráasafns þemans sem þú ert að nota, td tuttugu og tuttugu

/js/file.js">
 
Settu handrit í höfuðið
  • Smelltu á hnappinn „Vista“ til að klára og vista.

Valkostur 2: Hlaðið sérsniðnu handriti án skráar

2. valkosturinn sem þú getur notað með þessu tappi, er möguleikinn á að bæta kóðanum beint við WordPress án þess að þurfa að nota tiltekna skrá.

Þetta er hægt að nota þegar þú ert að nota þjónustu frá þriðja aðila, svo sem Google Analytics, Drip, eða öðru tóli sem þarf einhverju handriti við á síðuna þína. Taktu bara handritið og slepptu því í Handrit í haus gluggi:

bæta við handrit / kóða beint
 
Enn og aftur, smelltu á „Vista“ til að klára.

 

Endurhladdaðu framhliðina og athugaðu uppruna vefsíðu þinnar til að ganga úr skugga um að númerið birtist. Það er líka góð hugmynd að fletta nokkrum síðum til að staðfesta að allt virki ennþá vel.

 

Jafnvel þó að þetta virðist nokkuð einfalt gæti það farið út fyrir þægindarammann þinn, þannig að ef þú vilt fá þetta hratt af stað, skoðaðu þá nokkra verktaki á Fiverr sem geta gert þetta fyrir þig.

fiverr merki

Smelltu hér til að finna ódýra sérfræðinga um WordPress lagfæringar

 

Ef þér fannst þessi ráð gagnleg, gætirðu viljað skoða fleiri WordPress ráð okkar á viðkomandi valmynd efst á síðunni.

3. Bættu JavaScript við þemahausinn þinn

Í vissum tilvikum gætirðu viljað að JavaScript-skjalið sé notað á allri síðunni þinni, en þú vilt ekki nota tappi til að gera þetta.

Til dæmis, ef þú vilt bæta við þriðja aðila handriti á öllum síðunum þínum, (td instantpage.js handritið til að gera vefsíðuna þína hraðari) geturðu sett handritið inn, eða bætt við handritaskránni sem vísað er til, í head af þinn header.php sniðmátaskrá. 

ÞETTA ER EKKI HÉLD. Ef þú uppfærir þemað þitt gætirðu tapað þessum breytingum. Ef þú vilt samt gera þetta beint, þá er mjög mælt með því að þú búir til barnþema.

Fyrir þessa atburðarás, þar sem þú vilt að þessu handriti verði bætt við alls staðar, geturðu bætt skránni beint við sniðmátið samkvæmt leiðbeiningunum hér að neðan:

Þessu símtali við skrána (eða handritinu) ætti að bæta á milli metatagga og stílblaðstengils. Þetta er nákvæmlega það sama og ef þú værir að bæta við Javascript kóða á hvaða HTML síðu sem er. 

Til að „bæta“ Javascript skránni inn á síðuna þína, í head, notarðu eftirfarandi kóða:


Gakktu úr skugga um að þú hafir skilgreint type rétt, annars er síða þín ekki gild. Gakktu einnig úr skugga um að möppan / forskriftirnar séu til í þemanu og þú hefur bætt myscript.js við það.

Þú getur síðan bætt við hvaða tilvísunum sem eru notaðar í skránni sem þú varst að bæta við HTML þar sem þú þarft að nota það. 

Til dæmis er þetta dæmi um að nota þá aðgerð sem þú varst að bæta við.

" >Fyrirsögn fer hingað

 

Sæktu listann yfir 101 WordPress bragðaref sem allir bloggarar ættu að kunna

101 WordPress bragðarefur

Smelltu hér til að hlaða niður núna
 

Algengar spurningar

Hvernig bæti ég við Javascript skrá á WordPress?

Auðveldasta leiðin til að bæta Javascript skrá við WordPress er að nota viðbótina Insert Headers and Footers. 

  • Skráðu þig inn á síðuna þína og settu tappa fyrir haus og fót.
  • Þegar það hefur verið sett upp skaltu smella á Virkja
  • Vistaðu JavaScript kóðann þinn eða skrána í nýja skrá með JavaScript útlit framlenging.
  • Settu það inn á síðuna þína í eftirfarandi möppu: wp-content / þemu / / js /
  • Farðu í Stillingar> Settu haus og fót.
  • Bættu eftirfarandi við forskriftirnar í hausnum:  <script src="https://www.website.com/wp-content/themes/<theme-you-are-using>/js/file.js"></script>

 

Get ég notað Javascript á WordPress?

Já, það eru margar leiðir til að nota Javascript á WordPress. Ef þú vilt bæta við einföldu handriti geturðu notað Insert Headers and Footers viðbótina til að bæta handritinu við hausinn og hringt síðan í handritið frá hvaða hluta þemans, póstsins eða viðbótarinnar sem þú þarft til að nota það frá.

Hvernig bæti ég eigin kóða við WordPress?

Besta leiðin til að bæta eigin kóða við WordPress er í gegnum function.php skrána. Mælt er með því að þú búir til barnaþema og bætir síðan við þínum eigin breytingum á barnþemanum þannig að þú brjótir ekki uppfæranleika þemans.

Hvernig breyti ég Javascript á WordPress?

Besta leiðin til að breyta Javascript á WordPress er með því að búa til barnþema og bæta síðan við breytingum á Javascript eða aðlaga aðrar aðgerðir í þema barnsins. Þetta gerir þér kleift að breyta Javascript eftir þörfum án þess að brjóta afganginn af þema þínu eða uppfæra möguleika þemans.

Niðurstaða

Ofangreindar þrjár aðferðir eru hreinasta leiðin til að bæta Javascript við WordPress. Almennt ætti að breyta kóðanum beint af háþróuðum notendum sem hafa mikla reynslu af kóða og geta verið vissir um að þeir vita hvernig á að afturkalla allar breytingar sem þeir hafa gert. Annars er best að halda sig við viðbætur. Ef þér líður ekki vel með að kóða kóðann sjálfur, þá væri frábært að hafa samband við samstarfsaðila okkar á Fiverr sem geta fengið það gert í dag

fiverr merki

Smelltu hér til að finna ódýra sérfræðinga um WordPress lagfæringar

 

Um höfundinn
David Attard
Höfundur: David AttardVefsíða: https://www.linkedin.com/in/dattard/
David hefur starfað í eða við net- / stafræna iðnaðinn síðustu 18 ár. Hann hefur mikla reynslu af hugbúnaðar- og vefhönnunargeiranum með því að nota WordPress, Joomla og veggskot í kringum þau. Sem stafrænn ráðgjafi er áhersla hans lögð á að hjálpa fyrirtækjum að ná samkeppnisforskoti með því að nota sambland af vefsíðu þeirra og stafrænum kerfum sem eru í boði í dag.

Eitt í viðbót... Vissir þú að fólk sem deilir gagnlegu efni á borð við þessa færslu lítur ótrúlega líka út? ;-)
vinsamlegast yfirgefa a gagnlegt skrifaðu athugasemdir við hugsanir þínar, deildu þessu síðan á Facebook hópinn þinn / hverjum sem myndu finnast þetta gagnlegt og við skulum uppskera ávinninginn saman. Takk fyrir að deila og vera fín!

Birting: Þessi síða getur innihaldið tengla á ytri vefsíður fyrir vörur sem við elskum og mælum af heilum hug. Ef þú kaupir vörur sem við leggjum til gætum við unnið okkur inn tilvísunargjald. Slík gjöld hafa ekki áhrif á ráðleggingar okkar og við tökum ekki við greiðslum fyrir jákvæða dóma.

Höfundur (ar) Valin þann:  Merki tímarits Inc   Sitepoint merki   CSS bragðarefur merki    vefhönnunarpottamerki   WPMU DEV merki   og margir fleiri ...