Crear boton «Ir Arriba» en WordPress

Crear boton «Ir Arriba» en WordPress

La experiencia de usuario es muy importante para nuestra página web y entre todas las piezas que componen una buena UIX esta el tener acceso al contenido de nuestro sitio si problemas.

A quien no le ha pasado estar en una página web leyendo un articulo largo y una vez abajo de la página tener que hacer un deslizamiento infinito hacia arriba para acceder al menú de cabecera. Esto no da ganas de leer otro articulo y aun es mas notable cuando lo hacemos en un dispositivo móvil.

La mayoría de los temas de WordPress más populares implementan algún tipo de botón o enlace para retorno al principio de la pagina, pero tambien me he topado con muchos que no. Pues bien, en este articulo te explicare que soluciones puedes adaptar a estos temas. En principio explicare como hacerlo con dos plugins gratuitos que tenemos en el repositorio de wordpress y cómo hacerlo con código que es la que más me gusta a mi.

Vamos al lio!!!-

Crear boton «Ir Arriba» con plugins.

Para instalar un plugin en WP debemos ir a nuestro panel de administrador , seleccionamos plugin y pinchamos «Añadir nuevo».

Nos aparece una lista de plugins por si lo queremos buscar en el repositorio , lo buscamos y le damos al botón «Instalar» y una vez instalado «Activar» ,Listo!!!👍.

Si por el contrario descargamos el plugin desde el enlace que te proporcionó en cada sección , depues de «Añadir nuevo» , tendrás el botón «Subir plugin» , buscas el archivo con extensión .zip del complemento , «Instalar ahora» y cuando termine el proceso «Activar».

SrollTop plugin para crear botón de "Ir Arriba" en WordPress.

ScrollTop

ScrollTop es un complemento de los más sencillos de la lista,aunque su sencillez es suficiente para tener esta funcionalidad cubierta de sobras.

ScrollTop opciones del plugin.
ScrollTop opciones del plugin segunda parte.

Una vez instalado vamos a buscar las opciones del plugin en el panel de admin Ajustes > ScrollTop.

Las opciones que nos da son muy intuitivas , pero las veremos una a una:

  • Enable (Enable ScrollTop) : Es bastante obvio , sirve para activar o desactivar el botón.
  • Type : Podemos escoger entre si queremos un icono con flecha o un texto , muchas veces se utiliza el segundo con texto tipo «Arriba» o «ir arriba» según nuestro gusto.
  • Position : Establecemos la posición del botón o texto , hay dos opciones abajo derecha (Right Side) o abajo izquierda (Left Side), por defecto estará en la derecha.
  • Color : Esta opción definirá el color del icono o texto según hayamos escogido en la opción Type.
  • Background color : Color de fondo del botón, por defecto es negro.
  • Animation : Animación del botón al aparecer y desaparecer , hay dos opcione fade y slide , esta ultima da un efecto muy bueno.
  • Style : Estilo que quieres para tu botón.
  • Speed : Esta establece la velocidad en milisegundos con que nuestra página se desplazará hacia arriba, una buena medida sería un segundo osea 1000 ,haz pruebas con otras medidas hasta llegar a la que te parezca mejor.
  • Distance : El botón se muestra cuando estamos a una cierta distancia entre el elemento «target» y el final de la pagina, aqui puedes cambiar ese parámetro.
  • Target : Esta opción es para elegir hasta qué elemento quieres que llegue el desplazamiento. Por defecto será en la cabecera, pero segun diseño es posible que quieras que pare en otra parte como por ejemplo en el primer título , el H1 o en menú , para ello tenemos que saber que tag ,id o clase css tiene el elemento en cuestión , si no sabes html o css esto deberías consultarlo con alguien que sí o dejar tu duda en los comentarios.😊
  • Custom Css : Si sabes css aqui pueder dar estilo propio al botón o al texto en caso de que lo elijas así.

Algunos ejemplos de cómo puede quedar:

WPSFront scroll top.

