Den fullständiga guiden till korrekt JavaScript-användning med WordPress

Jag kommer ihåg att tänka "Vad har vi behöver för JavaScript, när vi har Flash?" när jag var fjorton. Även om jag fortfarande kommer ihåg hur jag åtnjuter kodning av saker med ActionScript 2.0, så såg jag hur mycket man kan uppnå med JavaScript och blev kär i den. Jag är ingen expert på JavaScript (ännu) men jag kan säga att jag är över och klar med Flash under lång tid.

När det gäller WordPress, är JavaScript det största bloggaringsplattform- och innehållshanteringssystemet världen över - självklart - mycket användbar för många saker: innehållsreglage, lightbox gallerier, smarta kundvagnar, UI-element som flikar eller dragspel ... du heter det. Men hur exakt ska vi använda JavaScript med WordPress?

Återkommer eller echo en massa HTML manus element är ett sätt att göra det - och det är det fel. I denna handledning ska vi se hur vi ska enqueue JavaScript-filer på våra sidor och hur man överför översättningsbara data till JavaScript-koden.

De två problemen när du använder JavaScript i WordPress-projekt

Det finns i grunden två viktiga problem du kan stöta på om du injicerar JavaScript-filer direkt till WordPress med HTML-kod:

Kopiera kod på samma sida: Låt oss säga att du skapade ett WordPress-plugin och du måste inkludera jQuery. Du eko det rätta manus tagga i och det fungerar! Men vad om en annan plugin vill använda jQuery också - hur skulle det veta att jQuery redan är laddad i ? Det skulle inte, och även om det andra pluginet innehåller jQuery den rätta vägen, sidan skulle fortfarande har två instanser av jQuery, för att du inte är.
Problem med översättning: Låt oss säga att du skapar ett plugin för ljusbox galleri och du måste överföra strängar som "Nästa", "Föregående" och "Bild X av Y". Hur gör du det utan att echo inline JavaScript i ?

Det rätta sättet att använda JavaScript med WordPress

Lösningen på det första problemet är helt enkelt att "registrera" och "inskriva" JS-filerna med de två kärnfunktionerna i WordPress: wp_register_script () och wp_enqueue_script (). Det andra problemets lösning är ännu enklare: Kärnan wp_localize_script () funktionen kan du skicka översättningsbara data till din JS-kod.

Registrera JavaScript-filer

Innan du kan "verka" JavaScript-filerna, bör du "registrera" dem först. Och det är gjort helt enkelt med hjälp av en funktion som heter wp_register_script ():

Några anteckningar om parametrarna:

Namn (krävs, sträng): Skriptets namn. Du kan välja vilket namn du vill ha, förutsatt att det inte används av ett annat skript.
URL (krävs, sträng): Skriptets webbadress. Inget behov av att förklara det här, eller hur? :)
Beroende (valfritt, array): Namnet på andra skript som vårt skript beror på. Om ditt skript beror på jQuery, måste det till exempel laddas efter jQuery. I det här fallet bör du använda array ("jquery") för denna parameter.
Version (valfri, sträng): Versionsnumret för ditt skript. Du kan välja mellan att ange en sträng, sätt parametern till null eller lämna den tom. Om du ställer in det i en sträng, kommer det att läggas till utmatningskoden som my-script.js? ver = 1.2. Om du lämnar parametern tom, läggs versionen av din WordPress-installation till som versionsnummer. Om du ställer in den till null, inget kommer att läggas till.
Fyll i fotfot (valfritt, booleskt): När du registrerar det här registrerade skriptet laddas det i sektion. Men om du ställer in denna parameter till Sann, Den laddas strax före stängningen märka.

Du kan också "avregistrera" skript som redan är registrerade av kärnan eller andra plugins med wp_deregister_script () fungera. Det accepterar bara a 'namn' parameter, som du anger namnet på skriptet att "avregistreras". Självklart.

Det finns en massa skript på WordPress Codex som redan är registrerade i kärnan. Även om du borde dubbelklicka på listan för den nuvarande versionen av WordPress, eftersom den hänvisar till WordPress version 3.3 och kan vara föråldrad.

Enqueueing JavaScript-filer

Du kan registrera ett skript men det betyder inte att det kommer att laddas automatiskt. Efter att du registrerat dina skript, ska du "förneka" dem med wp_enqueue_script () fungera:

Några anteckningar om parametrarna:

Namn (krävs, sträng): Skriptets namn.
URL (valfritt, sträng): Skriptets webbadress. Som du kan se, den här gången är URL-parametern valfri för om du redan har registrerat manuset kan du bara ge namnet och du är bra att gå. Men om du inte registrerade ditt skript måste du ange en URL för denna parameter.
Beroende (valfritt, array): Namnet på andra skript som vårt skript beror på.
Version (valfri, sträng): Versionsnumret för ditt skript.
Ladda i sidfot (valfritt, booleskt): Om den är inställd på Sann, Skriptet laddas strax innan stänger.

Du kan också "dequeue" skript med wp_dequeue_script () fungera. Liknande till wp_deregister_script () funktion, accepterar den endast a 'namn' parameter.

Du kan kontrollera "tillstånd" för ett manus med wp_script_is () fungera. Om du till exempel vill kontrollera om "my-script"är enqueued, använd helt enkelt wp_script_is ("my-script", "kö") i en om påstående.

Krokar för att göra dina skript enkla

Det rätta sättet att skämma på dina skript (och stilar också) använder krokarna nedan:

wp_enqueue_scripts - Den här antecknar skript i den främre delen av din webbplats.
admin_enqueue_scripts - Den här antecknar skript i baksidan av din webbplats.
login_enqueue_scripts - Den här antecknar skript i din inloggningsskärm.

På grund av kompatibilitetsproblem, du får inte använd de namngivna krokarna admin_print_scripts eller admin_print_styles.

För vidare läsning om att inkludera JavaScript (och CSS!) I dina teman och plugins, kan du se hur du inkluderar JavaScript och CSS i dina WordPress-teman och plugins av Japh Thomson på Wptuts+.

Skickar översättningsbara data inuti JavaScript

När det gäller lokalisering är JavaScript alltid ett problem med WordPress ... eftersom så många människor inte känner till den snygga lilla funktionen som heter wp_localize_script ():

  __ ('Next', 'my-script'), 'prevItem' => __ ('Previous', 'my-script'), 'imageTitle' => __ ('Bild% d av% d' script ")); wp_localize_script ('name-of-the-script', // (krävs) namnet på skriptet, "my-script" till exempel "nameOfTheObject", // (krävs) skriptets namn, "my-script" till exempel $ l10n_data // (krävs) data som ska överföras, vilket kan översättas med funktionen __ (); ?>

Efter att du registrerat, registrerat och lokaliserat manuset kan du skicka den lokaliserade variabeln i ditt skript genom att använda namnet på objektet och namnen på data, som alert (nameOfTheObject.prevItem);!

Du kan referera till Pipping Williamsons artikel för en mer noggrann analys.

Avslutar

Det finns anledning till att WordPress är det största innehållshanteringssystemet i världen: Dess kraft kommer från sin flexibilitet. Och jag tror att denna handledning visar (återigen) hur flexibel det är.

Denna handledning täcker ganska mycket vad WordPress erbjuder om JavaScript-användning för våra projekt. Har du några fler tips eller tekniker på JavaScript och WordPress? Berätta för oss om det!

Koda