Cómo agregar una animación de precargador a WordPress (paso a paso)

¿Desea agregar un precargador a su sitio de WordPress? Un precargador es una animación que indica el progreso de una carga de página en segundo plano.

Los precargadores aseguran a los usuarios que el sitio web está trabajando para cargar la página. Esto puede ayudar a mejorar la experiencia del usuario y reducir la tasa de rebote general.

En este artículo, le mostraremos cómo agregar fácilmente un precargador a WordPress.

Agregar un precargador a su sitio web de WordPress

¿Qué es un precargador y cuándo debe usarlo?

Un precargador es una animación o mensaje de estado que indica el progreso de la carga de la página en segundo plano.

Normalmente, cuando visita un sitio web, su navegador comienza a descargar diferentes partes del contenido. Algunas partes del sitio web se cargan más rápido (es decir, texto, código HTML, CSS), mientras que otras se cargan más lentamente (es decir, imágenes y videos).

Si la mayor parte de su contenido es texto con muy pocas imágenes y videos, entonces realmente no necesita agregar un precargador a su sitio web. En su lugar, debe centrarse en mejorar la velocidad y el rendimiento del sitio web para cargas de página más rápidas.

Por otro lado, si la mayor parte de su contenido es imágenes, fotografías e incrustaciones de video, entonces sus usuarios deben esperar un poco antes de que puedan ver todo el contenido.

Durante estas descargas parciales, su sitio web puede parecer lento. A veces, los usuarios pueden incluso pensar que está roto. Agregar un precargador, llena este vacío y muestra al usuario un indicador de progreso durante la carga de la página.

Puede ver un ejemplo en vivo de un precargador haciendo clic en el botón Vista previa mientras escribe una publicación de blog en WordPress.

WordPress abrirá una vista previa en vivo de la publicación de tu blog en una nueva ventana, y mostrará un precargador antes de que realmente muestre la vista previa en vivo.

Preloader de vista previa de publicaciones de WordPress

Dicho esto, echemos un vistazo a cómo puede agregar fácilmente un precargador a su sitio web de WordPress.

Método 1. Agregar un precargador en WordPress usando WP Smart Preloader

Se recomienda este método porque es más fácil de implementar y no requiere ningún cambio en su tema de WordPress.

Lo primero que debe hacer es instalar y activar el complemento WP Smart Preloader. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

Tras la activación, debe visitar Configuración »WP Smart Preloader página para configurar los ajustes del complemento.

Configuración de WP Smart Preloader

Primero, debe elegir un estilo de precargador o una animación de carga de página. El complemento viene con seis animaciones incorporadas para elegir. También puede cargar su propio HTML y CSS personalizado para crear un precargador personalizado.

Después de eso, puede hacer que el precargador aparezca solo en la página de inicio marcando la opción "Mostrar solo en la página de inicio".

A continuación, debe desplazarse hacia abajo hasta la sección "Duración para mostrar el cargador". Debe especificar la duración del precargador. La opción predeterminada es 1500 milisegundos (1,5 segundos), que debería funcionar para la mayoría de los sitios, pero puede cambiarla si lo desea.

Establecer la duración del precargador y desvanecerse

También puede configurar el tiempo que tarda el cargador en desaparecer por completo. La opción predeterminada es 2500 segundos o 2.5 segundos.

Finalmente, no olvide hacer clic en el botón "Guardar cambios" para almacenar su configuración.

Ahora puede visitar su sitio web para ver el precargador en acción.

Previsualización de WP Smart Preloader

Método 2. Agregar un Preloader en WordPress usando el Preloader Plugin

Este método es flexible pero requiere pasos adicionales para implementarlo adecuadamente en su sitio de WordPress.

Lo primero que debe hacer es instalar y activar el complemento Preloader. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

Tras la activación, debe visitar el Complementos »Preloader página para configurar los ajustes del complemento.

Configuraciones de precargador

Primero, debe ingresar el código hexadecimal para el color de fondo que desea usar para la pantalla de carga. La opción predeterminada es #FFFFFF (blanco). Puede usar una herramienta de selección de color en línea para encontrar el código HEX para el color que desea usar.

A continuación, debe proporcionar la URL de la imagen del precargador que desea usar. El complemento viene con una imagen de animación predeterminada.

Si desea utilizar otra animación, encontrará un enlace para descargar una imagen animada del precargador de un sitio web de terceros. Luego puede cargar esa imagen en su carpeta wp-content y pegar la URL aquí.

A continuación, debe elegir dónde desea mostrar el precargador.

Seleccionar ubicaciones de precargador

Puede optar por mostrarlo en todas las páginas de su sitio web, o puede seleccionar una sección específica.

Finalmente, verá las instrucciones para agregar el siguiente código al archivo header.php de su tema de WordPress.

Antes de abandonar la página, no olvide hacer clic en el botón "Guardar cambios" para almacenar su configuración.

No recomendamos agregar código a su tema de WordPress porque se borrará cuando actualice el tema.

Si está utilizando un tema secundario, entonces está bien agregar el código al archivo header.php de su tema secundario.

Una solución aún mejor sería agregar este código usando un complemento de fragmentos de código por separado, o en un complemento específico del sitio.

Aquí está el código que debe agregar:

function wpb_add_preloader() {
echo '
'; } add_action( 'wp_body_open', 'wpb_add_preloader' );

Nota: Este método de agregar código solo funcionará en temas de WordPress que sean compatibles con la función wp_body_open () agregada en WordPress 5.2.

Este método de agregar el código asegura que su código permanezca allí incluso si actualiza el tema.

Una vez que haya agregado el código, puede visitar su sitio web para ver el precargador en acción.

Vista previa del precargador

Esperamos que este artículo te haya ayudado a aprender cómo agregar fácilmente un Preloader a tu sitio de WordPress. También es posible que desee ver nuestra lista de los consejos, trucos y hacks de WordPress más útiles para obtener ideas más interesantes.

Si le gustó este artículo, suscríbase a nuestro canal de YouTube para ver videos tutoriales de WordPress. También nos puede encontrar en Twitter y Facebook.

Botón volver arriba