Bættu Javascript við WordPress síðu - 3 auðveldar leiðir (færslur/síður)

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ð þú misskiljir það ekki - vegna þess að þú gætir brotið vefsíðuna þína eða búið til flöskuháls á frammistöðu.

Það er ekki mögulegt að bæta Javascript við WordPress síður og færslur beint, svo við munum stinga upp á ýmsum mismunandi leiðum til að bæta Javascript kóða við vefsíður og hvaða ætti að nota við mismunandi aðstæður sem þú gætir lent í. 

Ef þú ert að flýta þér skaltu nota efnisyfirlitið hér að neðan til að fletta að viðkomandi hluta greinarinnar.

 

Þessi grein inniheldur breytingar á WordPress kóða. Ef þú ert ekki viss um að fínstilla kóðann sjálfur, gætirðu viljað skoða þessa grein til að læra hvernig á að ráða besta WordPress forritarann ​​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 handriti inn á valdar síður með því að nota viðbót eins og WPCode
  2. 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
  3. Bættu Javascript skrá við þemahausinn þinn

Við skulum fara í gegnum hverja af þessum aðferðum í smáatriðum.

1. Notaðu viðbót eins og WPCode

Ef þú vilt einfaldlega nota viðbót til að fella inn javascript tilvísun í haus- eða fótskrá WordPress þema, þá er WPCode viðbótin auðveldur og ÓKEYPIS valkostur.

Eins og nafnið segir gerir það þér kleift að bæta litlum kóða eins og skriftum við haus- og fótskrárnar, þar sem þær þurfa að vera oftast. 

Í 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ð. 

Þessi viðbót styður nokkra mismunandi valkosti svo við munum aðeins lýsa þeim algengustu sem þú þarft að nota.

Þú getur hlaða niður WPCode hér eða settu það upp með því að nota Install Plugins aðgerðina í WordPress.

Settu upp WPCode viðbótina:

  • Skráðu þig inn í bakenda eða stjórnanda vefsvæðisins.
  • Farðu í viðbætur> Bæta við nýjum
  • Leitaðu að „WPCode“ viðbótinni og smelltu á Setja upp núna.
  • Þegar það hefur verið sett upp skaltu smella á Virkja

setja upp wpcode

 

Þú getur nú annað hvort hlaðið sérsniðnu skriftu án skráar (td til að bæta við skriftu sem þú hefur fengið eins og Google Analytics) eða hlaðið upp sérsniðinni Javascript skrá. 

Algengasta valkosturinn sem þú getur notað með þessari viðbót er möguleikinn á að bæta kóðanum beint inn í WordPress.

Þ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í í Alheimshaus og fótur gluggi.

Þú getur valið að bæta handritinu við haus, meginmál eða fót. Þú ættir að fá leiðbeiningar frá veitanda handritsins í hvaða af þessum hlutum þú þarft að bæta handritinu við.

Segjum að þú viljir bæta því við hausinn:

að bæta javascript kóða við wordpress haus

Smelltu á "Vista breytingar" til að klára.

WPCode viðbótin mun nú bæta kóðanum við hverja síðu á vefsíðunni þinni.

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.

WPCode gerir þér einnig kleift að búa til þína eigin kóðabúta.

Þú getur líka sett inn kóðabúta hvar sem er á vefsíðunni þinni, svo sem inni í færslum eða síðum, fyrir eða eftir færslu, fyrir eða eftir efni, eða fjölda annarra valkosta sem þú gætir þurft.

Farðu einfaldlega í Code Snippets > Add Snippet og veldu síðan 'Create Your Own'.

bættu við sérsniðna kóðanum þínum

Þú verður nú fluttur á 'Búa til sérsniðið brot' síðu þar sem þú getur gefið kóðanum þínum titil og límt hann inn í 'Code Preview' reitinn.

búa til sérsniðið javascript bút

Síðan skaltu velja 'JavaScript Snippet' úr fellivalmyndinni 'Code Type'.

javascript bút

Síðan skaltu einfaldlega skruna niður þar til þú nærð 'Innsetning' svæðinu.

Allt sem er eftir er að velja 'Staðsetning' fyrir kóðann úr fellivalmyndinni. Finndu 'Síða, færsla, sérsniðin færslutegund' og tilgreindu hvar þú vilt að kóðinn birtist á síðunni eða færslunni.

Ef þú vilt að WPCode setji brotið fyrir eða á eftir málsgrein, geturðu tilgreint hvaða málsgrein í færslunni hún á að birtast fyrir eða á eftir.

Ef þú slærð inn 1 í 'Setja inn númer' reitinn, til dæmis, mun kóðabúturinn birtast fyrir eða á eftir fyrstu málsgrein. Fyrir aðra málsgrein, notaðu 2, og svo framvegis.

Eftir það skaltu einfaldlega skipta rofanum efst á skjánum yfir á 'Virkt' og smelltu síðan á 'Vista brot' valmöguleikann við hliðina á honum.

