Cómo agregar una animación de carga de página (Preloader) en WordPress

La velocidad de la página juega un papel fundamental en el rendimiento de su sitio web. Si una página tarda más de uno o dos segundos en cargarse por completo, eso puede frustrar a los usuarios lo suficiente como para que abandonen su sitio. Sin embargo, puede ayudar si el visitante tiene algo atractivo para mirar mientras la página termina de cargarse.

Una animación de carga de página, o "animación de precarga", ayuda a informar a los visitantes que una página se está cargando (no está atascada) y aumenta la probabilidad de que permanezcan en el sitio. De esta forma, puede mejorar la Experiencia de Usuario (UX) y reducir sus tasas de rebote.

En esta publicación, explicaremos los beneficios de las animaciones de precarga y cuándo usar una. Luego, lo guiaremos a través de sus opciones para agregar una animación de carga de página de WordPress. ¡Empecemos!

¿Qué es una animación de precarga?

Una animación de precarga indica a los usuarios que una página se está cargando activamente. Es una animación simple que se puede usar como indicador de progreso para páginas que solo cargan ciertas piezas de contenido a la vez.

Los precargadores de WordPress brindan a los visitantes algo más agradable e interesante para mirar en segundos mientras esperan que la página completa termine de cargarse. En algunos casos, incluso pueden ofrecer una estimación de cuánto tiempo queda.

¿Cuándo debo usar un precargador?

Un precargador es una opción inteligente cuando tiene un sitio de WordPress con muchos videos o imágenes que tarda un poco más en cargarse de lo normal. De esa manera, los visitantes estarán seguros de que su sitio está funcionando según lo previsto y no está dañado.

Sin embargo, si su sitio se basa principalmente en texto, es posible que no sea necesaria una animación de precarga. En cambio, tendría más sentido centrarse en mejorar la velocidad de su página.

2 opciones para agregar una animación de carga de página a WordPress

Hay dos métodos principales que puede usar para agregar una animación de precarga de WordPress a su sitio. Puede usar un complemento, que es la opción más fácil, o realizar la tarea manualmente. Echemos un vistazo a cómo empezar con ambos métodos.

Opción 1: agregue una animación de precarga usando un complemento

Agregar una animación de precarga a través de un complemento es la opción más rápida y fácil para la mayoría de los usuarios. Hay un puñado de complementos que puede usar, pero recomendamos WP Smart Preloader:

Este es un complemento gratuito y altamente personalizable. Utiliza CSS y un marcado HTML mínimo para ayudar a reducir el riesgo de que los usuarios abandonen su sitio web a medida que se carga el contenido. En los siguientes pasos, le mostraremos cómo funciona.

Paso 1: Descarga WP Smart Preloader

Puede descargar el complemento WP Smart Preloader a través del directorio de complementos de WordPress. Luego, puede cargar el archivo .zip en su sitio de WordPress, yendo a Complementos> Agregar nuevo> Cargar complemento en el panel de administración:

Otra opción es buscar el complemento a través de la barra de búsqueda en la pantalla Complemento > Agregar nuevo :

De cualquier manera, una vez que el complemento esté instalado, haga clic en el botón Activar . Luego puede ubicar sus opciones en Configuración> WP Smart Preloader .

Paso 2: selecciona tu estilo

En la página de configuración de WP Smart Preloader, lo primero que debe hacer es seleccionar un estilo para el precargador. En la sección Seleccionar precargador , habrá un menú desplegable que le permitirá elegir entre seis opciones de estilo, así como una opción para animación personalizada:

Una vez que seleccione un estilo, puede obtener una vista previa en la ventana a continuación. Si desea agregar su propia animación personalizada, puede incluir su código HTML en la sección Animación personalizada :

Al final de esta pantalla, puede establecer la duración del cargador y el efecto de 'desvanecimiento':

Si deja estos campos en blanco, los valores predeterminados se establecerán en 1500 milisegundos (1,5 segundos) y 2500 milisegundos (2,5 segundos) respectivamente. Cuando haya terminado, haga clic en el botón Guardar cambios .

Paso 3: Obtenga una vista previa de la animación de su precargador

Una vez que haya terminado de configurar sus ajustes, visite su sitio de WordPress en una nueva pestaña del navegador para obtener una vista previa de la animación del precargador. Puede regresar para hacer cualquier cambio de estilo según sea necesario. Una vez que esté satisfecho con el precargador, estará configurado y listo para funcionar.

Opción 2: agregar una animación de precarga manualmente

Si no está interesado en usar un complemento, aún puede agregar esta función a su sitio manualmente. La principal ventaja de crear un precargador personalizado es que tiene más flexibilidad en su diseño.

