Cómo agregar una animación de precarga a WordPress (Paso a Paso)
¿Quiere agregar precargas a su sitio de WordPress? Las precargas son animaciones de fondo que muestran el progreso de la carga de la página.
La precarga asegura al usuario que el sitio web está cargando la página. Esto ayuda a mejorar la experiencia del usuario y reduce la tasa general de abandono.
En este artículo, le mostraremos cómo agregar fácilmente precargas a WordPress.
¿Qué es la precarga y cuándo debo usarla?
Una precarga es una animación o mensaje de estado que muestra el progreso de carga de una página en segundo plano.
Por lo general, cuando visita un sitio web, su navegador comienza a descargar contenido diferente. Algunas partes del sitio web se cargan más rápido (por ejemplo, texto, código HTML, CSS), mientras que otras partes se cargan más lentamente (por ejemplo, imágenes y videos).
Si la mayor parte de su contenido es texto con pocas imágenes y videos, entonces realmente no necesita agregar un precargador a su sitio web. En cambio, debe concentrarse en mejorar la velocidad y el rendimiento de su sitio web para acelerar la carga de la página.
Por otro lado, si la mayor parte de su contenido está incrustado con imágenes, fotos y videos, es posible que los usuarios tengan que esperar un tiempo antes de ver todo su contenido.
Su sitio web puede parecer lento durante estas descargas parciales. A veces, los consumidores pueden incluso pensar que está roto. Agregar una precarga puede llenar este vacío y mostrar un indicador del progreso del usuario mientras carga la página.
Puede ver un ejemplo de precarga en vivo 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 su publicación de blog en una nueva ventana y mostrará un precargador antes de mostrar la vista previa en vivo.
Habiendo dicho eso, veamos qué tan fácil es agregar precargas a su sitio de WordPress.
Método 1. Agregue WordPress Preloader con 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 WP Smart Preloader. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar complementos de WordPress.
Después de la activación, debe visitar Configuración de WP Smart Precargador página para configurar los ajustes del complemento.
Primero, debe elegir un estilo de precarga o una animación de carga de página. El complemento viene con seis animaciones integradas para elegir. También puede cargar su propio HTML y CSS personalizado para crear programas de precarga personalizados.
A continuación, 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".
Luego, debe desplazarse hacia abajo hasta la sección "Mostrar duración del cargador". Debe especificar la duración del programa de precarga. El valor predeterminado es 1500 milisegundos (1,5 segundos), lo que debería funcionar para la mayoría de los sitios web, pero puede cambiarlo si lo desea.
También puede configurar el tiempo necesario para que el cargador desaparezca por completo. La opción predeterminada es 2500 segundos o 2,5 segundos.
Finalmente, asegúrese de hacer clic en el botón "Guardar cambios" para guardar su configuración.
Puede visitar su sitio web ahora para ver la precarga en acción.
Método 2. Agregue Preloader a WordPress usando un complemento de precarga
Este método es flexible, pero requiere pasos adicionales para implementar correctamente 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 complementos de WordPress.
Después de la activación, debe visitar Complementos »Precargar página para configurar los ajustes en el complemento.
Primero, debe ingresar el código de color de fondo hexadecimal que desea usar para la pantalla de inicio. El valor predeterminado es #FFFFFF (vacío). Puede usar el selector de color en línea para encontrar el código de color HEX que desea usar.
Luego debe proporcionar la URL de la imagen precargada que desea usar. El complemento viene con imágenes animadas de forma predeterminada.
Si desea utilizar otras animaciones, encontrará enlaces para descargar imágenes para precargar animaciones de sitios web de terceros. Luego puede cargar la imagen en su carpeta wp-content y pegar la URL allí.
Luego, debe seleccionar dónde desea que se muestre la precarga.
Puede elegir mostrarlo en todas las páginas de su sitio web o seleccionar secciones específicas.
Finalmente, verá 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' );
notas: Este método de agregar código solo funciona con temas de WordPress que admiten la función wp_body_open () agregada en WordPress 5.2.
Este método de agregar código asegura que su código permanezca allí, incluso si actualiza el tema.
Después de agregar el código, puede visitar su sitio web para ver la precarga en acción.
Esperamos que este artículo lo haya ayudado a aprender cómo agregar fácilmente un precargador a su sitio de WordPress. También puede consultar nuestra lista de consejos, trucos y trucos de WordPress para obtener ideas más interesantes.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para videos tutoriales de WordPress. También puede encontrarnos en Twitter y Facebook.
Deja una respuesta