Hur man integrerar SmoothState.js i ett WordPress-tema

I vår tidigare handledning använde vi API för History Web på en statisk webbplats för att fungera smidiga sidövergångar. I denna handledning tar vi saker till nästa nivå genom att tillämpa det vi lärde oss på en WordPress-webbplats. Det kommer att vara en avgörande skillnad; Vi kommer att utnyttja SmoothState.js istället för att bygga våra egna från början. 

SmoothState.js kommer att:

• Begär sidor asynkront (AJAX) och ersätt innehållet i enlighet därmed.
• Uppdatera webbadresser och surfhistorik via API-nätet för historia.

Vi väljer SmoothState.js av flera anledningar:

• Enkel användning: det är ett extremt enkelt att använda jQuery-plugin, vilket knappt kräver någon konfiguration för att få den igång.
• API: SmoothState.js är fylld med metoder, egenskaper och krokar som gör att vi kan mögla det i många möjliga situationer.
• Förhämtning och caching: Dessa två funktioner gör det möjligt att våra sidövergångar blir mycket jämnare och snabbare än vad vi byggde i den tidigare handledningen.
• Det är oöppnat: SmoothState.js dikterar inte hur vi tillämpar animationen - vi kan luta oss på CSS, jQuery, Vanilla JavaScript eller ett animationsbibliotek som Velocity.js.
• Försökt och testat: Med tanke på att mer än hundra problem har stängts under dess utveckling, kan vi anta att många buggar har tagits upp.

förutsättningar

Det finns några saker du måste ha redo för att följa denna handledning:

• Wordpress: ha en löpande WordPress-webbplats, antingen lokalt på din dator eller live på en online-server krävs. Om du behöver hjälp för det här steget, kolla in Tom McFarlin hur du kommer igång med WordPress för att komma igång med en grundläggande WordPress-webbplats.
• Ett tema: Under denna handledning kommer vi att använda det senaste standard WordPress-temat: TwentySixteen. Du kan välja något tema, men se till att temat är kompatibelt med WordPress-standarder.

1. Skapa ett barntema

Genom att använda ett "barntema" i WordPress (istället för att arbeta direkt med de ursprungliga temafilerna) kan vi säkert introducera nya eller åsidosätta standardfunktionalitet.

Det här är bästa praxis när det gäller att anpassa ett tema, eftersom alla ändringar du gör kommer att bevaras om modertemat uppdateras.

I vårt fall är överordnatema Tjugo sexton. Barnet ligger i en annan ny mapp "twentysixteen-child" som innehåller en "functions.php" -fil och ett stylesheet "style.css", enligt följande.

. ├── twentysixteen └─ - twentysixteen-child

Den viktigaste delen av ett barntema är Mall notering i stilarksrubriken som anger temrelationen. Specificera Mall med namnet på moderkatalogen, i vårt fall tjugo sexton

/ ** Tema Namn: Twenty Sixteen Child Theme URI: https://webdesign.tutsplus.com Författare: Thoriq Firdaus Författare URI: https://tutsplus.com/authors/tfirdaus Beskrivning: Ett barntema som lägger till ett extra lager av glam till TwentySixteen Version: 1.0.0 Licens: GNU General Public License v2 eller senare Licens URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domän: twentysixteen Mall: twentysixteen * /

När det är inställt aktivera barntemat via admin:

TwentySixteen barntema är aktiverat - du kanske vill lägga till en "screenshot.png" också

2. Förneka JavaScript-filerna

Vi måste ladda ett antal JavaScript-filer till vårt WordPress-tema. I princip kan vi göra det genom att lägga till dessa JavaScript direkt till huvud tagga i temat "header.php" -filen. Efter WordPress-standarden uppmanas det dock att använda wp_enqueue_script () funktion, läggas till functions.php, för att förhindra 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'); 

Funktionen gör det också möjligt för oss att ställa in manusförhållandena. I vårt fall beror "smoothstate.js" på jQuery, så WordPress laddar jQuery innan du laddar "smoothstate.js". 

