Anteriormente les explicaba como desde un enlace, desplazarnos hacia arriba estando en la parte de abajo de nuestro sitio con ayuda de JavaScript. Ahora les mostrare algo muy parecido pero con HTML, solo que la pagina no se desplazara suavemente con el efecto que se utiliza en JavaScript, si no que de golpe se mostrara la parte de arriba al hacer clic en nuestro enlace.
Primero editamos la plantilla que utilizamos en WordPress, y seleccionamos el archivo header.php (o el equivalente a la cabecera), después nos desplazamos hacia la linea que contenga :
<body>
De tal forma que nos quede de esta manera :
<body id="home">
Si el elemento body ya tiene algún ID :
<body id="otroID">
Entonces lo dejamos intacto, y anotamos el otroID para utilizarlo en el siguiente paso.
Ahora para colocar el enlace, tendríamos que colocarlo de la siguiente forma :
<a href="#home">Ir Hacia Arriba</a>
Y para las plantillas que ya tengan un ID, solo tendríamos que sustituir #home por el ID, anteponiendo un # :
<a href="#otroID">Ir Hacia Arriba</a>
Guardamos todos los cambios, y el enlace debería de funcionar.
Nota: Si queremos utilizar una imagen, solo tendríamos que ponerlo de la siguiente manera dependiendo del ID :
<a href="#home"><img src="http://www.mipagina.com/imagen.png" /></a>
El ID, puede ser cualquier nombre, solo que en un sito web o blog nunca deben de haber dos id’s repetidos o iguales.
Editado :
Si no están conformes con lo anterior, aquí esta otra manera de lograr lo mismo.
Lo que tendríamos que hacer seria en lugar de colocar un ID en body colocar la siguiente linea justo despues de la etiqueta body :
<a name="idelemento" />
Y el enlace que nos lleva al principio de la pagina seria :
<a href="#idelemento">Ir Hacia Arriba</a>
Para los que no saben todabia, aqui esta una guia para saber como editar una plantilla en WordPress.
Articulos Relacionados:
- Ir Hacia Arriba en WordPress con JavaScript
No se si hayan notado un enlace que aparece al...
eva
3 abril 2010
Hola. una duda:
Hay alguna diferencia si en vez de darle un id a la etiqueta body, dejo el href del enlace con el valor “#” solamente?
Saludos y muy buen blog!
3 abril 2010
Creo que; si la etiqueta body, ya tiene ID, solo anotas este ID en el href; pero si preguntas que si se puede solo agregar el href con un ID # sin tener algún ID en el body, pues creo si hay una solución, pero a fuerzas tienes que editar la plantilla. Voy a agregar unos cuantos detalles al articulo para ver si con esto quedas libre de dudas.
3 abril 2010
Gracias por la rápida respuesta Alan!
Ya mismo estoy ojeando nuevamente el artículo