¿Quiere agregar un precargador a su sitio de WordPress? Un precargador es una animación que muestra el progreso de la carga de una página en segundo plano. Los precargadores aseguran a los usuarios que el sitio web está funcionando en la carga de la página. 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 se debe utilizar?
Contents
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 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 consiste en imágenes, fotografías y videos incrustados, sus usuarios tendrán que 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. Al agregar un precargador, se llena este vacío y se muestra al usuario un indicador de progreso a medida que 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, veamos 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 ninguna modificación en su tema de WordPress. Lo primero que debe hacer es instalar y activar el plugin WP Smart Preloader. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress. Tras 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 marcando la opción «Mostrar solo en la página de inicio». A continuación, debe desplazarse hacia abajo hasta la sección «Tiempo para mostrar el cargador». Debe especificar la duración del precargador. El valor predeterminado es 1500 milisegundos (1,5 segundos), que debería funcionar para la mayoría de los sitios, pero puede cambiarlo si lo desea.
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. Por último, no olvide hacer clic en el botón «Guardar cambios» para guardar 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 de precargador
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 plugin Preloader. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress. Durante la activación, debe visitar el Complementos »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 del color que desea 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 de precarga animada de un sitio web de terceros. Luego puede cargar esta imagen en su carpeta wp-content y pegar la URL aquí. Luego, debe elegir dónde desea mostrar el precargador.
Puede elegir mostrarlo en todas las páginas de su sitio web o 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 salir de la página, no olvide hacer clic en el botón «Guardar cambios» para guardar su configuración. No recomendamos agregar ningún código a su tema de WordPress, ya que se eliminará cuando actualice el tema. Si está utilizando un tema hijo, puede agregar el código al archivo header.php de su tema hijo. Una solución aún mejor sería agregar este código usando un plugin de fragmentos por separado o en un plugin específico del sitio. Aquí está el código que necesita agregar: function wpb_add_preloader () {echo ‘
‘; } add_action (‘wp_body_open’, ‘wpb_add_preloader’);
Notar: 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 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.
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. Si le gustó este artículo, suscríbase a nuestro canal de YouTube para ver tutoriales en video de WordPress. También puede encontrarnos en Twitter y Facebook.
Originally posted 2021-02-25 01:53:37.
){kind=link}