Cómo añadir un botón de volver arriba o subir sin plugins y con cualquier tema WordPress

¿Te gustaría añadir a tu web un botón de esos de volver arriba con un clic y tu tema no ofrece esta funcionalidad ni tampoco quieres añadir más plugins y menos para una cosa tan birria?

Pues nada, aquí lo tienes: fácil, rápido, incluso elegante…

El código

Sin más preámbulos ni explicaciones, todo para ti, gratis:

/**
* Botón de volver arriba que funciona en todos los temas
* Lo hizo Fernando Tellado, el de ayudawp.com
* Es gratis, pero si falla, la culpa es suya
*/

function ayudawp_boton_volver_arriba() {
// HTML del botón - Aquí puedes cambiar el texto
echo '<a href="#" class="ayudawp-boton-volver-arriba">Volver arriba</a>';

// Estilos CSS - Aquí puedes cambiar los colores y tamaños
?>
<style>
.ayudawp-boton-volver-arriba {
position: fixed;
bottom: 20px;
right: 20px;
display: none;
background-color: #000;
color: #fff;
padding: 10px 15px;
border-radius: 5px;
text-decoration: none;
z-index: 1000;
}

.ayudawp-boton-volver-arriba:hover {
background-color: #555;
color: #fff;
}
</style>

<!-- JavaScript -->
<script>
document.addEventListener('DOMContentLoaded', function() {
var boton = document.querySelector('.ayudawp-boton-volver-arriba');

// Mostrar/ocultar botón según scroll
window.addEventListener('scroll', function() {
if (window.scrollY > 300) {
boton.style.display = 'block';
} else {
boton.style.display = 'none';
}
});

// Acción de clic para volver arriba
boton.addEventListener('click', function(e) {
e.preventDefault();
window.scrollTo({ 
top: 0, 
behavior: 'smooth' 
});
});
});
</script>
<?php
}
add_action('wp_footer', 'ayudawp_boton_volver_arriba');

¿Qué hace este código?

• Añade a todas las páginas de tu web un bonito y sencillo a la par que elegante botón con el texto «Volver arriba», y al hacer clic te lleva arriba del todo de la página.
• El botón no se ve al instante, solo aparece en el momento el que el visitante haga scroll (if (window.scrollY > 300)) para seguir viendo el contenido, lo lógico, vamos.

Algo parecido a esto…

¿Puedo cambiar cosas en el código?

Claro, ahí tienes el código (abierto) para que cambies lo que gustes, por ejemplo:

• Quiero cambiar el texto: simplemente sustituye Volver arriba por lo que quieras, incluso pon un enlace a una imagen si lo prefieres.
• Lo quiero a la izquierda: cambia de right:20px a left:20px o con los píxeles que quieras.
• Lo quiero con otros colores: cambia el color de fondo del botón (background-color:#000) o el color del texto (color:#fff) a tus favoritos.
• Quiero que aparezca sin necesidad de hacer scroll: quítale el window.scrollY que he comentado antes.

Vamos, que puedes enredar con todo lo que te parezca mientras mantengas la funcionalidad básica: que al hacer clic te suba arriba de la página.

¿Funciona con cualquier tema?

Sí, lo he probado con todos los temas por defecto de WordPress, con Astra, Divi, con todos los que tengo por ahí, y funciona en todos.

Si tu tema utiliza los ganchos WordPress estándar, y en especial wp_footer, funcionará sí o sí. De hecho en caso contrario casi mejor que cambies de tema, porque no te funcionarán montones de cosas más, no solo esto, pues la mayoría de plugins lo requieren.

¿Cómo añado el código a mi web?

Hay varias maneras posibles de añadir códigos en WordPress, y en este caso da realmente igual, porque es algo ajeno al tema, así que yo elegiría un plugin MU de personalizaciones varias si ya lo tienes, sino tú decides.

Te agradecería mucho si me comentas si te ha gustado, si lo probaste o vas a añadirlo a tu web, lo que sea. Así no tengo la sensación de escribir para nadie 🙂

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!