Share
Een van de beste dingen over WordPress is de levendige economie. Voor veel gebruikers is het eenvoudig om thema's te vinden die passen bij het ontwerp waarvoor ze zijn bedoeld, of om plug-ins te zoeken die functionaliteit bieden die ze op hun site willen introduceren.
Maar hoevelen van u - als ontwikkelaars of ontwerpers - hebben dat telefoontje of die e-mail ontvangen waarin de klant beweert dat er iets mis is met hun site om te ontdekken dat de browserconsole iets laat zien over een fout die te maken heeft met JavaScript of jQuery?
Precies. Hoogstwaarschijnlijk heeft iedereen die een site heeft gebouwd en / of onderhouden voor iemand dit probleem tegengekomen vooral als de eindgebruiker toestemming krijgt om zijn eigen plug-ins toe te voegen, zijn eigen updates toe te staan, enz.
In dit bericht gaan we een paar concepten rond jQuery en WordPress bekijken om ervoor te zorgen dat we, als ontwikkelaars, niet alleen werken aan het correct bouwen van onze producten, maar dat we ook weten hoe we problemen correct kunnen diagnosticeren als ze zich voordoen in de sites van onze klanten.
Dit specifieke onderwerp is niet nieuw voor Wptuts +. We hebben er zelfs een uitgebreid artikel over geschreven voordat het compleet is met een aantal codevoorbeelden die u alles moeten bieden wat u nodig heeft om te begrijpen hoe u met JavaScript werkt in WordPress.
Maar als we bepaalde praktijken in de community blijven volgen die we graag willen helpen oplossen, vinden we het niet erg om meerdere facetten van hetzelfde onderwerp te behandelen.
Voordat u dit artikel leest, moet u dus zeker weten hoe u JavaScript en CSS in uw WordPress-thema's en -plug-ins kunt opnemen.
Als het gaat om het bouwen van producten in WordPress, is een van de dingen die wij als ontwikkelaars moeten proberen te doen, de WordPress-applicatie als een basis te behandelen.
Op dit moment biedt de API ons een enorme hoeveelheid flexibiliteit bij het bouwen van thema's, plug-ins en applicaties, en dit is een goede zaak.
Maar wanneer we beginnen met het verwijderen van bibliotheken die met WordPress worden geleverd ten gunste van onze eigen, is het bijna alsof we een "minivork" van het project maken.
Dit is geen goede methode om te adopteren.
Wat mij betreft, wordt WordPress geleverd met de kern van functies en bibliotheken waarmee het werkt zoals het werkt. Het veranderen van cruciale onderdelen van de applicatie - zoals jQuery - heeft niet alleen betrekking op WordPress zelf, maar op het hele ecosysteem van producten die er bovenop zijn gebouwd.
Goede thema's en plug-ins zijn afhankelijk van de aanwezigheid van die bibliotheken. Wanneer we die functionaliteit wijzigen, breken we mogelijk elk werk dat van hen afhankelijk is.
We moeten stoppen met het bekijken van WordPress als iets dat we uit elkaar kunnen halen en opnieuw kunnen samenstellen zoals we het nodig hebben, en het als een basis kunnen beschouwen om ons eigen unieke werk te bouwen.
Over het algemeen bestaat het probleem van JavaScript-conflicten om een van de drie redenen. Een ontwikkelaar heeft ook:
Allereerst kan elk van de bovengenoemde drie gevallen allemaal tegelijkertijd worden gedaan, maar vaker wel dan niet een van de bovenstaande. Ten tweede denk ik niet dat ontwikkelaars dit meestal doen met slechte bedoelingen.
Ik denk dat het meer een gebrek aan opleiding en / of begrip van de gevolgen is.
Hiermee bedoel ik dat de ontwikkelaar ten onrechte toegang heeft gekregen tot de jQuery-bibliotheek door deze te executeren geen conflict, de variabele niet in de oorspronkelijke staat terugzetten of simpelweg de snelkoppelingsfunctie hernoemen.
Verderop in dit artikel zullen we de best practice bekijken voor het schrijven van WordPress-specifieke jQuery, zodat we volledig kunnen profiteren van de bibliotheek zonder in conflict te komen met andere plug-ins, thema's of projecten.
Dit is iets dat vaak met goede bedoelingen wordt gedaan: het idee is dat de ontwikkelaar een update levert voor de versie van jQuery die is opgenomen in WordPress, zodat nieuwe functies of modernere jQuery kunnen worden geschreven.
Het probleem met dit te doen is dat eerder ontwikkelde projecten niet zijn geschreven met enkele van de nieuwere functies van de nieuwste versie van jQuery. Ook als jQuery een functie in de nieuwe versie die in de oude versie aanwezig was, heeft beëindigd of volledig heeft verwijderd, zal het voorkomen dat die code werkt.
Hoewel dit een minder vaak voorkomend probleem is, is het iets dat af en toe gebeurt: in een poging om een site sneller te laten laden, verplaatsen ontwikkelaars de volgorde waarin jQuery verder wordt geladen, meestal naar het footer..
Terwijl het laden van JavaScript in de voettekst van een pagina wordt aangemoedigd door een aantal high-profile sites, gaat dit terug naar het holistisch denken aan WordPress als een basis voor applicatie-ontwikkeling.
Als WordPress standaard jQuery op een bepaalde locatie laadt, moeten we onthouden dat het daar moet blijven, omdat alle werken die bovenop de toepassing worden gebouwd afhankelijk zijn van het feit dat het op die locatie is en nergens anders.
Hoewel er een aantal verschillende manieren zijn waarop u uw JavaScript-bronbestanden kunt voorbereiden om jQuery te gebruiken, is er een manier die ik meestal volg, omdat deze de volledige bescherming en inkapseling van de $ functie.
(functie ($) "gebruik strict"; $ (function () // Uw code hier); (jQuery));
Je kunt hier ook de GitHub-gist bekijken.
Kortom:
Dit levert een correct geladen versie van jQuery op die de standaard gebruikt
$functie referentie om ons in staat te stellen verder te gaan met ons werk.
Merk op dat de "gebruik strikt"statement biedt het volgende:
Strict-modus is een nieuwe functie in ECMAScript 5 waarmee u een programma of een functie in een "strikte" werkomgeving kunt plaatsen. Deze strikte context voorkomt dat bepaalde acties worden ondernomen en werpt meer uitzonderingen op
Voor geïnteresseerden, lees daarover meer op deze site.
Eindelijk, de werkelijke document.ready functie is optioneel. Hier wordt het alleen gebruikt om te laten zien hoe u kunt beginnen met het gebruik van de standaard jQuery-functies in de context van de code.
Merk op dat de volgende versie van WordPress van plan is om te verzenden met een patch die deze specifieke discussie overbodig zal maken, tenminste voor zover het Dashboard gaat.
Concreet is er momenteel een ticket in Trac waarin WordPress ons niet zal toestaan om jQuery te verwijderen van het Dashboard. Dat is een goed ding.
Kortom, de belangrijkste afhaalmomenten voor dit artikel zijn als volgt:
Accentsconagua
$ functie met behulp van de juiste JavaScript-voorzieningenIk zou zeggen dat als je iets anders doet, je jezelf opmaakt voor mogelijk slechte resultaten.
