¿Quieres agregar 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 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.
¿Qué es un precargador y cuándo debería utilizarlo?
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 (por ejemplo, texto, código HTML, CSS) mientras que otras se cargan mucho más lentamente (por ejemplo, imágenes y videos).
Si la mayor parte de su contenido es texto con muy pocas imágenes y videos, realmente no necesita agregar un precargador a su sitio web. En su lugar, debe concentrarse 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 son imágenes, fotografías y videos incrustados, sus usuarios deben esperar un tiempo 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 mientras se carga 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 su blog en una nueva ventana y mostrará un precargador antes de mostrar la vista previa en vivo.
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 el tema de WordPress.
Lo primero que debe hacer es instalar y activar el archivo. Precargador inteligente WP conectar. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Después de la activación, debe visitar Configuración »WP Smart Preloader página para configurar los ajustes del plugin.
Primero, debe elegir un estilo de precarga o una animación de carga de página. El plugin viene con seis animaciones integradas 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 seleccionando 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». Se 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.
También puede establecer el tiempo que tarda el clip en disolverse por completo. La opción predeterminada es 2500 segundos o 2,5 segundos.
Por último, 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.
Método 2. Agregar un precargador en WordPress usando el plugin Preloader
Este método es flexible pero requiere pasos adicionales para implementarlo correctamente en su sitio de WordPress.
Lo primero que debe hacer es instalar y activar el archivo. Precargador conectar. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Después de la activación, debe visitar el Plugin »Precargador página para configurar los ajustes del plugin.
Primero, debe ingresar el código hexadecimal del 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 de precargador 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 de precargador animada 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 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á instrucciones para agregar el siguiente código al archivo header.php de su tema de WordPress.
<div id="wptime-plugin-preloader"></div>
Antes de salir de 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, ya que se eliminará cuando actualice el tema.
Si está utilizando un tema hijo, está bien agregar el código al archivo header.php de su tema hijo.
Una solución aún mejor sería agregar este código utilizando un plugin de fragmento de código separado o en un plugin específico del sitio.
Aquí está el código que debe agregar:
function wpb_add_preloader() {
echo '<div id="wptime-plugin-preloader"></div>';
}
add_action( 'wp_body_open', 'wpb_add_preloader' );
Nota: este método de agregar código solo funcionará en temas de WordPress compatibles con la función wp_body_open () agregada en WordPress 5.2.
Este método de agregar código garantiza que el código permanezca allí incluso si actualiza el tema.
Después de agregar el código, puede visitar su sitio web para ver el precargador en acción.
Esperamos que este artículo le haya ayudado a aprender cómo agregar fácilmente un precargador a su sitio de WordPress. También puede consultar nuestra lista de los consejos, trucos y trucos más útiles de WordPress para obtener ideas más interesantes.
¿Te ha resultado útil??
0 / 0