Por supuesto, también es un proceso más difícil. A continuación, lo guiaremos a través de cómo crear, cargar y formatear una animación de precarga personalizada para su sitio de WordPress.

Paso 1: Haz una lluvia de ideas sobre tu animación

El primer paso es decidir qué tipo de animación vas a utilizar. Puede buscar otras herramientas de animación de precarga para tener una idea del estilo que le gusta. Hay algunas animaciones gratuitas que puede usar y explorar en Codepen, que pueden ser una excelente manera de obtener algunas ideas.

Paso 2: desarrolle o descargue su animación

Para desarrollar su animación, puede usar una herramienta como Photoshop para crear un GIF o una animación de precarga giratoria. También puede consultar nuestro recurso sobre la creación de animaciones de WordPress usando CSS.

Recomendamos el último enfoque, ya que agregar un precargador de GIF a su sitio de WordPress se hace mejor con un complemento. Además de Codepen (mencionado anteriormente), también puede descargar una animación de sitios como Spinkit y LoadLab.

Para este tutorial, usaremos una animación de precarga de Spinkit. Independientemente de dónde obtenga su animación, necesitará su código fuente CSS para agregarlo manualmente a su sitio de WordPress:

La mayoría de las animaciones de precargador gratuitas incluirán un enlace de origen, donde puede encontrar tanto su HTML como su CSS:

Tenga en cuenta que también puede usar el código fuente CSS de una animación de precarga y luego personalizarlo a su gusto.

Paso 3: crea un tema secundario

Una vez que tenga su animación, puede agregarla a su sitio de WordPress. La forma más segura de hacerlo es configurar un tema secundario. Si no está seguro de cómo hacerlo, puede revisar nuestro tutorial sobre cómo crear un tema secundario de WordPress.

Paso 4: agregue código HTML al archivo header.php de su tema

El siguiente paso es ubicar el archivo header.php para su tema de WordPress. Puede hacerlo a través de la pantalla del Editor de temas de WordPress:

También puede editar los archivos usando un cliente FTP como FileZilla. El archivo se ubicará en la carpeta wp-content > themes en el directorio raíz de su sitio.

Una vez que localice y abra el archivo, inserte el siguiente código HTML debajo de la etiqueta del cuerpo:

 <!--CSS Spinner--> <div class="spinner-wrapper"> <div class="spinner"></div> </div>

Ajuste o agregue cualquier código HTML que sea necesario para su animación particular de precarga de WordPress y guarde el archivo.

Paso 5: agregue el código CSS a su hoja de estilo

Ahora es el momento de agregar CSS para diseñar su animación. Localice la hoja de estilo CSS ( style.css ) para su tema de WordPress, luego copie y pegue el código fuente CSS para su animación. En nuestro caso, agregaremos lo siguiente:

 .spinner { margin: 100px auto; width: 50px; height: 40px; text-align: center; font-size: 10px; } .spinner > div { background-color: #333; height: 100%; width: 6px; display: inline-block; -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; animation: sk-stretchdelay 1.2s infinite ease-in-out; } .spinner .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .spinner .rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .spinner .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .spinner .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } @-webkit-keyframes sk-stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 20% { -webkit-transform: scaleY(1.0) } } @keyframes sk-stretchdelay { 0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); } 20% { transform: scaleY(1.0); -webkit-transform: scaleY(1.0); } }

Antes de guardar los cambios, elimine esta parte: "margen: 100px automático;". En su lugar, copie y pegue lo siguiente:

 position: absolute; top: 48%; left: 48%;

Luego puede guardar el archivo.

Paso 6: agregue el código jQuey para que la animación funcione

Para que la animación del precargador giratorio funcione, deberá agregar un poco de jQuery. Para hacer eso, puede navegar de regreso al archivo header.php e insertar lo siguiente antes de la etiqueta del cuerpo de cierre:

 <script> $(document).ready(function() { //Preloader preloaderFadeOutTime = 500; function hidePreloader() { var preloader = $('.spinner-wrapper'); preloader.fadeOut(preloaderFadeOutTime); } hidePreloader(); }); </script>

Luego guarde su archivo y obtenga una vista previa de su sitio para asegurarse de que la animación del precargador de WordPress funcione según lo previsto.

Encuentre más consejos y guías de WP Engine

Agregar animaciones de precarga de WordPress a su sitio puede ayudar a atraer visitantes y reducir las tasas de rebote. Además, tiene múltiples opciones para hacer el trabajo rápidamente.

En WP Engine, nuestra misión es proporcionar consejos, trucos y recursos para desarrolladores, para ayudarlo a garantizar que su sitio web siempre se vea de la mejor manera. ¡Aprenda más sobre nuestros planes hoy!