Barra de Progreso de Lectura SIN PLUGIN

Barra de Progreso de Lectura SIN PLUGIN | SCROLLBAR

1 votos.

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.

Sin comentarios

Tienes que registrarte para comentar en este artículo.