Como añadir en wordpress.org un botón de volver arriba

Si analizamos las últimas tendencias en diseño web y marketing digital podemos observar que cada vez más nos encontramos con páginas web del tipo “one-page” dónde la página principal agrupa mucho contenido tanto texto como visual, eso hace que dichas páginas sean “más largas” si las comparamos con las páginas web estándar.

Para la comodidad de nuestros usuarios, algunos temas de wordpress tienen una opción para añadir un botón de volver arriba (a la parte superior de tu página web) para no estar quemando el ratón durante 5 minutos.

Lamentablemente, no todos los temas incluyen esta opción por defecto, en SetUp Media hemos ideado una guía corta y sencilla para que puedas añadir dicho botón tocando un poco de HTML, CSS y jQuery. Y si no eres amigo del código no te apures, en wordpress hay plugins para todo, incluso para añadir el botón de volver arriba.

Empecemos:

Una vez dentro del escritorio (dashboard) de wordpress, iremos a Apariencia > Editor > Hoja de estilo (style.css)
Al final de todo, añadiremos estas líneas de CSS:

.volver-arriba {

display:none;

position: fixed;

bottom: 2em;

right: 0px;

text-decoration: none;

color: #000000;

background-color: rgba(235, 235, 235, 0.80);

font-size: 12px;

padding: 1em;

}

.volver-arriba:hover {

background-color: rgba(135, 135, 135, 0.50);

text-decoration:none;

color:#ffffff;

}

Una vez hecho esto guardamos los cambios y buscamos el documento Cabecera o Header.php y añadimos un link a la librería de jQuery y Ajax que Google pone a disposición de todo el mundo. Lo tienes que añadir entre las etiquetas <head>. Este es el código.

El siguiente paso es añadir justo encima de la etiqueta </body> (suele estar en el footer.php) este fragmento de código:

<a href=»#» class=»volver-arriba»>Volver Arriba</a>

jQuery(document).ready(function() {

var offset = 220;

var duration = 500;

jQuery(window).scroll(function() {

if (jQuery(this).scrollTop() > offset) {

jQuery(‘.volver-arriba).fadeIn(duration);

} else {

jQuery(‘.volver-arriba’).fadeOut(duration);

}

});