Este complemento es mucho mas completo y personalizable que el antecesor sin duda ,vamos haber su panel de opciones que da para bastante.

Una vez instalado vamos nuestro panel de admin Ajustes > Scroll al inicio.

En esta primera parte tenemos…

  • Activado : Activar o no el plugin (Obvio).
  • Javascript asíncrono : Esto significa que el código Javascript lo cargara de forma asíncrona por lo tanto no interfiere en el flujo del sitio y ganamos puntos en la velocidad de nuestra web.Por defecto viene deshabilitado si no entiendes de que que va puedes dejarlo así.
  • Compensación del scroll : Esto resumidas cuentas es la media en píxeles que nos deslizamos en la ventana para que aparezca el botón o texto de ir arriba.
  • Tamaño del botón : Podemos darle un ancho y alto personalizado desde aquí.
  • Opacidad del botón : La transparencia que queremos que tenga en un porcentaje de 0 a 100.
  • Duración de la desaparición del botón : Tiempo en milisegundos que durará el efecto de desaparecer del botón.
  • Duración del scroll : Tiempo en milisegundos que durara el scroll hacia arriba cuando pulsamos el botón , haz pruebas , lo elegante es un movimiento ni muy rápido ni muy lento.
  • Ocultar automáticamente : Una se muestra el botón y con la página parada, determina si ocultar o no el botón.
  • Ocultar automaticamente despues de : En segundos tiempo de espera para ocultar el botón con página parada y habiendo activado la opción anterior.
  • Ocultar en dispositivos pequeños : Si no quieres que se muestre en dispositivos móviles marca esta opción.
  • Anchura máxima de los dispositivos pequeños : Tenido la casilla anterior activada, hasta que ancho de pantalla quieres que tenga en pixeles para que se oculte.
  • Ocultar en ventanas pequeñas : Esta opción es la misma que la anterior pero cuando se trata de un navegador web.
  • Anchura máxima de las ventanas pequeñas : Igual, determinamos el ancho máximo en pixeles de la ventana para que oculte el botón.
  • Ocultar en WP-ADMIN : Este plugin también muestra el boton en tu panel de administracion , tu decides si quieres o no.
  • Ocultar en iframes : Ocultar cuando hay ventanas emergentes o iframes , si no entiendes esto puedes dejarlo como viene.
  • Estilo del botón : Esta opción es importante porque depende lo que escojamos se mostraran unas opciones u otras más adelante, en definitiva nos dice, ¿que queremos mostrar?, un botón, un texto o un icono de Font Awesome , que es un servicio que provee de iconos para el desarrollo web en pocas palabras.
  • Acción del botón : Qué acción realizara nuestro botón:
  • Desplazarse hacia arriba : Esta es la opción por defecto , nuestra ventana se desplazara hasta arriba del todo.
  • Desplazarse al elemento : Es posible que nuestro tope arriba sea diferente y queremos que la ventana desplace a un elemento en concreto, debemos determinar un selector css , si no saber de programación hay un enlace hacia un tutorial que lo explica.

WpFront plugin elegimos la opción desplazamiento a elemento.

  • Enlace a al página : En esta podemos elegir si queremos que el botón nos enlace a una página fuera de la que estamos , para ello debemos introducir un enlace a esta.
WpFront plugin elegimos la opción desplazamiento a página.

  • Ubicación : Elige la ubicación del botón entre las cuatro posibilidades . por defecto abajo derecha.
  • Margen x : Margen en pixeles en la horizontal , admite valor negativo para mejor ajuste.
  • Margen y : Igual que el anterior pero esta vez en la vertical.
  • Filtrar : Nos permite determinar mediante filtros donde queremos y donde no que se muestre el boton, con combinación de entradas y paginas muy personalizable.

Este último bloque de ajustes dependerá de lo que hayamos escogido en la opción Estilo del botón.

  • Imagen Botón: Nos muestra una lista de diseños de botones , entre los que podemos elegir.
