Efecto para el botón de subir arriba
Esta parte es opcional pero si quieres que el botón suba con un movimiento suave hacia arriba (si no pones esto sube como de un golpe, pero esto le da un toque “slow”) tienes que poner en el html del blog: Plantilla/Editar Html buscar la etiqueta </head> y antes de esta etiqueta pegar el siguiente código:¿Eres de escribir entradas largas?
Entonces seguro que te gustaría tener en tu web una forma sencilla de ir arriba, hacia la parte superior de tu página, pero sin tener un botón siempre visible.
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, 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 cómo sabes, soy de los que si puedo, no uso ningún plugin y le meto mano al código.
¿Nos metemos en harina?
Índice de Contenidos [ocultar]
Cómo insertar un botón para ir arriba con 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 dos ficheros:
- main.js
- modernizr.js –> Este lo traen ya muchos temas, y no suele ser necesario descargarlo ni subirlo. Es estándar, y cualquier versión te sirve.
Si no se descargan directamente, haz clic con el botón derecho y luego en “Guardar enlace como…”
Sube ambos 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.
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/
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/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
/* --------------------------------
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(img/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 {
|
