¿Cómo agregar un precargador a nuestra web WordPress?

Curso Wordpress

Un precargador no es nada más que una animación que nos aparecerá en la pantalla mientras la página se esté cargando.

Este sencillo truco puede mejorar mucho la experiencia del usuario (ya que siente que algo está ocurriendo) y reducir la tasa de rebote (entrar y salir de nuestra web rápidamente).

En este artículo, mostraremos cómo añadir fácilmente un precargador a nuestra página web hecha con WordPress.

Método 1. Añadir un precargador en WordPress usando WP Smart Preloader

Este es el método más sencillo y el que nosotros te recomendamos ya que es fácil de implementar y no requiere ningún cambio en tu tema de WordPress.

Lo primero que debemos de hacer es instalar y activar el plugin WP Smart Preloader. Si no sabes lo que es un plugin, ni como instalarlo ni activarlo, échale un vistazo a nuestro Curso WordPress Básico.

Tras la activación del plugin, accederemos al menú Ajustes » WP Smart Preloader para configurar los ajustes del plugin.

Curso WordPress

Lo primero de todo será elegir un estilo de precargador o una animación de carga de página. El plugin viene con seis animaciones para elegir. También podremos cargar nuestro propio código HTML y CSS para crear un precargador personalizado.

Después de eso, podremos hacer que el precargador aparezca solo en la página de inicio marcando la opción ‘Show only on Home Page‘.

A continuación, nos desplazaremos hasta la sección ‘Duration to show Loader’. En ella especificaremos 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 podemos cambiarla si lo deseamos.

Curso WordPress

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

Una vez esté todo a nuestro gusto, haremos click en el botón ‘Guardar cambios‘ para guardar nuestra configuración.

Ahora podremos visitar nuestro sitio web para ver el precargador en acción.

Método 2. Añadir un precargador en WordPress usando el plugin Preloader

Este método también es sencillo pero requiere de pasos adicionales para implementarlo adecuadamente en nuestro sitio web WordPress.

Lo primero que deberemos de hacer es instalar y activar el plugin Preloader . Si no sabes lo que es un plugin, ni como instalarlo ni activarlo, una vez más te recomendamos que le eches un vistazo a nuestro Curso WordPress Básico.

Una vez esté activado, iremos al menú Plugins » Preloader para configurar los ajustes del plugin.

Curso WordPress

Primero, introduciremos el código hexadecimal para el color de fondo que desemos usar para la pantalla de carga. La opción predeterminada es #FFFFFF (blanco). Para que nos sea más sencillo, podemos usar una herramienta de selección de color en línea para encontrar el código HEX para el color que deseamos usar.

A continuación, introduciremos la URL de la imagen del precargador que deseamos usar. El plugin viene con una imagen de animación predeterminada.

Si deseamos utilizar otra animación, podremos encontrar más animaciones en el enlace que nos proporciona el propio plugin pinchando en ‘Get FREE Preloader Images‘. 

Curso WordPress

En el enlace podremos encontrar imágenes GIF variadas, que tendremos que descargar y subir a la biblioteca de medios de nuestros WordPress.

Una vez subida a nuestra bliblioteca de medios, bastará con copiar la URL de la imagen y pegarla en el campo ‘Preloader Image‘.

Curso WordPress

A continuación, podremos elegir dónde deseamos mostrar el precargador.

Curso WordPress

Podemos elegir mostrarlo en todas las páginas de tu sitio web, o podemos seleccionar una sección específica.

Finalmente, nos aparecerán las instrucciones para agregar el siguiente código al archivo header.php de nuestro tema de WordPress.

    <div id="wptime-plugin-preloader"></div>    

Antes de salir de la página, no debemos olvidar hacer click en el botón ‘Guardar cambios‘ para guardar la configuración.

No recomendamos agregar código a nuestro tema de WordPress porque se borrará cuando lo actualicemos.

Si estamos utilizando un Child Theme, entonces no hay problema con agregar el código al archivo header.php de nuestro Child Theme.

Una solución aún mejor sería añadir este código usando un plugin de Códigos.

Aquí está el código que tenemos que añadir:

function cwv_agregar_preloader() {   
echo '<div id="wptime-plugin-preloader"></div>';
}
add_action( 'wp_body_open', 'cwv_agregar_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 nuestro código permanezca activo incluso si se actualiza el tema.

Una vez que hayamos agregado el código, podremos visitar nuestro sitio web WordPress para ver el precargador en acción.

Curso WordPress

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 desees ver más información nuestros Cursos de Worpdress los cuales te permitirán descubrir todas las posibilidades de WordPress.

Si te ha gustado este artículo, suscríbete a nuestro canal de YouTube para ver videotutoriales de WordPress. También puedes encontrarnos en TwitterFacebook e Instagram.

¿Te has gustado el artículo?

Suscríbete a nuestros Newsletter y no te pierda ni un artículo. No hacemos Spam ¡Escribimos 2 artículos nuevos por semana!

* HE ENTENDIDO la información sobre protección de datos y doy el consentimiento informado. Te informamos que los datos de carácter personal que nos proporciones serán tratados por Cursos Wordpress Valencia como responsable de esta web. La finalidad es el envío de publicaciones así como correos comerciales. La legitimación es gracias a tu consentimiento. Destinatarios: tus datos se encuentran alojados en nuestras plataformas de email marketing Mailchimp. Encontrarás más información en (POLÍTICAS DE PRIVACIDAD)

Share on facebook
Facebook
Share on twitter
Twitter
Share on whatsapp
WhatsApp

Deja un comentario

¡Eh! ¡Hay nuevos ¿Te avisamos?

* HE ENTENDIDO la información sobre protección de datos y doy el consentimiento informado. Encontrarás más información en (POLÍTICAS DE PRIVACIDAD)

×

¡Hola! Estamos aquí para ayudarte :)

× ¿Hablamos un rato?