Volgens de toonaangevende CMS-community gebruikt 25% van het internet WordPress. Gezien de trends, hebben we geen andere keuze dan ze te geloven, bijna elke 2 e blog en elke 4e site lijkt blijkbaar het krachtigste en gebruiksvriendelijkste CMS te gebruiken. Daarnaar uitziende, zijn mensen en ontwikkelaars begonnen met het verschuiven van hun sites naar WordPress Platform.
Met dit streven om je lieve en eenvoudige website te transformeren naar een complexe, goed presterende CMS-site, lopen mensen vast in een heel eenvoudige stap en stellen ze de vraag: Voor de liefde, hoe krijg ik dit externe JavaScript-bestand (.js) werken in dit WordPress-thema? Ben jij ook degene die dezelfde vraag stelt? Nou amigo's, je bent eindelijk op de juiste plaats: ik ben hier om je stap voor stap te begeleiden op de eenvoudigste manier om deze taak te volbrengen!
Nu we aannemen dat je WordPress allemaal geïnstalleerd hebt en met externe JS klaar bent, gaan we de taak van het opnemen van het bestand in!
Opmerking: ik gebruik het volgende bestand (testrun.js) voor deze zelfstudie en het thema waar ik aan werk is WordPress's Twenty Sixteen.
alert ( 'Hallo');
Laten we beginnen!
Alle scripts en stylesheets worden geladen vanuit de functions.php . Dit is de juiste manier om ze in WordPress te laden om conflicten met andere scripts te vermijden die worden geladen door WordPress zelf of door het gebruik van uw plug-ins. Als u WordPress alle opgenomen bestanden laat beheren, moet u dit laten weten dat u wilt dat dit bestand wordt opgenomen in de koptekst (start) of footer (einde) van het bestand. Elke sjabloon / thema heeft zijn eigen functions.php, zodat de exacte naam van de functies die alle te bevatten bestanden bevat, moeilijk te generaliseren is. Aangezien ik twintig zestien als thema neem, is hieronder de momentopname van hoe mijn functions.php (gebruikt voor het opnemen van bestanden). De jouwe zou in zekere mate op dit moeten lijken:
De functie wp_enqueue_script koppelt een scriptbestand op het juiste moment aan de gegenereerde pagina volgens de scriptafhankelijkheden, als het script nog niet is opgenomen en als alle afhankelijkheden zijn geregistreerd. U kunt een script koppelen aan een handle die eerder is geregistreerd met de functie wp_register_script (), of deze functie voorzien van alle parameters die nodig zijn om een script te koppelen.
Het wp_enqueue_script ($ handle, $ src, $ deps, $ ver, $ in_footer) neemt de volgende params in:
$ handle
(string) (Vereist) Naam van het script.
$ src
(string | bool) (Optioneel) Pad naar het script vanuit de hoofdmap van WordPress. Voorbeeld: '/js/myscript.js'.
Standaardwaarde: false
$ deps
(array) (optioneel) Een array van geregistreerde handles van dit script is afhankelijk van.
Standaardwaarde: array ()
$ ver
(string | bool) (Optioneel) String die het versienummer van het script specificeert, indien aanwezig. Deze parameter wordt gebruikt om ervoor te zorgen dat de correcte versie naar de client wordt verzonden, ongeacht cachegeheugen, en moet dus worden opgenomen als een versienummer beschikbaar is en zinvol is voor het script.
Standaardwaarde: false
$ in_footer
(bool) (Optioneel) Of het script vóór of ervoor moet worden geplaatst. Standaard 'false'. Accepteert 'false' of 'true'.
Standaardwaarde: false
U kunt de functie wp_register_script () voor deze zelfstudie negeren. Ons doel is om alleen een externe JS op te nemen. Zonder dit zou het prima moeten werken!
Daarom, als ik mijn script als "test" wil noemen, onthoud dan dat deze parameter ($ handle) NIET noodzakelijkerwijs de naam is van het eigenlijke bestand, en mijn bestand externe afhankelijkheid heeft ten opzichte van jQuery en versie 1.0 is en wordt geladen voordat de pagina wordt geladen dan zou mijn functie er als volgt uitzien:
wp_enqueue_script ('tutorial', get_template_directory_uri (). '/js/testrun.js', array ('jquery'), '1.0', false);
Als je opvalt, heb ik get_template_directory_uri () gebruikt, dus is de tekenreeks die is samengevoegd na de functie, dat wil zeggen " /js/testrun.js ", eigenlijk het pad van het bestand naar het indexbestand van de sjabloon .
Dus je $ src-attribuut, dat de bron van je js-bestand is, wordt: get_template_directory_uri (). 'Path_to_js_wrt_index_of_template'.
Daarom ziet de laatste functies.php eruit als:
Wacht daar, we zijn bijna klaar! Sla dit nu op en klik op Vernieuwen op uw website ... u zou de JS aan het werk moeten zien! Hier is de mijne:
Omdat we de optie $ in_footer op false hebben ingesteld, wordt het script geladen voordat de pagina wordt geladen, maar nadat JQuery is geladen omdat het als afhankelijkheid is toegevoegd!
En .. Voila! Here you go .. Je hebt met succes een extern aangepast JS-bestand opgenomen in je WP-thema!
Happy Coding !!
Referentie: Enqueue-functie: WordPress Codex
