Share
În tutorialul nostru anterior, am folosit Istoric Web API într-un site static pentru a servi tranziții netede ale paginilor. În acest tutorial vom lua lucrurile la nivelul următor, aplicând ceea ce am învățat pe un site WordPress. Va exista o diferență crucială; vom folosi SmoothState.js în loc să construim propriile noastre de la zero.
SmoothState.js va:
Vom opta pentru SmoothState.js din mai multe motive:
Există câteva lucruri pe care trebuie să le aveți pregătite pentru a urma acest tutorial:
Folosind o "temă copil" în WordPress (în loc să lucrăm direct cu fișierele tematice originale) ne permite să introducem în siguranță noi funcții implicite sau să suprascriem implicit.
Aceasta este cea mai bună practică atunci când vine vorba de personalizarea unei teme, deoarece orice modificări pe care le faceți vor fi păstrate dacă tema părinte este actualizată.
În cazul nostru, tema părintelui este Două mii șaisprezece. Copilul se află într-un alt dosar nou "twentysixteen-child" care conține un fișier "functions.php" și o foaie de stil "style.css", după cum urmează.
. ─ ───────────────────────────────────────────────────────────────────
Cea mai importantă parte a unei teme pentru copii este Format notație în antetul foii de stil care afișează relația temă. Specifica Format cu numele directorului tematic părinte, în cazul nostru două mii șaisprezece
/ ** Tema Nume: Twenty Sixteen Tema pentru copii URI: https://webdesign.tutsplus.com Autor: Thoriq Firdaus Autor URI: https://tutsplus.com/authors/tfirdaus Descriere: O temă copil care adaugă un strat suplimentar de glam to TwentySixteen Versiune: 1.0.0 Licență: GNU General Public License v2 sau mai recent URI de licență: http://www.gnu.org/licenses/gpl-2.0.html Domeniul text: twentysixteen Template: twentysixteen * /
După ce este setat, activați tema copilului prin intermediul administratorului:
Tema copilului TwentySixteen este activată - poate doriți să adăugați și un "screenshot.png"Trebuie să încărăm un număr de fișiere JavaScript în tema WordPress. În principal am putea face acest lucru prin adăugarea acestor JavaScript direct la cap tag în fișierul "header.php" al temei. În conformitate cu standardul WordPress, cu toate acestea, este încurajat să utilizeze wp_enqueue_script () funcția adăugată la functions.php, pentru a preveni conflictele:
Accentsconagua
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'); De asemenea, funcția ne permite să setăm dependențele de script. În cazul nostru, "smoothstate.js" depinde de jQuery, astfel încât WordPress va încărca jQuery înainte de încărcarea "smoothstate.js".
Fișierul nostru "script.js" depinde de ambii script-uri, astfel încât secvența de încărcare a tuturor script-urilor noastre este după cum urmează:
Uitați-vă la următoarele tutoriale pentru a afla mai multe despre cum funcționează fișierele în WordPress:
Să adăugăm următorul cod la "script.js", pentru a obține funcția SmoothState.js:
(funcția ($) $ (funcția () // Pregătit var settings = anchors: 'a'; $ ('#page') .smoothState (setări););) (jQuery); În codul de mai sus, selectăm #pagină (elementul care împachetează conținutul paginii site-ului) și implementă SmoothState.js cu configurația sa cea mai de bază.
Paginile noastre ar trebui să fie servite fără a reîncărca complet fereastra browserului pe măsură ce navigăm pe site-ul nostru WordPress. Paginile noastre sunt livrate acum în mod asincron.
Mă scuzați de conținutul manechinului care nu sa inspirat.Practic, suntem cu toții pregătiți! Cu toate acestea, există câteva detalii încă demne de atenție:
#pagină care se îndreaptă spre administratorul WordPress, wp-admin sau wp-login.php.#răspunde, nu treceți la secțiunile indicate pe pagină.Există câteva linkuri pe pagină care îndreaptă spre zona de administrare WordPress, cum ar fi Editați | × link în fiecare post, Au fost logate ca admin, si Log-out înainte de formularul de comentariu.
Linkul "Editați" în TwentySixteen care apare atunci când suntem conectați.Una dintre problemele în care SmoothState.js solicită administratorului este că nu vom putea reveni la pagina anterioară când faceți clic pe browser Înapoi buton. Această problemă apare deoarece scriptul SmoothState.js nu este prezent în zona de administrare pentru a solicita și a servi pagina anterioară.
Nu reușim să ne întoarcem la pagina anterioară după ce am vizitat tabloul de bord WordPress.Va trebui să prevenim ca SmoothState.js să solicite trimiterea oricărei adrese URL wp-admin sau wp-conectare. Pentru a face acest lucru putem folosi Lista neagră parametru, după cum urmează:
(funcția ($) $ (funcția () // Ready var settings = anchors: 'a' lista neagră: '.wp-link'; ) (jQuery);
Lista neagră parametrul spune SmoothState.js să ignore legăturile cu selectorul de clasă specificat; și având în vedere fragmentul de cod de mai sus, va ignora legăturile cu wp-link clasă. Acest nume de clasă este în prezent inexistent, așa că vom crea o nouă clasă și o vom adăuga dinamic la legăturile necesare:
() () () () () () (if (this.href.indexOf ('/ wp-admin /')) == 1 || this.href.indexOf (' -login.php ')! == -1) $ (acest) .addClass (' wp-link ');); Această funcție evaluează fiecare etichetă de ancorare din pagină, apoi adaugă wp-link dacă adresa URL a link-ului include / Wp-admin / sau /wp-login.php.
Executăm această funcție de două ori pentru a adăuga eficient clasa la pagină. În primul rând, la încărcarea inițială a paginii. Al doilea este după ce SmoothState.js a servit noua pagină prin onAfter; o metodă care va rula de fiecare dată când noul conținut și animație au fost livrate complet.
() () () () () () (if (this.href.indexOf ('/ wp-admin /')) == 1 || this.href.indexOf (' -login.php ')! == -1) $ (acest) .addClass (' wp-link ');); $ (funcția () addBlacklistClass (); var settings = anchors: 'a', lista neagră: '.wp-link', onAfter: function () addBlacklistClass; .smoothState (setări);); Apoi, trebuie să gestionăm legăturile cu un hash trailing. Într-o temă WordPress, vom găsi de obicei unul care face legătura cu secțiunea de comentarii a unui mesaj sau a unei pagini.
Opțiunea "Lăsați un comentariu" indică secțiunea de comentarii a postului.Așa cum stau lucrurile, veți găsi că linkul nu ne va duce la secțiunea de comentarii deoarece pagina nu este reîncărcată sau nu odihnit. Prin urmare, trebuie să replicăm comportamentul normal așteptat.
(funcția ($) ... $ (funcția () ... onAfter: funcția () ... var $ hash = $ (window.location.hash) (scrollTop: (offsetTop - 60),, duration: 280);;);) (jQuery);
După cum puteți vedea din fragmentul de cod de mai sus, am adăugat câteva linii de coduri în secțiunea onAfter metodă. Codul preia adresa URL hașiș, apoi derulează la secțiunea desemnată (dacă secțiunea este prezentă pe pagină) utilizând jQuery Animation.
Derulați fără probleme la secțiunea Comentariu a postării Trebuie să facem tranziția paginii să se simtă mai plină de viață. Mai întâi, vom adăuga stilurile CSS pentru a anima pagina, la tema copiilor noastre "styles.css" după cum urmează.
.site-content -webkit-tranziție: -webkit-transform .28s, opacitate .28s; -ms-tranziție: -o-transformare .28s, opacitate .28s; -o-tranziție: -o-transformare .28s, opacitate .28s; tranziție: transformare .28s, opacitate .28s; .slide-out .site-content -webkit-transform: translate3d (0, 100px, 0); -ms-transform: translate3d (0, 100px, 0); -o-transform: translate3d (0, 100px, 0); transformă: traduce3d (0, 100px, 0); opacitate: 0;
.Site-content este numele clasei care înfășoară postul principal sau conținutul paginii, în timp ce .slide-out este o clasă suplimentară pe care am creat-o pentru a aluneca conținutul.
(funcția ($) ... $ (funcția () ... var setări = ... peStart: duration: 280, // ms render: funcție ($ container) $ container.addClass ('slide-out' , peAfter: functie ($ container) ... $ container.removeClass ('slide-out');; $ ('#page') .smoothState (setări);))) (jQuery);Având în vedere codul de mai sus, vom folosi onStart pentru a adăuga clasa când SmoothState.js începe să tragă conținut nou. Apoi prin onAfter, eliminăm clasa după ce noul conținut a fost livrat.
Și asta este tot ce există! Cu toate acestea, există un singur lucru care trebuie avut în vedere în ceea ce privește compatibilitatea cu unele pluginuri WordPress ...
Există mai mult de 40.000 de pluginuri WordPress disponibile, fără a include chiar plugin-uri care sunt găzduite în afara depozitului oficial, cum ar fi, de exemplu, în CodeCanyon. Există multe pluginuri care ar putea să nu fie compatibile (sau chiar să întrerupă) încărcarea asincronă, în special cele care se bazează în orice mod pe scripturi.
Următoarea listă este estimarea mea brută a unora dintre care ar putea fi necesar să le analizați atunci când le folosiți împreună cu SmoothState.js:
În plus, JavaScript este folosit foarte mult în Customizer din cadrul administratorului WordPress. Deci, vă puteți gândi descărcare SmoothState.js în Customizer, dacă se întâmplă vreodată ceva.
Am învățat cum să integrăm programul SmoothState.js în WordPress, precum și să folosim o temă a copilului drept strategie de dezvoltare. Și acesta este doar un început! Am putea extinde, de exemplu, ceea ce am făcut într-un plugin cu opțiuni în setările în care utilizatorii obișnuiți pot personaliza cu ușurință ieșirea.
Dacă sunteți în căutarea de inspirație, verificați aceste teme WordPress multifuncționale pe Envato Market care utilizează tehnici similare de încărcare a paginilor AJAX:
Pod
proeminent
Stockholm