¿Quieres añadir un precargador a tu sitio de WordPress? Un precargador es una animación que indica el progreso de la carga de una página en el fondo.
Los precargadores aseguran a los usuarios que el sitio web está trabajando en la carga de la página. Esto puede ayudar a mejorar la experiencia del usuario y reducir la tasa de rebote general.
En este artículo, te mostraremos cómo agregar fácilmente un pre-cargador a WordPress.
¿Qué es un precargador y cuándo debe usarse?
Un precargador es una animación o mensaje de estado que indica el progreso de la carga de la página en el fondo.
Normalmente cuando visitas un sitio web, tu navegador comienza a descargar diferentes partes del contenido. Algunas partes del sitio web se cargan más rápido (por ejemplo, el texto, el código HTML, el CSS) mientras que otras se cargan mucho más lentamente (por ejemplo, las imágenes y los vídeos).
Si la mayor parte de su contenido es texto con muy pocas imágenes y vídeos, entonces realmente no necesita añadir un precargador a su sitio web. En su lugar, debe concentrarse en mejorar la velocidad y el rendimiento del sitio web para que la página se cargue más rápidamente.
Por otro lado, si la mayor parte de su contenido son imágenes, fotografías e incrustaciones de video, entonces sus usuarios necesitan esperar un tiempo antes de que puedan ver todo el contenido.
Durante estas descargas parciales, su sitio web puede sentirse lento. A veces los usuarios pueden incluso pensar que está roto. Añadiendo un precargador, se llena este hueco y se muestra al usuario un indicador de progreso durante la carga de la página.
Puedes ver un ejemplo en vivo de un precargador haciendo clic en el botón de vista previa mientras escribes una entrada de blog en WordPress.
WordPress abrirá una vista previa en vivo de la entrada de tu blog en una nueva ventana, y mostrará un cargador previo antes de mostrar la vista previa en vivo.
Dicho esto, veamos cómo puedes añadir fácilmente un precargador a tu sitio web de WordPress.
Método 1. Añadir un precargador en WordPress usando el precargador inteligente de WP
Este método se recomienda porque es más fácil de implementar y no requiere ningún cambio en el tema de WordPress.
Lo primero que debes hacer es instalar y activar el plugin WP Smart Preloader. Para obtener más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Una vez activada, debes visitar la página de configuración » WP Smart Preloader para configurar los ajustes del plugin.
Primero, debes elegir un estilo de precarga o una animación de carga de página. El plugin viene con seis animaciones incorporadas para elegir. También puedes subir tu propio HTML y CSS personalizado para crear un precargador personalizado.
Después de eso, puedes hacer que el precargador aparezca sólo en la página de inicio marcando la opción «Mostrar sólo en la página de inicio».
A continuación, tienes que bajar a la sección «Duración para mostrar el cargador». Necesitas 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 puedes cambiarla si quieres.
También puedes ajustar el tiempo que tarda el cargador en desaparecer por completo. La opción predeterminada es 2500 segundos o 2,5 segundos.
Por último, no olvides hacer clic en el botón «Guardar cambios» para guardar la configuración.
Ahora puede visitar su sitio web para ver el precargador en acción.
Método 2. Añadir un precargador en WordPress usando el plugin de precargador
Este método es flexible pero requiere pasos adicionales para implementarlo correctamente en su sitio de WordPress.
Lo primero que tienes que hacer es instalar y activar el plugin de Precarga. Para obtener más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Una vez activada, debe visitar la página Plugins » Preloader para configurar los ajustes de los plugins.
Primero, debes introducir el código hexadecimal del color de fondo que quieres usar para la pantalla de carga. La opción por defecto es #FFFFFF (blanco). Puedes usar una herramienta de selección de colores en línea para encontrar el código hexadecimal del color que quieres usar.
A continuación, debe proporcionar la URL de la imagen de precarga que desea utilizar. El plugin viene con una imagen de animación predeterminada.
Si desea utilizar otra animación, encontrará un enlace para descargar una imagen animada de precarga de un sitio web de terceros. A continuación, puedes subir esa imagen a tu carpeta de contenido wp y pegar la URL aquí.
A continuación, tienes que elegir dónde quieres mostrar el precargador.
Puede elegir mostrarlo en todas las páginas de su sitio web, o puede seleccionar una sección específica.
Finalmente, verás la instrucción para añadir el siguiente código al archivo header.php de tu tema de WordPress.
1
Antes de salir de la página, no olvides hacer clic en el botón «Guardar cambios» para guardar la configuración.
No recomendamos añadir código a tu tema de WordPress porque se borrará cuando actualices el tema.
Si estás usando un tema infantil, entonces está bien añadir el código al archivo header.php del tema infantil.
Una solución aún mejor sería añadir este código usando un plugin de Code Snippets separado, o en un plugin específico para el sitio.
Aquí está el código que necesitarías añadir:
1234functionwpb_add_preloader() {echo$0027$0027;}add_action( $0027wp_body_open$0027, $0027wpb_add_preloader$0027);
Nota: este método de añadir código sólo funcionará en temas de WordPress que sean compatibles con la función wp_body_open() añadida en WordPress 5.2.
Este método de añadir el código asegura que tu código se mantenga allí incluso si actualizas el tema.
Una vez que haya añadido el código, puede visitar su sitio web para ver el precargador en acción.
Esperamos que este artículo te haya ayudado a aprender cómo agregar fácilmente un Precargador a tu sitio de WordPress. También puedes ver nuestra lista de los consejos, trucos y trucos más útiles para WordPress para obtener más ideas geniales.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para ver los video tutoriales de WordPress. También puedes encontrarnos en Twitter y Facebook.
Deja una respuesta