Accentsconagua

Den komplette håndboken for korrekt bruk av JavaScript med WordPress

Kode
Share

Jeg husker å tenke "Hva har vi behov for JavaScript for når vi har Flash?" da jeg var fjorten. Selv om jeg fortsatt husker hvordan jeg likte koding av ting med ActionScript 2.0, så så jeg hvor mye man kan oppnå med JavaScript og ble forelsket i det. Jeg er ikke en ekspert på JavaScript (ennå), men jeg kan si at jeg er over og ferdig med Flash i lang tid.

Når det gjelder WordPress, er den største blogging-plattformen og innholdsstyringssystemet over hele verden JavaScript - selvfølgelig - veldig nyttig for mange ting: innholdsregulatorer, lightbox gallerier, glatt handlekurver, UI-elementer som faner eller trekkspill ... du nevner det. Men hvordan skal vi bruke JavaScript med WordPress?

Returnerer eller ekko en haug med HTML manus elementer er en måte å gjøre det på - og det er det feil. I denne opplæringen skal vi se hvordan Enqueue JavaScript-filer inne i våre sider og hvordan du kan oversette oversettbare data til JavaScript-koden.

De to problemene mens du bruker JavaScript i WordPress-prosjekter

Det er i utgangspunktet to viktige problemer du kan støte på hvis du injiserer JavaScript-filer direkte inn i WordPress med HTML-kode:

  • Kopier kode på samme side: La oss si at du opprettet et WordPress-plugin, og du må inkludere jQuery. Du ekko den riktige manus tag i og det fungerer! Men hva om en annen plugin vil bruke jQuery også - hvordan ville det vite at jQuery allerede er lastet inn i ? Det ville ikke, og selv om det andre pluginet inneholder jQuery den riktige måten, siden ville fortsatt ha to forekomster av jQuery, fordi du ikke er det.
  • Problemer med oversettelse: La oss si at du oppretter en plugin for lysbokgalleri, og du må overføre strenger som "Neste", "Forrige" og "Bilde X av Y". Hvordan gjør du det uten å echo inline JavaScript i ?

Den riktige måten å bruke JavaScript med WordPress

Løsningen på det første problemet er bare å "registrere" og "enqueueing" JS-filene med de to kjernefunksjonene i WordPress: wp_register_script () og wp_enqueue_script (). Det andre problemløsningen er enda enklere: Kjernen wp_localize_script () funksjonen lar deg overføre oversettbare data til JS-koden din.

Registrering av JavaScript-filer

Før du kan "enqueue" JavaScript-filene, bør du "registrere" dem først. Og det er gjort bare ved å bruke en funksjon som heter wp_register_script ():

Noen notater om parametrene:

  • Navn (påkrevd, streng): Navnet på skriptet. Du kan velge hvilket som helst navn du vil ha, hvis det ikke brukes av et annet skript.
  • URL (obligatorisk, streng): Nettadressen til skriptet. Du trenger ikke å forklare dette, ikke sant? :)
  • Avhengigheter (valgfritt, array): Navnet på andre skript som vårt skript avhenger av. Hvis for eksempel skriptet ditt avhenger av jQuery, må det lastes inn etter jQuery. I dette tilfellet bør du bruke array ('jquery') for denne parameteren.
  • Versjon (valgfri, streng): Versjonsnummeret for skriptet ditt. Du kan velge mellom å gi en streng, og sette parameteren til null eller la den være tom. Hvis du setter det til streng, vil det bli lagt til utgangskoden som my-script.js? ver = 1.2. Hvis du lar parameteren være tom, vil versjonen av WordPress-installasjonen bli lagt til som versjonsnummer. Hvis du setter den til null, ingenting vil bli lagt til.
  • Legg i bunntekst (valgfritt, booleansk): Når du merker dette registrerte skriptet, lastes det inn i seksjon. Men hvis du setter denne parameteren til ekte, Det vil bli lastet like før avslutningen stikkord.

