¿Eres de escribir entradas largas? Entonces seguro que te gustaría tener en tu web una forma sencilla de subir hacia la parte superior de tu página. Tú quieres un botón ir arriba, pero sin tener un botón molestando todo el tiempo.
Algo que sea sexy, moderno, y suba con un cierto efecto suave.
Y seguro que te has fijado que esta web tiene una flechita para subir arriba en el lado derecho, pero que solo aparece cuando ya has superado un porcentaje de la página al hacer scroll.
¿Ok?
Bien, ahora que ya has bajado rápidamente la página, has visto el botón ir arriba, y has hecho clic para volver aquí, te voy a explicar como puedes poner uno en tu web.
Confiésalo, lo has hecho; y encima te he arrancado una sonrisa. 😀
Y como sabes, soy de los que si puedo, no uso ningún plugin y le meto mano al código.
¿Nos metemos en harina?
Cómo insertar un botón ir arriba con código
Aunque hoy en día temas como Astra Theme lo traen de serie, hay muchos que aun no lo incluyen. Y te interesa incluirlo por código.
Es algo sencillo, si sigues los pasos al pie de la letra.
Te lo voy a dar todo «mascadito».
Aquí si que va a ser necesario acceder a tu servidor por FTP, ya que hay que crear algún fichero dentro de la carpeta de tu Child Theme.
Paso 1. Sube los ficheros js necesarios.
Descarga estos tres ficheros:
- –> Este lo traen ya muchos temas, y no suele ser necesario descargarlo ni subirlo. Es estándar, y cualquier versión te sirve.
- –> El icono de la imagen que usaremos como «subir arriba».
Si no se descargan directamente, haz clic con el botón derecho y luego en «Guardar enlace como…»
Sube los tres ficheros a wp-content/themes/tuchildtheme/js/
Si no existe la carpeta js dentro de tu Child Theme, créala.
Si editas el fichero main.js, podrás cambiar algunos ajustes del efecto de volver arriba.
//browser window scroll (in pixels) after which the "back to top" link is shown
var offset = 300,
//browser window scroll (in pixels) after which the "back to top" link opacity is reduced
offset_opacity = 1200,
//duration of the top scrolling animation (in ms)
scroll_top_duration = 700;La variable offset nos sirve para indicar cuando se activara el «botón». En este caso al bajar 300px.
Al principio saldrá como medio transparente, y si pones el ratón encima, se vuelve opaco. Esa transparencia es la que definimos en offset_opacity.
Y por último, en scroll_top_duration, es donde se especifica cuanto durara la animación de volver arriba. Su usas textos excesivamente largos, te puede interesar subir este valor.
Paso 2. Edita el fichero functions.php
Ahora tenemos que llamar estos ficheros javascript que hemos creado, para que carguen con la web, y añadir el efecto de volver arriba.
Para eso vamos a añadir estas lineas a tu fichero functions.php que esta en wp-content/themes/tuchildtheme/
//* Enqueue scripts and styles
add_action( 'wp_enqueue_scripts', 'hormi_enqueue_scripts_styles' );
function hormi_enqueue_scripts_styles() {
wp_enqueue_script( 'modernizr-min', get_stylesheet_directory_uri() . '/js/modernizr.js', array( 'jquery' ), '', true );
wp_enqueue_script( 'back_to_top', get_stylesheet_directory_uri() . '/js/main.js', array( 'jquery' ), '', true );
}
//* Añadimos el botón antes de </body>
add_action ( 'wp_footer', 'hormi_back_to_top' );
function hormi_back_to_top() {
echo '<a href="#0" class="cd-top">Top</a>';
}Con esto ya tendremos el botón funcionando en nuestra web.
Paso 3. Añade algo de estilo
Tienes el botón funcionando, pero apenas se ve, y queda feo.
Así que añade algo de estilo.
Copia y pega estas lineas en el fichero styles.css que esta en wp-content/themes/tuchildtheme/
/* --------------------------------
Back to Top
-------------------------------- */
.cd-top {
display: inline-block;
height: 40px;
width: 40px;
position: fixed;
bottom: 40px;
right: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
/* image replacement properties */
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
background: rgba(34, 121, 196, 0.8) url(js/cd-top-arrow.svg) no-repeat center 50%;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity .3s 0s, visibility 0s .3s;
-moz-transition: opacity .3s 0s, visibility 0s .3s;
transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
-webkit-transition: opacity .3s 0s, visibility 0s 0s;
-moz-transition: opacity .3s 0s, visibility 0s 0s;
transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
/* the button becomes visible */
visibility: visible;
opacity: 1;
}
.cd-top.cd-fade-out {
/* if the user keeps scrolling down, the button is out of focus and becomes less visible */
opacity: .5;
}
.no-touch .cd-top:hover {
background-color: #2279C4;
opacity: 1;
}
@media only screen and (min-width: 768px) {
.cd-top {
right: 20px;
bottom: 20px;
}
}
@media only screen and (min-width: 1024px) {
.cd-top {
height: 60px;
width: 60px;
right: 30px;
bottom: 60px;
}
}Puedes cambiar el color sustituyendo el que esta en la linea 38. Simplemente borra #2279C4, y pon el color que te vaya bien.
Si quieres el botón redondo, puedes añadir debajo de la linea 26, y antes del }, lo siguiente: «border-radius: 50%;«
Cómo ves, no es más que aplicar estilo CSS, para que este más acorde con nuestro tema.
¿Es o no sencillo añadir un botón Ir arriba?
Además fíjate que en esta ocasión no es necesario usar Genesis Framework.
Esto es válido para cualquier tema. Los hooks usados son estándar de WordPress.
Lo único en lo que cómo ves he insistido, es en usar un Child Theme, para que al actualizar no pierdas estos cambios.
Poner un botón para volver arriba es un recurso sencillo, que facilita la navegación de nuestro sitio web, y cómo ves algo no muy complicado de implementar.
Y tu, ¿qué trucos usas para mejorar el uso de tu web?