Vår fil "script.js" beror på både skript, så är laddningssekvensen för alla våra skript som följer:

Ta en titt på följande handledning för att lära dig mer om hur filen enqueuing i WordPress fungerar:

3. Använda SmoothState.js

Låt oss lägga till följande kod till vår "script.js", för att få SmoothState.js igång:

(funktion ($) $ (funktion () // Ready var-inställningar = ankare: 'a'; $ ('#page') .smoothState (inställningar););) (jQuery); 

I ovanstående kod väljer vi #sida (det element som sveper webbplatsens innehåll) och distribuera SmoothState.js med sin mest grundläggande konfiguration.

Våra sidor ska serveras utan att helt ladda om webbläsarfönstret när vi navigerar via vår WordPress-webbplats. Våra sidor levereras nu asynkront.

Pardon me för det oinspirerande dummyinnehållet.

I grund och botten är vi alla uppsatta! Det finns dock några detaljer som fortfarande är uppmärksamma:

• Det finns några webbadresser som ska inte laddas asynkront, till exempel länken inom #sida som pekar på WordPress Admin, wp-admin eller wp-login.php.
• Länkar med en efterföljande hash, till exempel #svara, Hoppa inte till de utsedda sektionerna på sidan.
• Vår sida belastning är flammande snabbt. Men det känns fortfarande inte smidigt eftersom vi inte har tillämpat någon animation för att förmedla övergången.

4. WordPress Admin Länkar

Det finns några länkar på sidan som pekar på WordPress-administratörsområdet, till exempel Redigera länk i varje inlägg, Logga in som admin, och den Logga ut före kommentarformuläret.

"Redigera" länken i TwentySixteen som visas när vi är inloggade.

Ett av problemen när SmoothState.js begär administratören är att vi inte kommer att kunna gå tillbaka till föregående sida när vi klickar på webbläsaren Tillbaka knapp. Problemet uppstår eftersom SmoothState.js-skriptet inte finns i Admin-området för att begära och servera föregående sida.

Vi misslyckas med att gå tillbaka till föregående sida efter att ha besökt WordPress Dashboard.

Vi måste förhindra SmoothState.js från att be om någon webbadress som pekar på wp-admin eller wp-login. För att göra detta kan vi utnyttja svartlista parameter, enligt följande:

(funktion ($) $ (funktion () // Klar var inställningar = ankare: 'a' svartlista: '.wp-link'; $ ('#page') .smoothState (inställningar);); ) (jQuery); 

De svartlista parameter berättar SmoothState.js för att ignorera länkarna med den angivna klassväljaren; och med ovanstående kodseddel ignoreras länkarna med wp-länk klass. Det här klassnamnet är för närvarande obefintligt, så vi skapar en ny klass och lägger den dynamiskt till de nödvändiga länkarna:

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

Denna funktion utvärderar varje ankerkod på sidan och lägger sedan till wp-länk klass om länken URL inkluderar / Wp-admin / eller /wp-login.php.

Vi utför denna funktion två gånger för att effektivt lägga till klassen på sidan. Först, på den första sidan ladda. Den andra är efter att SmoothState.js har serverat den nya sidan via onAfter; en metod som kommer att köras varje gång det nya innehållet och animationen har levererats helt.

funktion addBlacklistClass () $ ('a') .each (funktion () if (this.href.indexOf ('/ wp-admin /')! == -1 || this.href.indexOf ('/ wp -login.php ')! == -1) $ (detta) .addClass (' wp-link '););  $ (funktion () addBlacklistClass (); var inställningar = ankare: 'a', svartlista: '.wp-länk', påAfter: funktion () addBlacklistClass ();; $ ('#page') .smoothState (inställningar);); 

5. Hantera Link Hash

Därefter måste vi hantera länkar med en efterföljande hash. I ett WordPress-tema kommer vi vanligtvis att hitta en som länkar till kommentarsektionen i ett inlägg eller en sida.

"Lämna en kommentar" pekar på kommentarsektionen i posten.

När det gäller saker, hittar du länken tar inte oss till kommentarsektionen eftersom sidan inte är faktiskt omladdad eller uppdateras. Därför måste vi replikera det förväntade normala beteendet.

(funktion ($) ... $ (funktion () ... onAfter: funktion () ... var $ hash = $ (window.location.hash); om ($ hash.length! == 0) var offsetTop = $ hash.offset (). top; $ ('body, html') .animate (scrollTop: (offsetTop - 60), duration: 280);;);) (jQuery); 

Som du kan se från ovanstående kodbit, har vi lagt till några rader av koder under onAfter metod. Koden hämtar URL: en hash, rullar sedan till det avsnitt som anges (om avsnittet finns på sidan) med jQuery Animation.

Rulla lätt till kommentarsektionen i inlägget 

6. Använda Sidrörelse

Vi behöver göra sidövergången mer levande. Först lägger vi till CSS-stilar för att animera sidan, till vårt barntema's "styles.css" enligt följande.

.webbplatsinnehåll -webkit-övergång: -webkit-transform .28s, opacity.228s; -ms-övergång: -o-transformera .28s, opacitet .28s; -o-övergång: -o-transformera .28s, opacitet .28s; övergång: transformera .28s, opacitet .28s;  .slide-out .site-innehåll -webkit-transform: translate3d (0, 100px, 0); -ms-transform: translate3d (0, 100px, 0); -o-transform: translate3d (0, 100px, 0); transformera: translate3d (0, 100px, 0); opacitet: 0;  

De .site-innehåll är klassnamnet som wraps huvudposten eller sidinnehållet, medan .glida ut är en ytterligare klass som vi har skapat för att skjuta in innehållet.

(funktion ($) ... $ (funktion () ... var inställningar = ... onStart: varaktighet: 280, // ms render: funktion ($ container) $ container.addClass ('slide-out'); , onAfter: funktion ($ container) ... $ container.removeClass ('slide-out');; $ ('#page') .smoothState (inställningar););) (jQuery);

Med ovanstående kod använder vi onStart Metod för att lägga till klassen när SmoothState.js börjar dra in nytt innehåll. Sedan igenom onAfter, Vi tar bort klassen efter det att det nya innehållet har levererats.

Och det är allt det finns! Det finns fortfarande en sak att tänka på om kompatibilitet med vissa WordPress-plugins ...

Vad kommer härnäst?

Det finns mer än 40.000 WordPress-plugins tillgängliga, inte ens med plugins som är värd utanför det officiella förvaret, med tanke på exempelvis CodeCanyon. Det finns många plugins där ute som kanske inte är kompatibla (eller till och med bryta) vår asynkrona laddning, särskilt de som är beroende av skript i någon utsträckning.

Följande lista är min grova uppskattning av några som du kanske behöver titta på när du använder dem i kombination med SmoothState.js:

• WordPress.com Stat (en Jetpack-modul)
• Karusell (en Jetpack-modul)
• Oändlig Scroll (en Jetpack-modul)
• Google Analytics för WordPress
• Disqus
• Lazy Load

Dessutom används JavaScript kraftigt i Customizer i WordPress-administratören. Så kanske du tänker på avlastning SmoothState.js i Customizer, om någonting någonsin bryts.

Slutsats

Vi har lärt oss hur man integrerar SmoothState.js i WordPress, liksom att utnyttja ett barntema som vår utvecklingsstrategi. Och det här är bara en början! Vi kan till exempel utöka vad vi gjort i ett plugin med alternativ i inställningarna där vanliga användare enkelt kan anpassa utmatningen.

Inspiration

Om du letar efter inspiration, kolla in dessa multifunktionella WordPress-teman på Envato Market, som använder liknande AJAX-sidladdningstekniker:

Broframträdandestockholm

Ytterligare referenser

• Lista över SmoothState.js-alternativ
• Underbara, smidiga sidövergångar med API för historia
• AJAX för Front-End Designers