WPFront botones entre los que podemos elejir.
  • Texto del botón : Si elegimos Texto , podemos establecer color del texto , color al pasar el ratón sobre el css personalizado para darle mas estilo.

  • Font Awesome : FW es un famoso framework css que nos provee de iconos a los desarrolladores , con esta opción podemos usar estos ícono como botón. En primer lugar tenemos que especificar la clase css del icono, La url de CDN , osea la url para cargar las hojas de font Awesome, color de icono y css personalizado para darle más estilo.

Con esto y hemos repasado todo lo que da de si este fantástico plugin , como ves es mas configurable que el anterior. La eleccion dependera hasta cuanto necesites tu en tu sitio, si con las prestaciones de ScrollTop ya cumples tus objetivos o necesitas más personalización con WPFront .

También te pueden interesar estos plugins…

Cómo hacerlo sin plugins.

Como siempre se dice entre programadores.

El mejor plugin para WordPress es el que no se usa.

Usar plugins para todo tiene un coste en tu web a nivel rendimiento, por el simple echo que siempre hay funcionalidad , archivos y recursos que incluye este que no se usan,, pero tiene un peso y hacen que nuestro sitio tenga mas trabajo innecesario al cargarlos. Esto seria en resumidas cuentas porque me gusta mas esta opcion y yo intento al maximo evitar plugins en mis paginas con WP.

También hay que tener en cuenta que no todo el mundo sabe manejar código, ni adentrarse en editar archivos del backend para incluir funcionalidad, Por eso los plugins son tan prácticos y hacen que todo sea mucho más fácil.

Vamos a ello…

Lo más importante antes de nada.

Lo primero que deberías hacer antes de tocar codigo es asegurarte la jugada y hacer una copia de seguridad de tu sitio. Normalmente los proveedores de hosting integran este servicio de forma gratuita, informate del tuyo y haz tu copia.En le caso de que no puedes utilizar plugins como estos:

Otro paso importante antes de hacer nada es que dispongas de un tema hijo de tu tema principal , esto ayuda mucho a no perder las modificaciones que hagas ahora en caso de que se actualice tu tema.

Si no sabes como hacerlo puedes mirar este video.

Vamos al lio…

Primero crearemos un archivo llamado boton-hacia-arriba.js y le pegaremos este código:

jQuery(document).ready(function($) {
		$header = $('header');
		
		$('#boton-hacia-arriba').on("click",function(e){
			e.preventDefault();
			$('html,body').animate({ scrollTop: 0 }, 800);
		});
		
		$(window).on('scroll', function() { 
			 var $top = jQuery(this).scrollTop();
			if ($top >= $header.outerHeight(true)) {
				$('#boton-hacia-arriba').css({ 'bottom':'50px' });
			} else {
				$('#boton-hacia-arriba').css({ 'bottom':'-100px' });
			}
		});
	});

En el directorio de tu tem, dentro de su carpeta busca si hay una llamada js, si no la hay la creas , ósea en la ruta de tu wordpress, wp-content>themes/nombre-de-tu-tema/js , copia el archivo en ella.

Si ya tienes tu tema hijo como recomendamos , en su directorio crea si no existe un fichero con nombre functions.php y pega el siguiente código. Si no tienes tema hijo, en los archivos del tema que uses debería existir este archivo ,pega el código al final del archivo y listo!!.

/**
 * Enqueue button javascript script.
 */
function themeslug_add_button_script() {
  wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/boton-ir-hacia-arriba.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'themeslug_add_button_script' );
/**
 * Add button HTML to the footer section.
 */
function themeslug_add_scroll_button() {
  echo '<a href="#" id="boton-hacia-arriba">
			  <div class="arrow-side side-1"></div>
			  <div class="arrow-side side-2"></div>
		  </a>';
}
add_action( 'wp_footer', 'themeslug_add_scroll_button' );

Ahora en el menú de tu WordPress ves a Apariencia > Personalizar > Css Personalizado y pega al final el siguiente código:

