De complete handleiding voor goed JavaScript-gebruik met WordPress

Ik weet nog dat ik dacht: "Waar hebben we JavaScript voor nodig als we Flash hebben?" toen ik veertien was. Hoewel ik me nog steeds herinner hoe ik het leuk vond om dingen met ActionScript 2.0 te coderen, zag ik hoeveel ik kan bereiken met JavaScript en er echt verliefd op ben geworden. Ik ben (nog) geen expert op het gebied van JavaScript, maar ik kan wel zeggen dat ik al heel lang klaar ben met Flash.

Als het gaat om WordPress, het grootste blogplatform en contentmanagementsysteem ter wereld, is JavaScript dat - natuurlijk - erg handig voor veel dingen: inhoudschuifregelaars, lichtbakgalerijen, gladde winkelwagentjes, UI-elementen zoals tabbladen of accordeons ... noem maar op. Maar hoe moeten we JavaScript precies gebruiken met WordPress?

Een stapel HTML retourneren of echoën script elementen is een manier om het te doen - en dat is het ook fout. In deze zelfstudie gaan we kijken hoe dit moet enqueue JavaScript-bestanden binnen onze pagina's en hoe vertaalbare gegevens aan de JavaScript-code worden doorgegeven.

De twee problemen bij het gebruik van JavaScript in WordPress-projecten

Er zijn in principe twee belangrijke problemen die u kunt tegenkomen als u JavaScript-bestanden injecteert direct in WordPress met HTML-code:

Duplicaatcode op dezelfde pagina: Stel dat u een WordPress-plug-in hebt gemaakt en dat u jQuery moet opnemen. U echo de juiste script tag in de en het werkt! Maar wat als een andere plug-in jQuery ook wil gebruiken - hoe zou het weten dat jQuery al is geladen in de ? Het zou niet, en zelfs als de andere plug-in jQuery omvat de goede weg, de pagina zou nog steeds hebben twee instanties van jQuery, omdat je dat niet bent.
Problemen met vertalen: Laten we zeggen dat je een lightbox-galerij-plug-in maakt en dat je strings zoals "Volgende", "Vorige" en "Afbeelding X van Y" moet doorgeven. Hoe doe je het zonder e-mail inline JavaScript in de ?

De juiste manier om JavaScript te gebruiken met WordPress

De oplossing voor het eerste probleem is eenvoudigweg het "registreren" en "inlijsten" van de JS-bestanden met de twee kernfuncties van WordPress: wp_register_script () en wp_enqueue_script (). De oplossing van het tweede probleem is nog eenvoudiger: de kern wp_localize_script () functie stelt u in staat vertaalbare gegevens door te geven aan uw JS-code.

JavaScript-bestanden registreren

Voordat u de JavaScript-bestanden kunt 'in de wachtrij plaatsen', moet u ze eerst 'registreren'. En dat is eenvoudig gedaan met behulp van een functie genaamd wp_register_script ():

Enkele opmerkingen over de parameters:

Naam (verplicht, string): De naam van het script. U kunt elke gewenste naam kiezen, mits die niet door een ander script wordt gebruikt.
URL (verplicht, string): De URL van het script. Het is niet nodig om dit uit te leggen, toch? :)
Afhankelijkheden (optioneel, array): De naam (namen) van andere scripts waarvan ons script afhankelijk is. Als uw script bijvoorbeeld afhankelijk is van jQuery, moet het na jQuery worden geladen. In dit geval zou u moeten gebruiken array ('jQuery') voor deze parameter.
Versie (optioneel, string): Het versienummer voor uw script. U kunt kiezen tussen een string opgeven, de parameter instellen op nul of laat het leeg. Als u het op tekenreeks instelt, wordt dat aan de uitvoercode toegevoegd mijn-script.js? ver = 1,2. Als u de parameter leeg laat, wordt de versie van uw WordPress-installatie toegevoegd als het versienummer. Als je het instelt op nul, er zal niets worden toegevoegd.
Load in Footer (optioneel, boolean): Wanneer u dit geregistreerde script in wachtrij plaatst, wordt het in de sectie. Maar als u deze parameter instelt op waar, het wordt vlak voor het sluiten geladen label.

