Accentsconagua

Slik integrerer du SmoothState.js inn i et WordPress-tema

Webdesign
Share

I vår tidligere opplæring brukte vi API for History Web på et statisk nettsted for å betjene glatte sidetransisjoner. I denne opplæringen skal vi ta ting til neste nivå ved å bruke det vi lærte på et WordPress-nettsted. Det vil være en avgjørende forskjell; Vi vil utnytte SmoothState.js i stedet for å bygge vår egen fra bunnen av. 

SmoothState.js vil:

  • Be om sider asynkront (AJAX) og erstatt innholdet tilsvarende.
  • Oppdater nettadresser og nettleserlogg via API for History Web.

Vi velger SmoothState.js av flere grunner:

  • Brukervennlighet: Det er en ekstremt enkel å bruke jQuery-plugin, og krever knapt noen konfigurasjon for å få det oppe og kjører.
  • APIer: SmoothState.js er fullpakket med metoder, egenskaper og kroker som gjør at vi kan forme det i mange mulige situasjoner.
  • Prefetching og caching: Disse to funksjonene tillater at sidetransisjonene våre blir mye jevnere og raskere enn det vi bygget i den forrige opplæringen.
  • Det er uåpnet: SmoothState.js dikterer ikke hvordan vi bruker animasjonen - vi kan lene oss på CSS, jQuery, Vanilla JavaScript, eller et animasjonsbibliotek som Velocity.js.
  • Prøvd og testet: Med tanke på at mer enn hundre problemer har blitt stengt under utviklingen, kan vi anta at mange feil har blitt adressert.

Forutsetninger

Det er et par ting du må ha klar for å kunne følge denne opplæringen:

  • WordPress: å ha et løpende WordPress-nettsted, enten lokalt på datamaskinen din, eller at det er nødvendig å leve på en online-server. Hvis du trenger hjelp til dette trinnet, kan du sjekke ut Tom McFarlin's Hvordan komme i gang med WordPress for å komme seg opp med et grunnleggende WordPress-nettsted.
  • Et tema: Under denne opplæringen skal vi bruke det nyeste standard WordPress-temaet: TwentySixteen. Du kan velge et tema, men sørg for at temaet er kompatibelt med WordPress-standarder.

1. Lag et barn tema

Ved å bruke et "barntema" i WordPress (i stedet for å arbeide direkte med de opprinnelige temafilene) kan vi trygt introdusere nye eller overstyre standardfunksjonalitet.

Dette er best praksis når det gjelder å tilpasse et tema, siden eventuelle endringer du gjør, vil bli bevart hvis foreldetemaet er oppdatert.

I vårt tilfelle er overordnet temaet TwentySixteen. Barnet ligger i en annen ny mappe "twentysixteen-child" som inneholder en "functions.php" -fil og et stilark "style.css", som følger.

. ├── twentysixteen └─ - twentysixteen-child

Den viktigste delen av et barn tema er Mal notat i stilarkets overskrift som angir temaforholdet. Spesifiser Mal med navnet på overordnet temakatalog, i vårt tilfelle twentysixteen

/ ** Tema navn: Twenty Sixteen Child Theme URI: https://webdesign.tutsplus.com Forfatter: Thoriq Firdaus Forfatter URI: https://tutsplus.com/authors/tfirdaus Beskrivelse: Et barn tema som legger til et ekstra lag av glam til TwentySixteen Versjon: 1.0.0 Lisens: GNU General Public License v2 eller nyere Lisens URI: http://www.gnu.org/licenses/gpl-2.0.html Tekstdomen: twentysixteen Mal: ​​twentysixteen * /

Når det er satt, aktiver barnetemaet via admin:

TwentySixteen barn temaet er aktivert, du vil kanskje legge til et "screenshot.png" også

2. Legg inn JavaScript-filene

Vi må laste inn en rekke JavaScript-filer i vårt WordPress-tema. I prinsippet kan vi gjøre det ved å legge til disse JavaScript direkte på hode tag i "header.php" -filen til temaet. Etter WordPress-standarden oppfordres det imidlertid til å bruke wp_enqueue_script () funksjon, lagt til functions.php, for å hindre konflikter:

wp_enqueue_script ('smoothstate-js', 'assets / js / smoothstate.js', array ('jquery'), '0.5.2'); wp_enqueue_script ('script-js', 'assets / js / script.js', array ('jquery', 'smoothstate-js'), '1.0.0');

