Share
Nel nostro precedente tutorial, abbiamo utilizzato l'API Web di cronologia all'interno di un sito statico per offrire transizioni di pagina uniformi. In questo tutorial porteremo le cose al livello successivo, applicando ciò che abbiamo appreso in un sito Web WordPress. Ci sarà una differenza cruciale; faremo leva su SmoothState.js invece di crearne di nuovi da zero.
SmoothState.js:
Opteremo per SmoothState.js per una serie di motivi:
Ci sono un paio di cose che dovrai avere pronto per seguire questo tutorial:
L'utilizzo di un "tema figlio" in WordPress (invece di lavorare direttamente con i file del tema originale) ci consente di introdurre in modo sicuro nuove o sovrascrive funzionalità predefinite.
Questa è la migliore procedura quando si tratta di personalizzare un tema, poiché tutte le modifiche apportate verranno mantenute se il tema principale viene aggiornato.
Nel nostro caso, il tema principale è TwentySixteen. Il bambino risiede in un'altra nuova cartella "twentysixteen-child" che contiene un file "functions.php" e un foglio di stile "style.css", come segue.
. ├── twentysixteen └── twentysixteen-child
La parte più importante di un tema figlio è il Modello notazione nell'intestazione del foglio di stile che stabilisce la relazione del tema. Specificare Modello con il nome della directory del tema principale, nel nostro caso twentysixteen
/ ** Nome tema: URI tema Tema di ventisei anni: https://webdesign.tutsplus.com Autore: Thoriq Firdaus Autore URI: https://tutsplus.com/authors/tfirdaus Descrizione: Un tema secondario che aggiunge uno strato aggiuntivo di glam to TwentySixteen Versione: 1.0.0 Licenza: GNU General Public License v2 o successive URI di licenza: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: twentysixteen Template: twentysixteen * /
Una volta impostato, attiva il tema figlio tramite l'amministratore:
Il tema bambino TwentySixteen è attivato: puoi anche aggiungere un "screenshot.png"Abbiamo bisogno di caricare un numero di file JavaScript nel nostro tema WordPress. In linea di principio, potremmo farlo aggiungendo questi JavaScript direttamente a capo tag nel file "header.php" del tema. Seguendo lo standard di WordPress, tuttavia, si consiglia di utilizzare il wp_enqueue_script () funzione, aggiunta al functions.php, al fine di prevenire i conflitti:
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'); La funzione ci consente anche di impostare le dipendenze dello script. Nel nostro caso, "smoothstate.js" dipende da jQuery, quindi WordPress caricherà jQuery prima di caricare "smoothstate.js".
Il nostro file "script.js" dipende da tutti e due script, quindi la sequenza di caricamento di tutti i nostri script è la seguente:
Dai un'occhiata alle seguenti esercitazioni per saperne di più su come funziona l'enqueuing di file in WordPress:
Aggiungiamo il seguente codice al nostro "script.js", al fine di ottenere SmoothState.js attivo e funzionante:
(function ($) $ (function () // Ready var settings = ancore: 'a'; $ ('#page') .smoothState (impostazioni););) (jQuery); Nel codice sopra, selezioniamo #pagina (l'elemento che avvolge il contenuto della pagina del sito) e distribuire SmoothState.js con la sua configurazione di base.
Le nostre pagine dovrebbero essere servite senza ricaricare completamente la finestra del browser mentre navighiamo attraverso il nostro sito WordPress. Le nostre pagine sono ora consegnate in modo asincrono.
Perdonami per il contenuto fittizio non entusiasmante.Fondamentalmente, siamo tutti pronti! Tuttavia, ci sono alcuni dettagli ancora degni di attenzione:
#pagina che punta all'amministratore di WordPress, wp-admin o wp-login.php.#rispondere, non saltare alle sezioni designate sulla pagina.Ci sono alcuni link sulla pagina che puntano all'area di amministrazione di WordPress, come ad esempio modificare link in ogni post, il Registrato come amministratore, e il Disconnettersi prima del modulo di commento.
Link "Modifica" in TwentySixteen che appare quando siamo loggati.Uno dei problemi quando SmoothState.js richiede all'amministratore è che non saremo in grado di tornare alla pagina precedente quando clicchiamo sul browser Indietro pulsante. Questo problema si verifica perché lo script SmoothState.js non è presente nell'area di amministrazione per richiedere e servire la pagina precedente.
Non riusciamo a tornare alla pagina precedente dopo aver visitato il Dashboard di WordPress.Dovremo impedire a SmoothState.js di richiedere qualsiasi URL che punta a wp-admin o wp-login. Per fare questo possiamo utilizzare il lista nera parametro, come segue:
(function ($) $ (function () // Ready var settings = ancore: 'a' lista nera: '.wp-link'; $ ('#page') .smoothState (impostazioni);); ) (jQuery); Il lista nera parametro dice a SmoothState.js di ignorare i collegamenti con il selettore di classe specificato; e dato lo snippet di codice sopra, ignorerà i collegamenti con wp-link classe. Questo nome di classe è al momento inesistente, quindi creeremo una nuova classe e la aggiungeremo dinamicamente ai collegamenti necessari:
function addBlacklistClass () $ ('a') .each (function () if (this.href.indexOf ('/ wp-admin /')! == -1 || this.href.indexOf ('/ wp -login.php ')! == -1) $ (this) .addClass (' wp-link ');); Questa funzione valuta ogni tag di ancoraggio nella pagina, quindi aggiunge wp-link classe se l'URL del link include / Wp-admin / o /wp-login.php.
Eseguiamo questa funzione due volte per aggiungere efficacemente la classe alla pagina. Innanzitutto, sul caricamento iniziale della pagina. Il secondo è dopo che SmoothState.js ha servito la nuova pagina tramite il onAfter; un metodo che verrà eseguito ogni volta che il nuovo contenuto e l'animazione sono stati completamente consegnati.
function addBlacklistClass () $ ('a') .each (function () if (this.href.indexOf ('/ wp-admin /')! == -1 || this.href.indexOf ('/ wp -login.php ')! == -1) $ (this) .addClass (' wp-link ');); $ (function () addBlacklistClass (); var settings = ancore: 'a', lista nera: '.wp-link', onAfter: function () addBlacklistClass ();; $ ('#page') .smoothState (impostazioni);); Successivamente, dobbiamo gestire i collegamenti con un hash finale. In un tema WordPress, di solito ne troviamo uno che collega alla sezione commenti di un post o di una pagina.
Il 'Lascia un commento' sta puntando alla sezione commenti del post.Allo stato attuale, scoprirai che il link non ci porterà nella sezione dei commenti perché la pagina non è effettivamente ricaricata o rinfrescato. Pertanto, abbiamo bisogno di replicare il comportamento normale atteso.
(function ($) ... $ (function () ... onAfter: function () ... var $ hash = $ (window.location.hash); if ($ hash.length! == 0) var offsetTop = $ hash.offset (). top; $ ('body, html') .animate (scrollTop: (offsetTop - 60),, duration: 280);;);) (jQuery); Come puoi vedere dallo snippet di codice precedente, abbiamo aggiunto alcune righe di codici sotto onAfter metodo. Il codice recupera l'URL hash, quindi scorre fino alla sezione designata (se la sezione è presente sulla pagina) utilizzando jQuery Animation.
Scorri facilmente fino alla sezione Commenti del post Dobbiamo rendere la transizione della pagina più vivace. Per prima cosa, aggiungeremo gli stili CSS per animare la pagina, in "styles.css" del nostro tema figlio come segue.
.contenuto del sito -webkit-transition: -webkit-transform .28s, opacity .28s; -ms-transition: -o-transform .28s, opacity .28s; -o-transizione: -o-transform .28s, opacità .28s; transizione: trasforma .28s, opacità .28s; .slide-out .site-content -webkit-transform: translate3d (0, 100px, 0); -ms-transform: translate3d (0, 100px, 0); -o-transform: translate3d (0, 100px, 0); transform: translate3d (0, 100px, 0); opacità: 0;
Il .site-content è il nome della classe che avvolge il post principale o il contenuto della pagina, mentre .sfilare è una classe aggiuntiva che abbiamo creato per far uscire il contenuto.
(function ($) ... $ (function () ... var settings = ... onStart: duration: 280, // ms render: function ($ container) $ container.addClass ('slide-out'); , onAfter: function ($ container) ... $ container.removeClass ('slide-out');; $ ('#page') .smoothState (impostazioni););) (jQuery);Dato il codice sopra, utilizziamo il onStart metodo per aggiungere la classe quando SmoothState.js inizia a inserire nuovi contenuti. Quindi attraverso onAfter, rimuoviamo la classe dopo che il nuovo contenuto è stato consegnato.
E questo è tutto ciò che c'è da fare! Tuttavia, c'è una cosa da tenere a mente per quanto riguarda la compatibilità con alcuni plugin di WordPress ...
Sono disponibili più di 40.000 plug-in WordPress, nemmeno i plug-in ospitati al di fuori del repository ufficiale, come ad esempio CodeCanyon. Ci sono molti plugin là fuori che potrebbero non essere compatibili (o addirittura interrompere) il nostro caricamento asincrono, in particolare quelli che si basano su script in qualsiasi misura.
Il seguente elenco è la mia stima approssimativa di alcuni che potrebbe essere necessario esaminare quando li si utilizza in combinazione con SmoothState.js:
Inoltre, JavaScript è ampiamente utilizzato nel Customizer all'interno dell'amministratore di WordPress. Quindi, puoi pensare a scarico SmoothState.js nel Customizer, se mai qualcosa si rompe.
Abbiamo imparato come integrare SmoothState.js in WordPress, oltre a sfruttare un tema figlio come strategia di sviluppo. E questo è solo l'inizio! Potremmo, ad esempio, estendere ciò che abbiamo fatto in un plugin con le opzioni nelle impostazioni in cui gli utenti regolari possono facilmente personalizzare l'output.
Se stai cercando ispirazione, dai un'occhiata a questi temi WordPress multiuso su Envato Market che utilizzano tecniche di caricamento delle pagine simili AJAX:
ponte
saliente
stoccolma