Botón ir arriba, ¿cómo añadirlo a Wordpress sin plugins?

Una vez más aquí. Hoy vengo a dejar un pequeño artículo sobre algo que me preguntaron estos días. El caso es que un usuario me preguntaba cómo podía añadir el botón «Ir Arriba» a su instalación de Wordpress sin necesidad de añadirlo mediante plugins. Esto es algo muy recomendable para no sobrecargar nuestra instalación con demasiados complementos. Por eso, a continuación vamos a ver cómo añadir el botón para que haga scroll hacia arriba mediante algunas líneas de código, que no son difíciles de entender ni de aplicar.

Ni que decir tiene que si no quiere meter mános en el código, hay multitud de plugins para Wordpress que pueden hacer esto mismo, pero como decía, esto no es lo que se busca en este momento.

Para generar nuestro botón vamos a utilizar algunas líneas de código JQuery, un poco de CSS y algunas líneas más en el archivo functions de nuestro theme de Wordpress.

¿Cómo añadir un botón Ir Arriba a nuestro Wordpress sin necesidad de utilizar plugins?

El archivo .JS

Como decí, lo primero que necesitaremos hacer es crear un fichero, al le podemos dar cualquier nombre, pero para este ejemplo yo opté por utilizar el de ir-arriba.js. A continuación solo es necesario pegar este código dentro y guárdalo:

jQuery( document ).ready(function($){   
	var offset = 100,       
	speed = 250,       
	duration = 600,       
	scrollButton = $('#irArriba');      
	
	//función para hacer aparecer y desaparecer el botón
	$( window ).scroll( function() {     
		if ( $( this ).scrollTop() < offset) {       
			scrollButton.fadeOut( duration );     
		} else {       
			scrollButton.fadeIn( duration );     
		}   
	});      
	
	scrollButton.on( 'click', function(e){     
		e.preventDefault();     
		$( 'html, body' ).animate({       
			scrollTop: 0     
		}, speed);   
	}); 
});

Cuando lo tengamos guardado, solo nos queda subirlo a la carpeta «js» que tengamos en nuestro tema (si no la tienes, puedes crearla). Es decir, la ruta en la que tenemos que subir este archivo sería algo como lo siguiente: wp-content/ themes/elnombredetutema/js.

El archivo functions

Ya con el archivo subido, lo siguiente que vamos a hacer es editar el archivo functions.php de nuestro tema actual. Al final de este fichero, solo necesitamos añadir lo siguiente:

// botón ir arriba
function boton_ir_arriba() {  
//indicamos el directorio en el que se encuentra el archivo .js               
  wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/ir-arriba.js', array( 'jquery' ) );                    
}       
                
add_action( 'wp_enqueue_scripts', 'boton_ir_arriba' );       
               
function add_boton_ir_arriba() {       
  //Este es el enlace para ir arriba              
  echo '<a href="#" id="irArriba" title="ARRIBA"></a>';       
                
}       
add_action( 'wp_footer', 'add_boton_ir_arriba' );

El código CSS

Para terminar solo queda poner bonito el botón que estamos creando. Solo necesitaremos añadir un poco de CSS. Esto se puede hacer añadiendo el código al archivo style.css (si tienes un tema hijo) o también te puedes dirigir al backoffice de WordPress y abrir el Personalizador. Después dirigirte a Apariencia > Personalizador. En el campo de texto de la sección CSS adicional, no hya más que añadir las siguiente reglas:

/*botón subir arriba*/
#irArriba {                  
  position: fixed;                
  display: none;                   
  height: 40px;              
  width: 40px;                
  line-height: 40px;                
  right: 15px;            
  bottom: 15px;       
  z-index: 1;        
  background: #000000;        
  border-radius: 2px;
  text-decoration: none; 
  color: #ffffff;   
  text-align: center;       
}     
                
#irArriba:after { 
/*La flecha con código ASCII*/
  content: "\2303";       
}

En este código es donde se va a definir la posición del botón, su estiilo, su color y el dibujo de la flecha. Este dibujo se puede cambiar utilizando código ASCII (no hay más que buscar un poco en internet).

Y con esto, ya tendremos un botón de scroll hacia arriba completamente funcional en nuestra instalación de Wordpres. Y si necesidad de añadir más complementos a nuestra instalacíón de Wordpress