Share
En nuestro tutorial anterior, usamos la API web de historial dentro de un sitio estático para servir transiciones de página sin problemas. En este tutorial, llevaremos las cosas al siguiente nivel, aplicando lo que aprendimos en un sitio web de WordPress. Habrá una diferencia crucial; Aprovecharemos SmoothState.js en lugar de crear nuestro propio desde cero..
SmoothState.js:
Optaremos por SmoothState.js por varios motivos:
Hay algunas cosas que deberá tener preparadas para seguir este tutorial:
El uso de un "tema secundario" en WordPress (en lugar de trabajar directamente con los archivos del tema original) nos permite introducir de forma segura o anular la funcionalidad predeterminada.
Esta es la mejor práctica cuando se trata de personalizar un tema, ya que cualquier cambio que realice se conservará si se actualiza el tema principal.
En nuestro caso, el tema principal es Veinte veinte dieciséis. El niño reside en otra carpeta nueva "twentysixteen-child" que contiene un archivo "functions.php" y una hoja de estilo "style.css", como sigue.
. ├── años veintiocho └── años veintiocho
La parte más importante de un tema infantil es la Modelo Notación en el encabezado de la hoja de estilo que indica la relación del tema Especificar Modelo con el nombre del directorio del tema padre, en nuestro caso veintiocho
/ ** Nombre del tema: Twenty Sixteen Child Theme URI: https://webdesign.tutsplus.com Autor: Thoriq Firdaus URI del autor: https://tutsplus.com/authors/tfirdaus Descripción: Un tema secundario que agrega una capa adicional de glam to TwentySixteen Versión: 1.0.0 Licencia: GNU General Public License v2 o posterior Licencia URI: http://www.gnu.org/licenses/gpl-2.0.html Dominio de texto: twentysixteen Plantilla: twentysixteen * /
Una vez que esté configurado, active el tema secundario a través del administrador:
El tema secundario de TwentySixteen está activado; es posible que también desee agregar una "screenshot.png"Necesitamos cargar una cantidad de archivos JavaScript en nuestro tema de WordPress. En principio, podríamos hacerlo agregando estos JavaScript directamente a la cabeza Etiqueta en el archivo "header.php" del tema. Siguiendo el estándar de WordPress, sin embargo, se recomienda utilizar el wp_enqueue_script () función, añadida a la funciones.php, Para evitar conflictos:
Accentsconagua
wp_enqueue_script ('smoothstate-js', 'asset / js / smoothstate.js', array ('jquery'), '0.5.2'); wp_enqueue_script ('script-js', 'asset / js / script.js', array ('jquery', 'smoothstate-js'), '1.0.0'); La función también nos permite configurar las dependencias del script. En nuestro caso, el "smoothstate.js" depende de jQuery, por lo tanto, WordPress cargará jQuery antes de cargar "smoothstate.js".
Nuestro archivo "script.js" depende de ambos Scripts, por lo tanto, la secuencia de carga de todos nuestros scripts es la siguiente:
Eche un vistazo a los siguientes tutoriales para obtener más información sobre cómo funciona la puesta en cola de archivos en WordPress:
Agreguemos el siguiente código a nuestro "script.js", para que SmoothState.js esté en funcionamiento:
(function ($) $ (function () // Ready var settings = anchors: 'a'; $ ('#page') .smoothState (settings););) (jQuery); En el código anterior, seleccionamos #página (el elemento que envuelve el contenido de la página del sitio) e implementa SmoothState.js con su configuración más básica.
Nuestras páginas deben servirse sin volver a cargar completamente la ventana del navegador mientras navegamos a través de nuestro sitio de WordPress. Nuestras páginas se entregan ahora de forma asíncrona..
Perdóneme por el contenido ficticio aburrido.Básicamente, estamos listos! Sin embargo, hay algunos detalles que aún merecen atención:
#página que apunta al administrador de WordPress, wp-admin o wp-login.php.#responder, No salte a las secciones designadas en la página..Hay algunos enlaces en la página que apuntan al área de administración de WordPress, como la Editar enlace en cada post, el Inicia sesión como administrador, y el Cerrar sesión antes del formulario de comentarios.
El enlace "Editar" en TwentySixteen que aparece cuando iniciamos sesión.Uno de los problemas cuando SmoothState.js solicita al administrador es que no podremos volver a la página anterior cuando hacemos clic en el navegador. Espalda botón. Este problema se produce porque el script SmoothState.js no está presente en el área de administración para solicitar y servir la página anterior.
No volvemos a la página anterior después de visitar el Panel de WordPress.Tendremos que evitar que SmoothState.js solicite cualquier URL que apunte a wp-admin o wp-login. Para ello podemos utilizar el lista negra parámetro, de la siguiente manera:
(function ($) $ (function () // Ready var settings = anchors: 'a' blacklist: '.wp-link'; $ ('#page') .smoothState (settings);); ) (jQuery); los lista negra el parámetro le dice a SmoothState.js que ignore los enlaces con el selector de clase especificado; y dado el fragmento de código anterior, ignorará los enlaces con enlace wp clase. Este nombre de clase no existe actualmente, por lo que crearemos una nueva clase y la agregaremos dinámicamente a los enlaces necesarios:
function addBlacklistClass () $ ('a') .each (function () if (this.href.indexOf ('/ wp-admin /')! == -1 || this.href.indexOf ('/ wp -login.php ')! == -1) $ (this) .addClass (' wp-link ');); Esta función evalúa cada etiqueta de anclaje en la página, luego agrega enlace wp clase si la URL del enlace incluye / wp-admin / o /wp-login.php.
Ejecutamos esta función dos veces para agregar efectivamente la clase a la página. Primero, en la carga inicial de la página. El segundo es después de que SmoothState.js haya servido la nueva página a través de en después de; un método que se ejecutará cada vez que el nuevo contenido y la animación se hayan entregado completamente.
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 = anchors: 'a', blacklist: '.wp-link', onAfter: function () addBlacklistClass ();; $ ('#page') .smoothState (configuración);); A continuación, necesitamos manejar los enlaces con un hash final. En un tema de WordPress, por lo general, encontraremos uno que enlaza con la sección de comentarios de una publicación o una página..
El 'Deja un comentario' está apuntando a la sección de comentarios de la publicación.Tal como están las cosas, encontrará que el enlace no nos llevará a la sección de comentarios porque la página no se vuelve a cargar o refrescado. Por lo tanto, necesitamos replicar el comportamiento normal esperado.
(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); Como puede ver en el fragmento de código anterior, hemos agregado algunas líneas de códigos en la sección en después de método. El código recupera la URL picadillo, luego se desplaza a la sección designada (si la sección está presente en la página) usando jQuery Animation.
Desplazarse suavemente a la sección de comentarios de la publicación Necesitamos hacer que la transición de la página se sienta más animada. Primero, agregaremos los estilos CSS para animar la página, a los "estilos.css" de nuestro tema infantil, de la siguiente manera.
.contenido del sitio -webkit-transition: -webkit-transform .28s, opacidad .28s; -ms-transición: -o-transformada .28s, opacidad .28s; -o-transición: -o-transformada .28s, opacidad .28s; transición: transformar .28s, opacidad .28s; .slide-out .site-content -webkit-transform: translate3d (0, 100px, 0); -ms-transform: translate3d (0, 100px, 0); -o-transform: translate3d (0, 100px, 0); transformar: translate3d (0, 100px, 0); opacidad: 0;
los .contenido del sitio es el nombre de la clase que envuelve la publicación principal o el contenido de la página, mientras que .deslice es una clase adicional que hemos creado para deslizar el contenido.
(function ($) … $ (function () … var settings = … onStart: duration: 280, // ms render: function ($ container) $ container.addClass ('deslizar hacia fuera'); , onAfter: function ($ container) … $ container.removeClass ('slide-out');; $ ('#page') .smoothState (settings););) (jQuery);Dado el código anterior, utilizamos el onStart método para agregar la clase cuando SmoothState.js comienza a agregar contenido nuevo. Entonces a través de en después de, eliminamos la clase después de que el nuevo contenido ha sido entregado.
Y eso es todo lo que hay que hacer! Sin embargo, hay una cosa que tener en cuenta con respecto a la compatibilidad con algunos complementos de WordPress ...
Hay más de 40.000 complementos de WordPress disponibles, que ni siquiera incluyen complementos que se encuentran fuera del repositorio oficial, como en CodeCanyon, por ejemplo. Hay muchos complementos que podrían no ser compatibles (o incluso interrumpir) nuestra carga asíncrona, en particular los que se basan en scripts en cualquier medida..
La siguiente lista es mi estimación aproximada de algunas de las que es posible que deba considerar al usarlas junto con SmoothState.js:
Además, JavaScript se usa mucho en el Personalizador dentro del Administrador de WordPress. Entonces, puedes pensar en descarga SmoothState.js en el Personalizador, si algo se rompe.
Hemos aprendido cómo integrar SmoothState.js en WordPress, así como aprovechar un tema secundario como nuestra estrategia de desarrollo. ¡Y esto es solo el comienzo! Podríamos, por ejemplo, extender lo que hemos hecho a un complemento con opciones en la configuración donde los usuarios regulares pueden personalizar fácilmente la salida..
Si está buscando inspiración, eche un vistazo a estos temas de WordPress de uso múltiple en Envato Market que utilizan técnicas similares de carga de páginas AJAX:
Puente
saliente
Estocolmo