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.