Anonim

Som påstås av den ledande CMS-communityn använder 25% av internet WordPress. När vi ser trenderna har vi inget annat val än att tro på dem, nästan varje andra blogg och var fjärde webbplats verkar använda tydligen den mest kraftfulla och användarvänliga CMS. Ser fram emot detta har människor och utvecklare börjat flytta sina webbplatser till WordPress-plattformen.

På denna strävan att förvandla din söta och enkla webbplats till en komplex, högpresterande CMS-webbplats, fastnar människor i ett mycket grundläggande steg och ställer frågan: För kärleken, hur får jag den här externa JavaScript-filen (.js) arbetar du med detta WordPress-tema? Är du också den som ställer samma fråga? Tja amigos, du är äntligen på rätt plats: 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 allt installerat och avfyrat med extern JS redo, låt oss gå in i uppgiften att inkludera filen!

Obs! Jag använder följande fil (testrun.js) för den här tutorialen och temat jag arbetar med är WordPress's Twenty Sixteen.

alert ( 'Hej');

Låt oss börja!

Alla skript och formatmallar laddas från funktionerna.php . Detta är det rätta sättet att ladda dem i WordPress för att undvika konflikt med andra skript som laddas antingen av WordPress själv eller dina plugins som används. Om du låter WordPress hantera alla inkluderade filer måste du låta den veta att du vill att den här filen ska inkluderas i sidhuvud (start) eller sidfot (slut) del av filen. Varje mall / tema har sina egna features.php så det exakta namnet på funktionerna som inkluderar alla filer som ska inkluderas skulle vara svårt att generalisera. Eftersom jag tar tjugo sexton som tema, nedan är ögonblicksbilden av hur min features.php (används för att inkludera filer). Dina bör till viss del likna detta:

Funktionen wp_enqueue_script länkar en skriptfil till den genererade sidan vid rätt tidpunkt beroende på skriptberoende, om skriptet inte redan har inkluderats och om alla beroenden har registrerats. Du kan antingen länka ett skript med ett handtag som tidigare har registrerats med funktionen wp_register_script (), eller ge denna funktion alla parametrar som krävs för att länka ett skript.

Wp_enqueue_script ($ handtag, $ src, $ deps, $ ver, $ in_footer) tar in följande paramer:

$ handtag

(string) (Obligatoriskt) Skriptets namn.

$ src

(string | bool) (Valfritt) Sökväg till skriptet från rotkatalogen till WordPress. Exempel: '/js/myscript.js'.

Standardvärde: falsk

$ deps

(array) (Valfritt) En matris med registrerade handtag som detta skript beror på.

Standardvärde: array ()

$ ver

(string | bool) (Valfritt) Sträng som anger skriptversionsnummer, om det har ett. Denna parameter används för att säkerställa att rätt version skickas till klienten oavsett cachning, och bör därför inkluderas om ett versionnummer är tillgängligt och är vettigt för skriptet.

Standardvärde: falsk

$ in_footer

(bool) (Valfritt) Huruvida manuskriptet ska anges tidigare eller tidigare . Standard "falsk". Accepterar "falskt" eller "sant".

Standardvärde: falsk

Du kan ignorera wp_register_script () -funktionen för den här självstudien. Vårt syfte är att inkludera endast en extern JS. Det borde fungera bra utan det!

Därför, om jag vill namnge mitt skript som "test" kom ihåg att detta param ($ handtag) INTE nödvändigtvis är namnet på den faktiska filen, och min fil har externt beroende av jquery och versionen är 1.0 och laddas innan sidan laddas då skulle min funktion se ut:

wp_enqueue_script ('tutorial', get_template_directory_uri (). '/js/testrun.js', array ('jquery'), '1.0', falsk);

Om du märker att jag har använt get_template_directory_uri (), så strängen sammankopplad efter funktionen, det vill säga " /js/testrun.js " är faktiskt sökvägen till filen till indexfilen för 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.php ut:

Håll in där, vi har nästan gjort! Spara det här nu och slå uppdatera på din webbplats … du bör se JS fungera! Här är min:

Eftersom vi sätter alternativet $ in_footer till falskt laddas skriptet innan sidan laddas, men efter att JQuery laddats som det lades till som ett beroende!

Och .. Voila! Här går du .. Du har lyckats inkludera en extern JS-fil i ditt WP-tema!

Lycklig kodning !!

Referens: Enqueue-funktion: WordPress Codex

Vad är det bästa sättet att lägga till anpassade externa js i wordpress