Það er allt sem þarf til að fá kóðasýnishornið þitt á netinu!

Helsti kosturinn við að nota viðbót er að það er byrjendavænn valkostur. Þú þarft ekki að hafa áhyggjur af því að breyta skrám þemaðs þíns. WPCode viðbótin gæti líka komið sér vel ef þú ert að leita að saumaless leið til að bæta við öðrum tegundum kóða og sérsniðnum CSS.

Hins vegar er gallinn við þessa aðferð að hún felur í sér að setja upp viðbót frá þriðja aðila, sem sumir síðueigendur reyna að forðast. Ef þú vilt halda viðbótunum þínum í lágmarki gætirðu verið betra að nota eina af hinum aðferðunum.  

Jafnvel þó að þetta virðist frekar einfalt, gæti það verið út fyrir þægindarammann þinn, svo ef þú vilt gera þetta fljótt skaltu skoða nokkrar verktaki á Fiverr sem getur gert þetta fyrir þig.

fiverr merki

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

 

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

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


Með því að nota þessa aðferð þarftu ekki að setja upp aðra viðbót ef þú breytir functions.php skránni þinni. Þessa aðferð er einnig hægt að nota til að bæta eiginleikum og virkni við bæði þemað og WordPress sjálft. Þessi nálgun getur til dæmis sett upp JavaScript í eina færslu eða síðu eða allar síður.

Helsti ókosturinn við þessa stefnu er að hún krefst þess að þú takir á kóða og uppfærir skrár vefsíðunnar þinnar. Þar af leiðandi, ef þig skortir reynslu á þessu sviði, gæti það ekki verið kjörinn valkostur.

fiverr merki

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

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 hér

 

Notaðu wp_head krókinn til að bæta við sérsniðnu JavaScript


Þú getur líka bætt sérsniðnu JavaScript við hausinn þinn með því að nota wp_head aðgerð krókur. Aftur, þessi lausn er ekki valin vegna þess að hún býr til of mikinn fjölda skrifta. Það er það, aldreiless, ákjósanlegt að setja handvirkt forskriftirnar inn í header.php skrána þína.

Þessi aðferð, sem einnig er hægt að nota fyrir síðufótinn, notar aðgerðarkrókinn(a) til að setja innbyggða forskriftir inn á síðuna þína. Ólíkt wp enqueue script aðgerðinni, sem setur sérsniðnar forskriftir í biðröð, prentar wp head aðferðin forskriftirnar í haussniðmátinu þínu (og fótfótinn, ef þú notar wp_footer krókur).

Til að byrja skaltu fletta að functions.php skránni þinni og afrita og líma eftirfarandi kóða:

fall collectiver_custom_javascript() { ?>

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

 

Það er athyglisvert að wp höfuðkrókurinn virkar aðeins á framenda vefsíðunnar þinnar. Þetta gefur til kynna að sérsniðið JavaScript sem bætt er við með þessari nálgun mun ekki birtast á stjórnunar- eða innskráningarsvæðum. Hins vegar, ef þú vildir bæta JavaScript við þessar staðsetningar, gætirðu gert það með því að nota admin höfuð og innskráningarhaus aðgerðarkrókanna.


Hönnurum líkar við wp enqueue script aðgerðina vegna þess að hún forðast árekstra sem geta átt sér stað við aðrar lausnir, eins og að bæta skriftum beint við header.php skrána þína. Ennfremur býr þessi lausn ekki til nein háð forskrift.

Helsta vandamálið við að bæta sérsniðnu WordPress JavaScript við haus síðunnar þinnar er að það getur truflað önnur viðbætur sem hlaða eigin forskriftum. Þessi uppsetning getur einnig valdið því að nokkur skriftur hlaðast mörgum sinnum, sem gæti dregið úr heildarhraða og afköstum vefsvæðisins.

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

Bætir Javascript við WordPress myndband

Viltu sjá hvernig á að bæta Javascript við WordPress á YouTube myndbandi? Þetta er gott úr:

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.

Þ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á, en þ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.

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

Algengar spurningar

Hvað er Javascript?

JavaScript er tölvutungumál sem keyrir í vafra notandans frekar en á netþjóninum þínum. Forritun viðskiptavinarhliðar gerir forriturum kleift að ná fram ýmsum áhugaverðum hlutum án þess að hægja á vefsíðunni þinni. Þú gætir oft verið beðinn um að afrita og líma JavaScript kóðabút inn á WordPress vefsíðuna þína ef þú vilt fella inn myndbandsspilara, bæta við reiknivélum eða einhverri annarri þjónustu frá þriðja aðila.

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

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

  • Skráðu þig inn á síðuna þína og settu upp WPCode viðbótina.
  • Þ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 inn WPCode
  • 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 WPCode viðbótina til að bæta handritinu við haus, hringdu síðan í handritið frá hvaða hluta þema, færslu eða viðbót sem þú þarft 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 ...