Barra de Progreso de Lectura SIN PLUGIN | SCROLLBAR

Barra de Progreso de Lectura SIN PLUGIN

Barra de Progreso de Lectura SIN PLUGIN | SCROLLBAR

Tiempo de lectura aprox: 3 minutos, 20 segundos

Hoy os vamos a explicar cómo añadir una barra de progreso de lectura en WordPress de una forma fácil y sin plugins. No hace falta que sepáis nada de programación. Seguid nuestros pasos y en tan solo 5 minutos podréis tener una barra que indique el porcentaje de lectura en vuestro WordPress. ¡Empezamos!

¿Que es una barra de Progreso de Lectura o ScrollBar?

que es barra de progreso de lectura

La barra de progreso de lectura o, como se denomina en el mundo de la programación “Scrollbar”, es una barra que aparece habitualmente en la parte superior. Su función es indicarle al lector el progreso de lectura que lleva actualmente haciéndose más larga a medida que avanza en la lectura (hasta llegar al final).

Las ScrollBar o Barras de Progreso de lectura benefician a la página web ya que aumentan el tiempo de retención en página notablemente. Esto se debe a que el usuario puede ver en todo momento lo extenso (o no) que es el artículo y se anima a seguir leyendo hasta terminarlo.

Esto incide de forma colateral en el posicionamiento SEO, esto es algo que una Agencia SEO en Asturias tiene muy en cuenta porque, el tiempo de navegación es un factor que Google tiene en cuenta para saber si una página web ofrece información de calidad o no.

De modo que añadir una ScrollBar es totalmente recomendable y sobretodo, si se añade sin plugins.

¿Que ventajas tiene una scrollbar sin plugins?

Habitualmente, acostumbramos a introducir plugins en WordPress para todo lo que se nos ocurra. Pero, ¿sabías que lo recomendable es tener un máximo de 20 plugins? Esto es así porque cada plugin de WordPress que añadas aumenta el tiempo de carga de tu página web y esto repercute en una mala experiencia de usuario y, consecuentemente, en un mal posicionamiento web. Especialmente, si se trata de plugins multifunción -que contienen mucho código- , o plugins hechos por desarrolladores poco experimentados que no tienen en cuenta los tiempos de carga o la optimización de código.

De este modo, nos hemos decidido a explicaros cómo añadir una Barra de Progreso sin plugins ya que os dará beneficios y ningún efecto negativo.

¿Cómo se añade una ScrollBar a WordPress sin Plugins?

El proceso es sencillo, tan solo tenéis que seguir nuestros pasos y en 5 minutos tendréis una scrollbar en vuestro blog de WordPress.

Localiza el archivo functions.php de vuestro theme

Si tienes nociones de programación o conoces WordPress te preguntarás, ¿por qué añadirlo en el archivo functions.php? Añadirlo en el archivo functions.php tiene dos ventajas muy importantes a tener en cuenta:

  • Solo se carga el script en el lugar que lo necesites, evitando tener código basura en todas las páginas.
  • Si tienes instalado un Child Theme, actualizar el tema de WordPress no te eliminará la barra de Scroll.

Puedes editar el archivo functions php desde Apariencia > Editor de temas y seleccionar el archivo functions.php.

Añade el HTML de la barra de Progreso de Lectura

/* METE EL HTML DEL SCROLLBAR */
add_action(‘wp_head’, ‘load_scroll_html’);
function load_scroll_html(){
    if(is_single()){
        ?>
        <div class=”scroll_bar”>
        </div>
        <?php
    }
}
scrollbar
Por si te interesa la programación, lo que hace este código es añadir una acción cuando se carguen las cabeceras de WordPress llamada “load_scroll_html”. En esa función hacemos una comprobación mediante el método is_single() para mostrarlo únicamente en los Post de WordPress. Si se trata de un post, añadimos un div con la clase Scroll_bar. De este modo, solo metemos esté código si se trata de un artículo de WordPress.

Añade el JavaScript para hacer que la ScrollBar se incremente

/* CARGA EL SCRIPT EN EL FOOTER */
add_action(‘wp_footer’, ‘load_page_scroll’);
function load_page_scroll() {
    if(is_single()){
        ?>
<script type=”text/javascript”>
jQuery(document).ready(function(){
jQuery(window).scroll(function(){
varwintop = jQuery(window).scrollTop(), docheight = jQuery(“.post”).height(), winheight = jQuery(window).height();
varscrolltrigger = 0.95;
jQuery(‘.scroll_bar’).css(“width”, (wintop/(docheight-winheight))*100+”%”);
});
});
</script>
    <?php
    }
}
Barra de progreso
Lo que hace esta función es determinar el porcentaje de scroll actual. Con jQuery(“.post”).height() estamos indicándole que queremos saber el porcentaje de scroll del articulo. Pero si os da igual o no sabéis la clase que tiene el div de vuestro artículo podéis utilizar jQuery(window).height().

Añade el estilo a tu barra de scroll

Ahora debes localizar si tu tema tiene la posibilidad de añadir CSS. Normalmente esta opción se encuentra en Apariencia > Personalizar. En nuestro caso, hemos añadido lo siguiente:
.scroll_bar {
position: fixed;
top: 0;
height: 5px;
background: #ffdb00;
z-index: 999999;
}
Mediante background le estamos indicando el código de color de la barra de progreso de lectura pero podéis añadir el color que consideréis conveniente.

Puzzle Sideral usará la información que usted proporcione en este formulario para estar en contacto y para enviarle y promociones. Puede desuscribirse en cualquier momento haciendo clic en el enlace que aparece en el pie de página de nuestros correos electrónicos.

¡Tu barra de progreso de lectura ya está funcionando!

Y ya está, si no ves la barra de progreso correctamente prueba a hacer la configuración de teclas de Ctrl + F5 para eliminar la memoria caché del navegador.

Por supuesto, esto es escalable y puedes hacerlo todo lo potente que quieras. Te recomendamos leer nuestro artículo sobre cómo hacer un plugin de WordPress en menos de 5 minutos en el que podrás convertir todo esto en un plugin optimizado para activarlo o desactivarlo cuando quieras, o utilizarlo en todos vuestros proyectos.

Si preferís que nosotros desarrollemos ese plugin optimizado y os lo subamos en otro artículo u os ha resultado interesante este artículo escribirnos en los comentarios. Si tenéis problemas con vuestro diseño web o necesitáis ayuda con vuestra imagen corporativa no dudéis en contactar con nosotros.

Porque al final todo encaja, como un Puzzle Sideral.

¡Haz clic para puntuar esta entrada!
(Votos: 1 Promedio: 5)
Sin comentarios

Tienes que registrarte para comentar en este artículo.

Abrir chat