Añadir un botón «Ir Arriba» (también conocido como botón de
scroll to top) en
WordPress es bastante sencillo y se puede hacer mediante código HTML, CSS y JavaScript.
¿Para qué sirve el botón Ir arriba?
Este botón es como una pequeña ayuda siempre presente para tus visitantes, llevándolos de regreso a la parte superior de la página con tan solo un solo clic. SI alguna vez has encontrado páginas web tan largas que te cansas de desplazarte por ellas, con la ayuda de este botón podrás regresar a la parte superior de la página.
Crea tu botón sin plugin desde Cpanel
Si buscas una forma fácil y eficaz de mejorar la navegación de tus visitantes a tu página en WordPress. Aquí te proporciono un ejemplo básico de cómo hacerlo:
1.- Inicia sesión en tu Cpanel
-
- Lo primero que tenemos que hacer es acceder a nuestra cuenta de hosting/Cpanel.
- En nuestro tema creamos una carpeta «js» y dentro un archivo con el nombre de: topbutton.js
Luego pegamos el siguiente código:
jQuery(document).ready(function($){
var offset = 900; /*-- momento de aparecer --*/
var speed = 650; /*-- velocidad de subida --*/
var duration = 500;
$(window).scroll(function(){
if ($(this).scrollTop() < offset) {
$('.topbutton') .fadeOut(duration);
} else {
$('.topbutton') .fadeIn(duration);
}
});
$('.topbutton').on('click', function(){
$('html, body').animate({scrollTop:0}, speed);
return false;
});
});
2.- Accede al functions.php
-
- En el tema abre el archivo functions.php y al final de todo pega el siguiente código:
function my_scripts_method() {
wp_enqueue_script(
'custom-script',
get_stylesheet_directory_uri() . '/js/topbutton.js',
array( 'jquery' )
);
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
-
- Luego en nuestro archivo footer.php creamos el enlace. Copia y pega el siguiente código:
<a href="#" class="topbutton">
<i class="fa fa-arrow-up" aria-hidden="true"></i>
</a>
4.- Agregar Estilos con CSS:
-
- Por último, editamos la apariencia de nuestro botón con CSS, pegamos lo siguiente:
.topbutton {
height:50px;
width:50px;
position:fixed;
right:5px;
bottom:5px;
z-index:1;
}
.topbutton i{
font-weight: 600;
background-color: #fff;
padding: 10px 11px;
border-radius: 50%;
}
Visita tu sitio web y desplázate hacia abajo. El botón «Ir Arriba» debería aparecer después de un cierto punto y permitir a los usuarios volver rápidamente hacia la parte superior de la página.