#boton-hacia-arriba{
	background-color: #000000;/* Puedes cambiar el color de tu boton aqui*/
    	opacity: .6;
    	position: fixed;
    	bottom: -100px;
    	right: 50px;
    	padding: 5px;
    	height: 35px;
    	width: 35px;
      border-radius: 50%;
    	cursor: pointer;
    	transition: bottom .8s;
}
#boton-hacia-arriba:hover{
	opacity:1;
}
#boton-hacia-arriba .arrow-side{
	display:block;
	position:absolute;
	width:16px;
	height:3px;
	background-color:#ffffff;
	border-radius:10px;
	vertical-align:middle;
}
#boton-hacia-arriba .arrow-side.side-1{
	transform: rotate(130deg);
    	position: absolute;
    	top: 14px;
    	left: 5px;
}
#boton-hacia-arriba .arrow-side.side-2{
	transform: rotate(230deg);
    	position: absolute;
    	top: 14px;
    	right: 4px
	}

Y con esto ya tendríamos nuestro botón sin usar plugins. Es posible que el código en algunos temas por su estructura no se adapte bien del todo , pero si entiendes de css , tiene arreglo seguro. En caso contrario que no sepas nada de código y tengas problemas puedes comentar como te a ido y miramos de darle solución.

Puedes ver como ha quedado:

¿Que te ha parecido el articulo?, ¿conoces mas plugins similares? o simplemente tienes alguna sugerencia , haz un comentario.

Ivanicof Tema Gratuito

Ivanicof Tema Gratuito

Como ya sabéis los que me seguís hace tiempo una de mis hobbies es diseñar temas para WordPress de forma desinteresada y gratuita para todo el mundo.

En esta ocasión he realizado un tema limpio y claro con motivo de blog personal, estilo de vida y en definitiva enfocado a publicaciones claras con imágenes que digan mucho de su contenido.

Las características mas importantes de Ivanicof en cuestión de diseño serian:

  • Elección de dos o una columna para distribuir los posts.
  • Podemos escoger la tipografía y estilo de letra para títulos y contenido.
  • Cabecera personalizable en imagen ,iconos sociales y buscador.
  • Elección de ocultar barra lateral o tenerla a al izquierda o derecha.
  • Iconos sociales en cabecera y pie de pagina

Como una imagen vale mas que mil palabras aqui dejo algunas capturas:

 

También podéis visualizar la demo desde aquí.

Mas temas gratis realizados por un servidor aqui.

Pues bien espero que el tema sea de vuestro agrado y si encontráis algún problema con el o queréis comentar algo , ya sabéis, usar los comentarios y responderé lo mas brevemente posible , un saludo

Entrada anterior y siguiente con imagen destacada.

Entrada anterior y siguiente con imagen destacada.

A la hora de crear nuestros temas de WordPress debemos ser originales o por lo menos intentarlo.

Aunque está todo hecho e inventado en el mundo de los temas de wp siempre podemos dar un toque diferente que nos haga lucir nuestra web atractiva al usuario final.

En esta ocasión vamos hacer que en nuestra entrada individual en el blog el post anterior y siguiente se muestra la imagen destacada correspondiente a cada uno y no el típico «Next» , «Previous» que vemos siempre.

Para veais a lo que me refiero , esto seria lo que vemos en el tema Twenty Nineteen:

Aquí se muestra un enlace a Entrada anterior y posterior con el título de la entrada y el código seria algo como esto:

the_post_navigation( array(
				'prev_text'                  => __( ' %title','fitness-passion' ),
				'next_text'                  => __( ' %title →','fitness-passion' ),
				'screen_reader_text' => __( 'Continue Reading','fitness-passion' ),
			) );

Pues vamos a hacer algo como lo siguiente , que seria lo mismo pero mostrando las imágenes destacadas y un poco de css para mejorar la apariencia.

Para ello usare una función, la cual usa get_previous_post y get_next_post y a partir de ellas obtenemos el $post y usamos sus propiedades para montar nuestra navegación.