Funksjonen tillater oss også å angi skriptavhengighetene. I vårt tilfelle er "smoothstate.js" avhengig av jQuery, slik at WordPress vil laste jQuery før du laster "smoothstate.js". 

Vår fil "script.js" er avhengig av både skript, slik at lastesekvensen for alle våre skript er som følger:

Ta en titt på følgende opplæringsprogrammer for å lære mer om hvordan filen enqueuing i WordPress fungerer:


3. Implementere SmoothState.js

La oss legge til følgende kode i vår "script.js", for å få SmoothState.js oppe:

(funksjon ($) $ (funksjon () // Klar var-innstillinger = ankre: 'a', $ ('#page') .smoothState (innstillinger););) (jQuery);

I koden ovenfor velger vi #side (elementet som bryter inn sidens innhold) og distribuerer SmoothState.js med sin mest grunnleggende konfigurasjon.

Våre sider bør bli servert uten å fullføre nettleservinduet når vi navigerer gjennom vårt WordPress-nettsted. Våre sider leveres nå asynkront.

Pardon meg for det uinspirerende dummy innholdet.

I utgangspunktet er vi alle satt! Det er imidlertid noen detaljer som fortsatt er verdig oppmerksomhet:

  • Det er noen nettadresser som skal ikke lastes asynkront, for eksempel lenken i #side som peker på WordPress Admin, wp-admin eller wp-login.php.
  • Lenker med tilhørende hash, for eksempel #svar, Ikke hopp til de angitte delene på siden.
  • Vår sidebelastning er blazingly rask. Men det føles ikke enda jevnt siden vi ikke har brukt noen animasjon for å formidle overgangen.

4. WordPress Admin Links

Det er noen få koblinger på siden som peker på WordPress-administrasjonsområdet, for eksempel Redigere lenke i hvert innlegg, Loggført som admin, og Logg ut før kommentarskjemaet.

"Rediger" -linken i TwentySixteen som vises når vi er logget inn.

Et av problemene når SmoothState.js ber om administratoren er at vi ikke kan gå tilbake til forrige side når vi klikker på nettleseren Tilbake knapp. Dette problemet oppstår fordi SmoothState.js-skriptet ikke er tilstede i administrasjonsområdet for å be om og vise den forrige siden.

Vi mislykkes i å gå tilbake til forrige side etter å ha besøkt WordPress Dashboard.

Vi må forhindre SmoothState.js fra å be om en hvilken som helst URL som peker på wp-admin eller wp-login. For å gjøre dette kan vi benytte svarteliste parameter, som følger:

(funksjon ($) $ (funksjon () // Klar var-innstillinger = ankre: 'en' svarteliste: '.wp-link'; $ ('#page') .smoothState (innstillinger);); ) (jQuery);

De svarteliste parameter forteller SmoothState.js å ​​ignorere koblingene med den angitte klasseväljeren; og gitt den ovennevnte kodebiten, vil den ignorere koblingene med wp-link klasse. Dette klassenavnet er foreløpig ikke eksisterende, så vi lager en ny klasse og legger den dynamisk til de nødvendige koblingene:

funksjon addBlacklistClass () $ ('a') .each (funksjon () hvis (this.href.indexOf ('/ wp-admin /')! == -1 || this.href.indexOf ('/ wp -login.php ')! == -1) $ (dette) .addClass (' wp-link '););

Denne funksjonen evaluerer hver ankermerke på siden, og legger til wp-link klasse hvis linkadressen inkluderer / Wp-admin / eller /wp-login.php.

Vi utfører denne funksjonen to ganger for å effektivt legge til klassen på siden. Først på den første siden lastes. Den andre er etter at SmoothState.js har servert den nye siden via onAfter; en metode som vil løpe hver gang det nye innholdet og animasjonen er fullstendig levert.

funksjon addBlacklistClass () $ ('a') .each (funksjon () hvis (this.href.indexOf ('/ wp-admin /')! == -1 || this.href.indexOf ('/ wp -login.php ')! == -1) $ (dette) .addClass (' wp-link '););  $ (funksjon () addBlacklistClass (); var settings = anchors: 'a', svarteliste: '.wp-link', onAfter: function () addBlacklistClass ();; $ ('#page') .smoothState (innstillinger););

5. Håndtering av Link Hash

Deretter må vi håndtere koblinger med en etterfølgende hash. I et WordPress-tema finner vi vanligvis en som kobler til kommentarseksjonen av et innlegg eller en side.

"Legg igjen en kommentar" peker på kommentarseksjonen av innlegget.

Som ting står, finner du koblingen vil ikke ta oss til kommentarseksjonen fordi siden ikke er faktisk lastet opp eller uthvilt. Derfor må vi gjenskape forventet normal oppførsel.

(funksjon ($) ... $ (funksjon () ... onAfter: funksjon () ... var $ hash = $ (window.location.hash); hvis ($ hash.length! == 0) var offsetTop = $ hash.offset (). topp; $ ('body, html') .animate (scrollTop: (offsetTop - 60), varighet: 280);;);) (jQuery);

Som du kan se fra kodestykket ovenfor, har vi lagt til noen linjer med koder under onAfter metode. Koden henter URL-adressen hash, Ruller deretter til delen som er angitt (hvis delen er tilstede på siden) ved hjelp av jQuery Animation.

Rask jevnt til kommentarseksjonen av innlegget 

6. Bruk av sidebevegelse

Vi må gjøre sideovergangen føles mer livlig. Først legger vi til CSS-stilene for å animere siden, til barnetemaets "styles.css" som følger.

.nettsted-innhold -webkit-overgang: -webkit-transform .28s, opacity.228s; -ms-overgang: -o-transformer .28s, opacity .28s; -o-overgang: -o-transformer .28s, opacity .28s; overgang: transform .28s, opacity .28s;  .slide-out .site-innhold -webkit-transform: translate3d (0, 100px, 0); -ms-transform: translate3d (0, 100px, 0); -o-transform: translate3d (0, 100px, 0); transformere: translate3d (0, 100px, 0); opasitet: 0;

De .site-innhold er klassenavnet som bryter hovedinnlegget eller siden innhold, mens .skli ut er en ekstra klasse vi har opprettet for å skyve innholdet ut.

(funksjon ($) ... $ (funksjon () ... var settings = ... onStart: varighet: 280, // ms gjengivelse: funksjon ($ container) $ container.addClass ('slide-out'); , onAfter: funksjon ($ container) ... $ container.removeClass ('slide-out');; $ ('#page') .smoothState (innstillinger););) (jQuery);

Gitt ovenstående kode bruker vi onStart Metode for å legge til klassen når SmoothState.js begynner å trekke inn nytt innhold. Så gjennom onAfter, Vi fjerner klassen etter at det nye innholdet er levert.

Og det er alt der er til det! Likevel er det en ting å huske på når det gjelder kompatibilitet med noen WordPress-plugins ...

Hva blir det neste?

Det er mer enn 40.000 WordPress plugins tilgjengelige, ikke engang inkludert plugins som er vært utenfor det offisielle depotet, for eksempel på CodeCanyon for eksempel. Det er mange plugins der ute som kanskje ikke er kompatible (eller til og med pause) vår asynkron lasting, spesielt de som stole på skripting i noen grad.

Følgende liste er mitt grove estimat av noen som du kanskje trenger å se på når du bruker dem i forbindelse med SmoothState.js:

  • WordPress.com Stat (en Jetpack-modul)
  • Karusell (en Jetpack-modul)
  • Uendelig Scroll (en Jetpack Module)
  • Google Analytics for WordPress
  • Disqus
  • Lazy Load

I tillegg er JavaScript sterkt brukt i Customizer i WordPress Admin. Så, kanskje du tenker på lossing SmoothState.js i Customizer, hvis noe noen gang bryter.

Konklusjon

Vi har lært hvordan å integrere SmoothState.js i WordPress, samt å utnytte et barnemne som vår utviklingsstrategi. Og dette er bare en start! Vi kan for eksempel utvide det vi har gjort i et plugin med alternativer i innstillingene der vanlige brukere enkelt kan tilpasse utdataene.

Inspirasjon

Hvis du leter etter inspirasjon, sjekk ut disse multi-purpose WordPress-temaene på Envato Market, som bruker lignende AJAX-sidelastteknikker:

Brofremtredendestockholm

Ytterligere referanser

  • Liste over SmoothState.js-alternativer
  • Nydelige, glatte sidetransisjoner med History Web API
  • AJAX for Front-End Designers
Webdesign
×