WordPress es una plataforma muy facil de usar con muchas caracteristicas y es gratis, pero aun asi hay personas que no saben utilizarlo muy bien, y una de las cosas que supongo que no saben es ¿Como Agregar Widgets a nuestra pagina en WordPress? para lograr esto primeramente tenemos que entrar al panel de WordPress, después vamos hacia la categoria Apariencia que aparece en el sidebar del panel a la izquierda, y hacemos clic sobre la opcion Widgets, una vez ahi nos aparecera una pagina con algo parecido a lo siguiente :
Los pequeños rectangulos que aparecen en el recuadro “Widgets Disponibles” muestra todos los widgets que podemos utilizar, solo vasta con arrastrar uno de estos widgets a la parte derecha (que en mi caso se llama Barra Lateral 1) que viene siendo el sidebar (barra lateral), los widgets comienzan a mostrarse al momento de arrastralos hasta la seccion del sidebar y cuenta con opciones para poder personalizarlos.
Ejemplos de widgets y su descripcion :
Archivos :
Muestra una lista de archivos mensuales de las entradas de nuestro blog.
Buscar :
Añade un recuadro de búsqueda para que los usuarios puedan buscar lo que deseen en toda la pagina.
Calendario :
Muestra un calendario común y corriente, solo que al hacer clic en una determinada fecha nos muestra los artículos correspondientes a tal fecha.
Categorías :
Muestra una lista con las categorías que se están siendo utilizadas por las entradas del blog.
Enlaces :
Muestra una lista con los enlaces que tengamos en el blogroll u otra categoría de enlaces.
Entradas Recientes :
Muestra una lista con las entradas mas recientes que tengamos escritas en nuestro blog (solo es posible mostrar un máximo de 15).
Meta :
Nos muestra los enlaces para poder iniciar sesión, cerrar sesión, y administración de WordPress.
Texto :
Aqui podemos agregar cualquier tipo de texto para que aparesca en nuestro sidebar, en este widget es posible agregar Texto, codigo HTML o codigo JavaScript.
Paginas :
Este widget muestra enlaces hacia las paginas que tengamos en nuestro blog como la pagina de Contacto y Acerca de.
RSS :
Este otro widget muestra un extracto de las ultimas entradas de cualquier Feed RSS (Es posible mostrar un máximo de 20 entradas) para poder mostrar las entradas de diferentes feeds tendriamos que agregar otro widget RSS.
Nube de Etiquetas :
Muestra una pequeña nube con enlaces hacia las etiquetas mas comunes de nuestro blog, las mas usadas se destacan con un mayor tamaño y las menos utilizadas se muestran con un tamaño mas pequeño.
Si hemos agregado varios widgets y no nos gusta el orden en el que aparecen, solo tenemos que arrastrarlos hasta la ubicación deseada.
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.
No se si hayan notado un enlace que aparece al final de esta pagina y que muchas otras paginas o blogs también tienen.
¿Para que sirve? Sirve para que cuando un usuario se desplaza hasta el final de una pagina y estos en lugar de ir hacia arriba de la forma común, ahora solo tienen que hacer clic en Ir Hacia Arriba y la pagina automáticamente se desplaza hacia arriba; esto es algo muy útil, y aun mas si tenemos una Pagina Web o Blog que tienen mucho contenido o son muy extensos; para lograr esto es necesario utilizar JavaScript, lo podemos hacer de dos formas, una es con un enlace, y la otra es con una imagen como botón.
Para crear un enlace o un botón que nos regrese a la parte de arriba de la pagina.
Editamos la plantilla de nuestro Theme desde el mismo panel de WordPress, y seleccionamos el archivo header.php o el que corresponda a la Cabecera de nuestro Theme, luego después de la etiqueta :
<head>
Colocamos el siguiente código (JavaScript) :
<script type="text/javascript">
function backToTop() {
var x1 = x2 = x3 = 0;
var y1 = y2 = y3 = 0;
if (document.documentElement) {
x1 = document.documentElement.scrollLeft || 0;
y1 = document.documentElement.scrollTop || 0;
}
if (document.body) {
x2 = document.body.scrollLeft || 0;
y2 = document.body.scrollTop || 0;
}
x3 = window.scrollX || 0;
y3 = window.scrollY || 0;
var x = Math.max(x1, Math.max(x2, x3));
var y = Math.max(y1, Math.max(y2, y3));
window.scrollTo(Math.floor(x / 2), Math.floor(y / 2));
if (x > 0 || y > 0) {
window.setTimeout("backToTop()", 25);
}
</script>
Después de agregar el código anterior, guardamos los cambios realizados, y es hora de crear el enlace; para crear un enlace que nos dirija hacia arriba, lo tendriamos que crear con el siguiente formato:
<a onclick="backToTop(); return false" href="javascript:;">Ir Hacia Arriba</a>
y para utilizar una imagen en lugar de solo un enlace tendríamos que utilizar este otro formato :
<a onclick="backToTop(); return false" href="javascript:;"><img alt="texto alternativo" src="http://www.mipagina.com/imagen.png" /></a>
El enlace o imagen puede colocarse en cualquier lugar de la pagina, pero se recomienda colocarlo lo mas abajo posible para aprovechar correctamente este método.
Nota: El código de los enlaces se puede modificar a nuestras necesidades, solo que tenemos que respetar los elementos :
onclick="backToTop(); return false" href="javascript:;"
a excepción del código JavaScript que insertamos en el Header de nuestra Plantilla, ya que este si es modificado podría provocar que no funcione correctamente.
Alan