Du kan også "avregistrere" skript som allerede er registrert av kjernen eller andre plugins med wp_deregister_script () funksjon. Den aksepterer bare a 'Navn' parameter, som du oppgir navnet på skriptet for å være "avregistrert". Åpenbart.

Det er en rekke skript på WordPress Codex som allerede er registrert i kjernen. Selv om du bør dobbeltsjekke listen for den gjeldende versjonen av WordPress, siden den refererer til WordPress versjon 3.3 og kan være utdatert.

Enqueueing JavaScript-filer

Du kan registrere et skript, men det betyr ikke at det skal lastes automatisk. Når du har registrert skriptene dine, bør du "enqueue" dem med wp_enqueue_script () funksjon:

Noen notater om parametrene:

  • Navn (påkrevd, streng): Navnet på skriptet.
  • URL (valgfritt, streng): Nettadressen til skriptet. Som du kan se, denne gangen er URL-parameteren valgfri fordi hvis du allerede har registrert skriptet, kan du bare gi navnet og du er god til å gå. Men hvis du ikke registrerte skriptet ditt, må du oppgi en nettadresse for denne parameteren.
  • Avhengigheter (valgfritt, array): Navnet på andre skript som vårt skript avhenger av.
  • Versjon (valgfri, streng): Versjonsnummeret for skriptet ditt.
  • Legg i bunntekst (valgfritt, booleansk): Hvis satt til ekte, Skriptet lastes rett før stenger.

Du kan også "dequeue" skript med wp_dequeue_script () funksjon. Ligner på wp_deregister_script () funksjon, aksepterer den bare a 'Navn' parameter.

Du kan sjekke "tilstanden" til et skript med wp_script_is () funksjon. For eksempel, hvis du vil sjekke om 'my-script'er enqueued, bare bruk wp_script_is ('my-script', 'kø') i en hvis uttalelse.

Kroker for å skape skriptene dine

Den riktige måten å kreve skriptene dine (og stiler også) bruker krokene nedenfor:

  • wp_enqueue_scripts - Denne enqueues skript i forsiden av nettstedet ditt.
  • admin_enqueue_scripts - Denne enqueues skript i baksiden av nettstedet ditt.
  • login_enqueue_scripts - Denne ankler skript i påloggingsskjermen.

På grunn av kompatibilitetsproblemer, gjør du det må ikke bruk krokene som heter admin_print_scripts eller admin_print_styles.

For videre lesing om å inkludere JavaScript (og CSS!) I temaene og pluginene, kan du se hvordan du inkluderer JavaScript og CSS i WordPress-temaene og pluginene av Japh Thomson på Wptuts+.

Passerer oversettelige data inne i JavaScript

Når det gjelder lokalisering, er JavaScript alltid et problem med WordPress ... fordi så mange mennesker ikke vet den ryddige lillefunksjonen som heter wp_localize_script ():

  __ ('Next', 'my-script'), 'prevItem' => __ ('Forrige', 'my-script'), 'imageTitle' => __ ('Bilde% d av% ​​d' skript ')); wp_localize_script ('name-of-the-script', // (påkrevd) navnet på scriptet, 'my-script' for eksempel 'nameOfTheObject', // (påkrevd) navnet på scriptet, for eksempel $ l10n_data // (obligatorisk) dataene som skal sendes, som kan oversettes med funksjonen __ (); ?>

Etter registrering, enqueueing og lokalisering av skriptet, kan du passere lokalisert variabel i skriptet ditt ved å bruke navnet på objektet og navnene på dataene, som varsling (nameOfTheObject.prevItem);!

Du kan referere til Pipping Williamsons artikkel for en grundigere analyse.

Wrapping Up

Det er grunnen til at WordPress er det største innholdsstyringssystemet i verden: Strømmen kommer fra sin fleksibilitet. Og jeg tror at denne opplæringen viser (igjen) hvor fleksibel det er.

Denne opplæringen dekker ganske mye hva WordPress tilbyr om JavaScript-bruk for våre prosjekter. Har du flere tips eller teknikker på JavaScript og WordPress? Fortell oss om det!

Kode
×