<?php themeslug_posts_navigation(){ 
	global $post;
	?>
<div class="posts-navigation">
<div class="nav-links"><!--?php $prevPost = get_previous_post(true);
				if($prevPost) {
					$args = array(
						'posts_per_page' => 1,
						'include' =>; $prevPost->;ID
					);
					$prevPost = get_posts($args);
					foreach ($prevPost as $post) {
						setup_postdata($post);?-->
<div class="nav-previous" style="background-image: url(<?php echo get_the_post_thumbnail_url('get_the_ID('),'large');?>">
<h4><?php echo get_the_post_title();?></h4>
</div>
<?php wp_reset_postdata();
					} //end foreach
				} // end if
				
				$nextPost = get_next_post(true);
				if($nextPost) {
					$args = array(
						'posts_per_page' =>; 1,
						'include' => $nextPost->ID
					);
					$nextPost = get_posts($args);
					foreach ($nextPost as $post) {
						setup_postdata($post); ?>
<div class="nav-next" style="background-image: url(<?php echo get_the_post_thumbnail_url('get_the_ID('),'large'); ?>">
<h4><?php echo get_the_post_title();?></h4>
</div>
<?php wp_reset_postdata();
					} //end foreach
				} // end if
						
				?></div>
</div>

 

Ten en cuenta que themeslug seria el slug de tu tema.

La función su lugar mas habitual seria en el single.php de tu tema después del contenido , por ejemplo así:

y con un poco de css en nuestro style.css.

.posts-navigation {
	margin: 0 0 1.5em;
	width: 100%;
	text-transform: uppercase;
}

.posts-navigation .nav-links {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.posts-navigation .nav-next,
.posts-navigation .nav-previous {
	overflow: hidden;
	flex: 1;
	min-height: 10rem;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 20% 50%;
}
.posts-navigation .nav-next h4,
.posts-navigation .nav-previous h4 {
	width: 100%;
	height: 100%;
	margin: 0;
	background-color: #0e0e0e42;
	transition: background-color .4s ease-in;
	font-size: .8rem;
	font-weight: 100;
}
.posts-navigation .nav-next h4:hover,
.posts-navigation .nav-previous h4:hover {
	background-color: #a1624c;
}
.posts-navigation .nav-next h4 {
	text-align: right;
}
.posts-navigation .nav-next a,
.posts-navigation .nav-previous a {
	color: white;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

Ya tienes otra forma de mostrar tu navegación de post en WorPress , seguro tu tema te lo agradecerá.

Si te ha gustado la entrada o tienes algo que aportar haz tu comentario, un saludo y hasta la próxima.

Divi el tema para wordpress mas usado.

Divi el tema para wordpress mas usado.

El tema Divi es una de las plantillas más usadas por los usuarios y desarrolladores de WordPress sin duda .

Esto es debido a que los chicos de Elegant Themes has sabido crear un producto que facilita la vida a la gente.

Con Divi y su constructor visual integrado , construir páginas en wp es una tarea muy fácil y no necesita conocimientos en programación ni maquetación previos.

Además dispone de módulos que abarcan casi cualquier situación que se te presente para maquetar y lo que no cubren sus módulos seguro hay algún plugin que hace lo necesario.

Si quieres disponer de el tienes dos planes de compra en Elegant Themes.

  • Plan anual: Con este plan tendrás acceso a todos los contenidos de Divi , plugins y temas de Elegant Themes por un año , a partir de hay no dispondrás de actualizaciones.
  • Plan De por Vida: Dispones de lo mismo que el anual pero para siempre sin preocuparte de mas pagos que uno único de 248$ ahora mismo.

Mas información en su web.

Si quieres probar divi antes de adquirir un plan , puedes usar el builder online de divi o descargarte el tema gratuito desde aquí :

Divi 3.11 Descarga

Si es para un proyecto personal puedes usar el tema gratuito ,pero si piensas usarlo con clientes lo mejor es que te acojas a un plan de Elegant Themes.

Nota: algunos de los enlaces en esta publicación son» enlaces de afiliados «. Esto significa que si hace clic en el enlace y compra el artículo, recibiré una comisión de afiliado».