U kunt ook scripts "deregistreren" die al zijn geregistreerd door de kern of andere plug-ins met de wp_deregister_script () functie. Het accepteert alleen a 'naam' parameter, die u de naam geeft van het script dat moet worden "afgemeld". Duidelijk.

Er zijn een heleboel scripts op de WordPress Codex die al in de kern zijn geregistreerd. Hoewel, u zou de lijst voor de huidige versie van WordPress moeten controleren, aangezien het verwijst naar WordPress versie 3.3 en mogelijk verouderd is.

JavaScript-bestanden in wachtrij plaatsen

U kunt een script registreren maar dat betekent niet dat het automatisch wordt geladen. Nadat u uw scripts hebt geregistreerd, moet u ze "in de wachtrij plaatsen" met de wp_enqueue_script () functie:

Enkele opmerkingen over de parameters:

Naam (verplicht, string): De naam van het script.
URL (optioneel, string): De URL van het script. Zoals u kunt zien, is deze keer de URL-parameter facultatief want als je het script al hebt geregistreerd, kun je gewoon de naam opgeven en je bent klaar om te gaan. Maar als u uw script niet hebt geregistreerd, moet u een URL voor deze parameter opgeven.
Afhankelijkheden (optioneel, array): De naam (namen) van andere scripts waarvan ons script afhankelijk is.
Versie (optioneel, string): Het versienummer voor uw script.
Load in footer (optioneel, boolean): Indien ingesteld op waar, het script wordt net ervoor geladen sluit.

U kunt ook scripts "dequeue" met de wp_dequeue_script () functie. Vergelijkbaar met de wp_deregister_script () functie, accepteert het alleen een 'naam' parameter.

U kunt de "status" van een script controleren met de wp_script_is () functie. Als u bijvoorbeeld wilt controleren of 'mijn-script'is in de wacht gezet, gewoon gebruiken wp_script_is ('my-script', 'queue') in een als uitspraak.

Haken om uw scripts in te voeren

De juiste manier om je scripts in te huren (en ook stijlen) gebruikt de onderstaande haken:

wp_enqueue_scripts - Deze bevat scripts aan de voorkant van uw website.
admin_enqueue_scripts - Deze bevat scripts aan de achterkant van uw website.
login_enqueue_scripts - Deze brengt scripts in het inlogscherm.

Vanwege compatibiliteitsproblemen, jij niet mogen gebruik de genoemde haken admin_print_scripts of admin_print_styles.

Voor meer informatie over het opnemen van JavaScript (en CSS!) In uw thema's en plug-ins, kunt u verwijzen naar JavaScript en CSS opnemen in uw WordPress-thema's en plug-ins door Japh Thomson op Wptuts+.

Vertaalbare gegevens doorgeven binnen JavaScript

Als het gaat om lokalisatie, is JavaScript altijd een probleem met WordPress ... omdat zoveel mensen de nette kleine functie niet kennen wp_localize_script ():

  __ ('Volgende', 'mijn-script'), 'prevItem' => __ ('Vorige', 'mijn-script'), 'imageTitle' => __ ('Afbeelding% d van% d', 'mijn- script' ) ); wp_localize_script ('name-of-the-script', // (verplicht) de naam van het script, 'my-script' bijvoorbeeld 'nameOfTheObject', // (verplicht) de naam van het script, 'my-script' bijvoorbeeld $ l10n_data // (vereist) de gegevens die moeten worden doorgegeven, die vertaalbaar zijn met de functie __ ()); ?>

Nadat u het script hebt geregistreerd, in het wachtrij hebt geplaatst en gelokaliseerd, kunt u de gelokaliseerde variabele in uw script doorgeven door de naam van het object en de namen van de gegevens te gebruiken, zoals alert (nameOfTheObject.prevItem);!

U kunt verwijzen naar Pipping Williamson's artikel voor een grondiger analyse.

Afsluiten

Er is een reden waarom WordPress het grootste contentbeheersysteem ter wereld is: zijn kracht komt van zijn flexibiliteit. En ik geloof dat deze tutorial (nogmaals) aantoont hoe flexibel het is.

Deze tutorial behandelt vrijwel wat WordPress biedt over JavaScript-gebruik voor onze projecten. Heb je nog meer tips of technieken over JavaScript en WordPress? Vertel ons erover!

Code