Cómo hacer un precargador de WordPress para cualquier tipo de sitio web










  • Si tiene contenido de video o imagen en su sitio web, necesita un precargador de WordPress. Un precargador muestra una imagen de "carga", generalmente animada, que le permite al visitante saber que el contenido se está cargando.

    Algunos temas incluyen estos elementos, pero le mostraré cómo agregar un precargador a cualquier sitio web de WordPress. Entonces, si su tema no proporciona una imagen de precarga, al final de este tutorial, puede tener una en su lugar.

    Es especialmente importante usar un precargador de sitios web si tiene contenido que puede tardar en cargarse en algunas conexiones. Sin algún tipo de indicador visual, a un visitante se le puede presentar un espacio en blanco al que pertenecen sus medios y puede creer que hay un error. Un precargador les permite saber que algo está en camino.

    Para mostrar un precargador de medios o videos, usaremos el complemento WP Smart Preloader . Funciona con la mayoría de los temas, marcos y complementos, incluido WooCommerce .

    Instalación del complemento WP Smart Preloader

    Inicie sesión en su panel de administración de WordPress.

    En la columna de navegación de la izquierda, pase el mouse sobre el enlace "Complementos" y haga clic en el enlace "Agregar nuevo".

    pase el mouse sobre el enlace "Complementos" y haga clic en el enlace "Agregar nuevo"

    En el cuadro "Buscar complementos...", ingrese "WP Smart Preloader".

    busque el complemento WordPress WP Smart Preloader

    Una vez que haya localizado el complemento, haga clic en el botón "Instalar ahora".

    haga clic para instalar el complemento WordPress WP Smart Preloader

    Haga clic en el botón "Activar".

    haga clic para activar el complemento WordPress WP Smart Preloader

    Configuración del precargador inteligente de WP

    En la navegación de la columna izquierda, pase el mouse sobre el enlace "Configuración" y haga clic en el enlace "WP Smart Preloader".

    haga clic en el enlace "WP Smart Preloader"

    Seleccione Preloader : el menú desplegable aquí le permite elegir entre las animaciones de precarga proporcionadas. La ventana debajo del menú desplegable muestra una vista previa del precargador.

    Mostrar solo en la página de inicio : marque esta casilla si desea que el precargador se muestre solo en su página de inicio.

    seleccione la configuración del precargador

    Animación personalizada : este cuadro negro es para ingresar su propio código si tiene una animación HTML5 personalizada. Ese código está más allá del alcance de lo que estamos haciendo aquí, pero aquí es donde lo ingresaría.

    CSS personalizado : al igual que la "Animación personalizada", este también es un cuadro de entrada de código, pero es para CSS. Puede cambiar la apariencia de los precargadores provistos usando CSS, o agregar el CSS requerido para su animación HTML5 personalizada. (Siempre que lo haya agregado en el cuadro "Animación personalizada", por supuesto).

    dónde ingresar código personalizado y css

    Duración para mostrar Loader . Este es un valor en milisegundos. El valor predeterminado, si no ingresa nada aquí, es 1500 ms, o un segundo y medio.

    Bajar este valor por debajo del predeterminado no tendrá ningún efecto. La animación se seguirá mostrando hasta que se cargue la imagen o el video. Sin embargo, al aumentarla, aumenta la cantidad de tiempo que se muestra la animación del precargador por sí misma .

    Esto significa que si aumentó este valor a 10000 (diez segundos) y su imagen o video se cargó en cinco segundos, el precargador aún se mostraría, solo, durante diez segundos, luego se mostraría la imagen o el video.

    Loader to Fade Out : el tiempo de atenuación del precargador en milisegundos.

    configuración de la duración del efecto

    Haga clic en el botón "Guardar cambios" después de realizar cualquier cambio en la página de configuración.

    El precargador de WP Smart WordPress en acción

    Activé uno de los precargadores y reemplacé la imagen del encabezado del tema predeterminado con una imagen de más de 5 MB que tarda unos segundos en cargarse. Puede ver que se muestra la animación del precargador mientras se carga la imagen.

    animación del precargador en la página

    Hay una transición agradable y suave en la que el precargador se desvanece a medida que se carga la imagen. El tiempo de ese desvanecimiento está controlado por el valor "Loader to Fade Out", como se explicó anteriormente.

    transición del precargador en la página

    La experiencia del visitante es muy similar si su sitio web utiliza un encabezado de video.

    animación del precargador en la página de video

    transición del precargador en la página de video

    Estoy un poco en desventaja aquí, tratando de demostrar la animación usando imágenes fijas, pero entiendes la idea.

    Qué sucede si desinstala el complemento

    Si desinstala el complemento, las páginas y publicaciones que lo usaron no se verán afectadas.

    Uso de un tema listo para animación

    Parece que la mayoría de los temas populares de WordPress usan un encabezado grande (o de ancho completo). Ese encabezado puede contener una imagen o un video, y WP Smart Preloader (y la mayoría de los otros precargadores) funcionarán con él. Pero si su tema no está diseñado con un gran encabezado de página de inicio, aquí hay algunos temas hechos para el trabajo.

    Indiana

    tema de indiana

    Indiana es un tema gratuito, flexible, escalable y multipropósito para sitios web comerciales, corporativos y empresariales. Con capacidad de respuesta y dinámica, el diseño fresco y elegante de Indiana y la facilidad de uso lo convierten en una opción popular. Puede personalizar el encabezado, el menú, el pie de página, la página de inicio y la barra lateral. También es compatible con SEO y viene con la integración de WooCommerce.

    Elevación Lite

    Elevación Lite tema

    Elevation Lite es un tema de paralaje gratuito que presenta una página de inicio bien diseñada, una sección de servicios de tres columnas, un control deslizante Nivo de ancho completo, una sección de bienvenida y un área de funciones. Tendrá un diseño de pantalla completa o de cuadro y widgets para el encabezado, el pie de página y la barra lateral. También tiene un diseño receptivo y es compatible con SEO.

    Tema ultra

    Tema ultra

    Finalmente, Ultra Theme es un tema premium (pago). Pero trae muchas características premium como desplazamiento de sección completa, cambios de color animados, filtros de imagen y más. Ultra proporciona muchas de las herramientas necesarias para crear efectos animados y (múltiples) diseños llamativos y listos para usar. Al igual que Indiana, Ultra está preparado para WooCommerce.

    Si WP Smart Preloader no es para ti, prueba una de estas alternativas

    No todos los complementos son compatibles con todos los sitios web (o propietarios de sitios web). Si está buscando una alternativa a WP Smart Preloader, aquí hay algunos otros complementos de precarga de WordPress para consultar.

    precargador

    Complemento de precarga

    Preloader está listo para Retina y viene con colores de fondo personalizados y múltiples opciones de visualización de precargador. Utiliza jQuery y CSS3, lo que lo hace compatible con Chrome, Firefox, Opera, Safari, IE9+ y la mayoría de los dispositivos móviles modernos. También puede ver la demostración en vivo para verlo en acción.

    Efectos de carga de página

    Complemento de efectos de carga de página

    Page Loading Effects es un complemento ligero y fácil de usar que muestra gráficos de carga animados hasta que la página está completamente cargada. Y este también tiene una  demostración en vivo disponible para verlo funcionar.

    LoftLoader

    Complemento LoftLoader

    LoftLoader presenta opciones de configuración mejoradas con el personalizador de WordPress. Viene con animación CSS3 que funciona en todos los navegadores modernos. Le brinda colores ilimitados de fondo y cargador, incluida la capacidad de cambiar la opacidad del cargador previo. Es receptivo y está listo para la retina mientras se minimiza CSS y JS.

    Deja que tus visitantes sepan lo que está pasando

    Los usuarios de sitios web de hoy en día tienen expectativas muy altas en lo que respecta a la velocidad de carga de las páginas . Con eso en mente, puede parecer contradictorio mostrar una imagen mientras se espera que se cargue otra, o un video.

    Pero el WP Smart Preloader no usa imágenes, crea su "imagen" de precargador en el navegador usando CSS. Así que cargar imágenes adicionales no es un problema. La mayoría de los complementos de precarga funcionan de manera similar, utilizando CSS y/o animación HTML5.

    Por supuesto, la animación CSS o HTML5 requiere código, y podría argumentar que cargar y analizar el código adicional también es un problema de ancho de banda. Técnicamente, lo es. Pero es un código tan pequeño en comparación con el tamaño total de la página promedio de WordPress, que realmente no causa una diferencia medible en la velocidad de carga de la página.

    Incluso si lo hiciera, es mejor agregar un pequeño elemento a una página que presentar al visitante un espacio vacío sin indicación de si alguna vez se llenará. Eso es malo para la experiencia del usuario y se refleja mal en su sitio web.

    ¿Su tema de WordPress proporciona animaciones precargadas? ¿Tiene alguna otra recomendación para precargadores que no cubrimos aquí? Házmelo saber en los comentarios.










  • Subir