Som påstås av den ledande CMS-gruppen använder 25% av internet WordPress. Titta på trenderna, vi har inget annat val än att tro på dem, nästan varje 2: e blogg och var fjärde plats verkar vara att använda tydligen den mest kraftfulla och användarvänliga CMS. Ser fram emot detta, människor och utvecklare har börjat flytta sina webbplatser till WordPress Platform.
På denna strävan att förvandla din söta och enkla hemsida till en komplex, högpresterande CMS-webbplats, fastnar människor på ett mycket grundläggande steg och frågar frågan: För kärleken, hur får jag den här externa JavaScript-filen (.js) jobbar i det här WordPress-temat? Är du också den som frågar samma fråga? Tja amigos, du är äntligen på rätt ställe: Jag är här för att vägleda dig steg för steg genom det enklaste sättet att uppnå denna uppgift!
Nu förutsatt att du har WordPress alla installerade och avfyrade med extern JS redo, låt oss komma in i uppgiften att inkludera filen!
Obs! Jag använder följande fil (testrun.js) för denna handledning och temat jag jobbar på är WordPress's Twenty Sixteen.
alert ( 'Hej');
Låt oss börja!
Alla skript och stylesheets laddas inifrån funktionerna .php . Det här är det rätta sättet att ladda dem i WordPress för att undvika konflikter med andra skript som laddas antingen av WordPress själv eller om dina plugins används. Om du låter WordPress hantera alla medföljande filer, måste du låta det veta att du vill att den här filen ska inkluderas i rubriken (start) eller sidfot (slutet) av filen. Varje mall / tema har egna funktioner.php så att det exakta namnet på funktionerna som inkluderar alla filer som ska inkluderas är svår att generalisera. Eftersom jag tar tjugosexton som ett tema, nedan är ögonblicksbilden av hur mina funktioner.php (används för att inkludera filer). Din bör i en utsträckning likna detta:
Funktionen wp_enqueue_script länkar en skriptfil till den genererade sidan vid rätt tidpunkt, beroende på manusavvikelser, om man inte redan har skrivit skriptet och om alla beroenden har registrerats. Du kan antingen länka ett skript med ett handtag som tidigare registrerats med funktionen wp_register_script () eller tillhandahålla denna funktion med alla parametrar som behövs för att länka ett skript.
Wp_enqueue_script ($ handtag, $ src, $ deps, $ ver, $ in_footer) tar i följande parametrar:
$ handtag
(sträng) (Obligatoriskt) Skriptets namn.
$ src
(sträng | bool) (Valfritt) Sti till skriptet från rootkatalogen i WordPress. Exempel: '/js/myscript.js'.
Standardvärde: false
$ deps
(array) (Valfritt) En uppsättning registrerade handtag detta skript beror på.
Standardvärde: array ()
$ ver
(sträng | bool) (Valfritt) Sträng som anger scriptversionsnumret, om det har en. Den här parametern används för att se till att den korrekta versionen skickas till klienten oavsett caching, och så bör inkluderas om ett versionsnummer är tillgängligt och det är meningsfullt för skriptet.
Standardvärde: false
$ in_footer
(bool) (Valfritt) Huruvida man ska skicka manuset före eller tidigare. Standard 'false'. Accepterar "falskt" eller "sant".
Standardvärde: false
Du kan ignorera funktionen wp_register_script () för denna handledning. Vårt syfte är att endast inkludera en extern JS. Det borde fungera bra utan det!
Därför, om jag vill namnge mitt skript som "test", kom ihåg att denna param ($ handtag) inte nödvändigtvis är namnet på den faktiska filen och min fil har externt beroende över jquery och versionen är 1.0 och laddar innan sidan laddas då skulle min funktion se ut:
wp_enqueue_script ('tutorial', get_template_directory_uri (). '/js/testrun.js', array ('jquery'), '1.0', false);
Om du märker, har jag använt get_template_directory_uri (), så strängen som sammanfogas efter funktionen, det vill säga " /js/testrun.js " är faktiskt sökvägen för filen mht indexfilen i mallen .
Så ditt $ src-attribut, som är källan till din js-fil blir: get_template_directory_uri (). 'Path_to_js_wrt_index_of_template'.
Därför ser de slutliga funktionerna som:
Håll dig där, vi har nästan gjort! Spara bara detta nu och hit uppdatera på din webbplats ... du borde se JS jobbar! Här är min:
Eftersom vi ställer in $ in_footer- alternativet till falskt, laddas skriptet innan sidan laddas, men efter att JQuery har laddats, eftersom det lagts till som ett beroende!
Och .. Voila! Här går du .. Du har med framgång tagit en extern anpassad JS-fil i ditt WP-tema!
Glad kodning !!
Referens: Enqueue Funktion: WordPress Codex
