Share
Dans notre précédent tutoriel, nous avions utilisé l’API Web History au sein d’un site statique pour effectuer des transitions de page en douceur. Dans ce tutoriel, nous allons passer au niveau supérieur en appliquant ce que nous avons appris dans un site Web WordPress. Il y aura une différence cruciale; nous allons tirer parti de SmoothState.js au lieu de construire le nôtre à partir de zéro.
SmoothState.js va:
Nous allons opter pour SmoothState.js pour plusieurs raisons:
Pour pouvoir suivre ce didacticiel, vous devez disposer de plusieurs éléments:
L'utilisation d'un «thème enfant» dans WordPress (au lieu de travailler directement avec les fichiers de thème d'origine) nous permet d'introduire en toute sécurité de nouvelles fonctionnalités ou de remplacer les fonctionnalités par défaut..
Il est recommandé de personnaliser un thème, car toutes les modifications que vous apportez seront conservées si le thème parent est mis à jour..
Dans notre cas, le thème parent est Vingt seize. L'enfant réside dans un autre nouveau dossier "vingt-six-enfant" qui contient un fichier "functions.php" et une feuille de style "style.css", comme suit.
. Vingt-six seize └── vingt-seize ans
La partie la plus importante d’un thème pour enfants est la Modèle notation dans l'en-tête de la feuille de style qui indique la relation de thème. Spécifier Modèle avec le nom du répertoire de thème parent, dans notre cas vingt-six
/ ** Nom du thème: Twenty Sixteen Child URI du thème: https://webdesign.tutsplus.com Auteur: Thoriq Firdaus URI de l'auteur: https://tutsplus.com/authors/tfirdaus Description: Un thème enfant qui ajoute une couche supplémentaire de Glam to TwentySixteen Version: 1.0.0 Licence: Licence publique générale GNU v2 ou ultérieure URI de la licence: http://www.gnu.org/licenses/gpl-2.0.html Domaine de texte: twentysixteen Modèle: twentysixteen * /
Une fois cela défini, activez le thème enfant via l’administrateur:
Le thème enfant TwentySixteen est activé. Vous pouvez également ajouter un "screenshot.png".Nous devons charger un certain nombre de fichiers JavaScript dans notre thème WordPress. En principe, nous pourrions le faire en ajoutant ces JavaScript directement à la tête balise dans le fichier “header.php” du thème. Suivant le standard WordPress, il est toutefois recommandé d’utiliser le wp_enqueue_script () fonction, ajoutée à la functions.php, afin de prévenir les conflits:
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 fonction nous permet également de définir les dépendances de script. Dans notre cas, le fichier «smoothstate.js» dépend de jQuery. Par conséquent, WordPress chargera jQuery avant le chargement de «smoothstate.js»..
Notre fichier «script.js» dépend de tous les deux scripts, ainsi la séquence de chargement de tous nos scripts est la suivante:
Consultez les didacticiels suivants pour en savoir plus sur le fonctionnement de la mise en file d'attente de fichiers dans WordPress:
Ajoutons le code suivant à notre "script.js", afin de rendre SmoothState.js opérationnel:
(function ($) $ (function () // Ready var settings = ancres: 'a'; $ ('#page') .smoothState (settings);) (jQuery); Dans le code ci-dessus, nous sélectionnons #page (l'élément qui enveloppe le contenu de la page du site) et déployez SmoothState.js avec sa configuration la plus basique.
Nos pages doivent être servies sans recharger complètement la fenêtre du navigateur lorsque nous naviguons sur notre site WordPress. Nos pages sont maintenant livrées de manière asynchrone.
Pardonnez-moi pour le contenu factice sans intérêt.Fondamentalement, nous sommes tous ensemble! Cependant, quelques détails méritent encore l’attention:
#page qui pointe vers l'administrateur WordPress, wp-admin ou wp-login.php.#répondre, ne sautez pas aux sections désignées sur la page.Quelques liens sur la page pointant vers la zone d’administration de WordPress, tels que le modifier lien dans chaque message, le Connecté en tant qu'administrateur, et le Connectez - Out avant le formulaire de commentaire.
Lien «Modifier» dans TwentySixteen qui apparaît lorsque nous sommes connectés.L'un des problèmes lorsque SmoothState.js demande à l'administrateur est que nous ne pourrons pas revenir à la page précédente en cliquant sur le navigateur. Retour bouton. Ce problème se produit car le script SmoothState.js n'est pas présent dans la zone d'administration pour demander et servir la page précédente.
Nous ne parvenons pas à revenir à la page précédente après avoir visité le tableau de bord WordPress.Nous devrons empêcher SmoothState.js de demander toute URL pointant vers wp-admin ou wp-login. Pour ce faire, nous pouvons utiliser le liste noire paramètre, comme suit:
(function ($) $ (function () // Ready var settings = ancres: 'a' liste noire: '.wp-link'; $ ('#page') .smoothState (settings);); ) (jQuery); le liste noire paramètre dit à SmoothState.js d'ignorer les liens avec le sélecteur de classe spécifié; et étant donné l'extrait de code ci-dessus, il ignorera les liens avec wp-link classe. Ce nom de classe est actuellement inexistant, nous allons donc créer une nouvelle classe et l'ajouter dynamiquement aux liens nécessaires:
fonction addBlacklistClass () $ ('a') .each (function () if (this.href.indexOf ('/ wp-admin /')!! == -1 || this.href.indexOf ('/ wp -login.php ')! == -1) $ (this) .addClass (' wp-link ');); Cette fonction évalue chaque balise d'ancrage sur la page, puis ajoute wp-link classe si l'URL du lien comprend / wp-admin / ou /wp-login.php.
Nous exécutons cette fonction deux fois pour ajouter efficacement la classe à la page. Tout d'abord, lors du chargement initial de la page. La seconde est après que SmoothState.js ait servi la nouvelle page via le onAfter; une méthode qui s'exécutera à chaque fois que le nouveau contenu et l'animation ont été complètement livrés.
fonction 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 = ancres: 'a', liste noire: '.wp-link', onAfter: function () addBlacklistClass ();; $ ('#page') .smoothState (paramètres);); Ensuite, nous devons gérer les liens avec un hachage de fin. Dans un thème WordPress, nous en trouverons généralement un qui renvoie à la section commentaire d'un article ou d'une page..
Le 'Laisser un commentaire' pointe vers la section commentaire du message.En l'état actuel des choses, vous constaterez que le lien ne nous mènera pas à la section commentaire car la page n'est pas réellement rechargée ou rafraîchi. Par conséquent, nous devons reproduire le comportement normal attendu.
(fonction ($) … $ (fonction () … 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); Comme vous pouvez le voir dans l'extrait de code ci-dessus, nous avons ajouté quelques lignes de codes sous le onAfter méthode. Le code récupère l'URL hacher, puis fait défiler jusqu'à la section désignée (si la section est présente sur la page) à l'aide de jQuery Animation.
Faites défiler en douceur jusqu'à la section Commentaire du message Nous devons rendre la transition de page plus vivante. Tout d'abord, nous allons ajouter les styles CSS pour animer la page, dans le "styles.css" de notre thème enfant, comme suit.
.site-content -webkit-transition: -webkit-transform .28s, opacité .28s; -ms-transition: -o-transformer .28s, opacité .28s; -o-transition: -o-transformer .28s, opacité .28s; transition: transformer .28s, opacité .28s; .slide-out .site-content -webkit-transform: translate3d (0, 100px, 0); -ms-transform: translate3d (0, 100px, 0); -o-transformer: translate3d (0, 100px, 0); transformer: translate3d (0, 100px, 0); opacité: 0;
le .contenu du site est le nom de la classe qui englobe le contenu principal de la publication ou de la page, tandis que .glisser est une classe supplémentaire que nous avons créée pour faire glisser le contenu.
(function ($) … $ (function () … var settings = … onStart: durée: 280, // ms rendu: function ($ conteneur) conteneur.addClass ('slide-out'); , onAfter: function ($ container) … $ container.removeClass ('slide-out');; $ ('#page') .smoothState (settings););) (jQuery);Compte tenu du code ci-dessus, nous utilisons le onStart méthode pour ajouter la classe lorsque SmoothState.js commence à extraire du nouveau contenu. Puis à travers onAfter, nous supprimons la classe après la livraison du nouveau contenu.
Et c'est tout ce qu'il y a à faire! Cependant, il y a une chose à garder à l'esprit concernant la compatibilité avec certains plugins WordPress…
Plus de 40 000 plugins WordPress sont disponibles, sans compter les plugins hébergés en dehors du référentiel officiel en compte, comme sur CodeCanyon par exemple. Il existe de nombreux plug-ins qui pourraient ne pas être compatibles (ou même casser) notre chargement asynchrone, en particulier ceux qui reposent sur des scripts..
La liste suivante est une estimation approximative de certaines de celles que vous devrez peut-être examiner lors de leur utilisation avec SmoothState.js:
De plus, JavaScript est fortement utilisé dans le Customizer au sein de l’administrateur de WordPress. Alors, vous pouvez penser à déchargement SmoothState.js dans le Customizer, si quelque chose se brise.
Nous avons appris à intégrer SmoothState.js dans WordPress et à utiliser un thème enfant en tant que stratégie de développement. Et ce n'est qu'un début! Nous pourrions, par exemple, étendre ce que nous avons fait dans un plugin avec des options dans les paramètres où les utilisateurs normaux peuvent facilement personnaliser la sortie..
Si vous recherchez de l'inspiration, découvrez ces thèmes WordPress polyvalents sur Envato Market, qui utilisent des techniques de chargement de page AJAX similaires:
Pont
saillant
Stockholm