Prepara tu tema para las galerías de WP 2.6

WordPress 2.6 viene con novedades bastante interesantes, como ya hemos comentado. Pero para poder aprovecharlas tenemos que tener nuestro tema adaptado a las nuevas especificaciones.

1. Preparar el tema para la alineación de imágenes.
WordPress ahora alinea las imágenes a un lado o a otro del texto, haciendo que maquetar sea mucho más sencillo.

Alinear en WordPress 2.6
Alinear en WordPress 2.6

Al alinear imágenes, aparecerán en ese lugar, y el texto se adaptará a su localización. Algo muy cómodo a la hora de trabajar, pero que necesita de un poco de código en nuestra hoja de estilos.

WordPress, para alinear, añadirá al código de las imágenes, dependiendo de la posición, las siguientes clases:

  • alignnone (sin alineación)
  • alignleft (alineado a la izquierda)
  • aligncenter (centrado)
  • alignright (alineado a la derecha)

Que necesitarán su correspondiente código en nuestra hoja de estilo.

.alignleft {
	float: left;
}
.alignright {
	float: right;
}
.alignnone {
	float: none;
}
.aligncenter{
	display:block; margin-left:auto; margin-right:auto;
}

Con este añadido de código nuestras imágenes se colocarán de forma correcta en nuestro artículo.

2.- Corregir los textos de alineación de la galería.

Y seguro que os habéis dado cuenta también de que cuando se incluye una nueva imagen, los textos la alineación se descuadra.

Subir imágenes
Subir imágenes

Esto ocurre porque en inglés los identificadores serían ‘none’, ‘left’, ‘center’, ‘right’, que ocupan bastante menos que nuestras líneas de ‘ninguno’, ‘izquierda’, ‘centrar’, ‘derecha’.

Problemas en la alineación
Problemas en la alineación

Para arreglar esto tenemos que irnos a nuestro archivo de idiomas (en /wp-content/languages/) y editar el archivo .po.

Archivo es_ES.po
Archivo es_ES.po

¿Cómo se edita un archivo .po? Con un progama como poedit, por ejemplo.

Primero, buscamos las cadenas a editar.

Buscamos 'izquierda'
Buscamos 'izquierda'

Una vez encontradas, las editamos.

Encontramos la cadena
Encontramos la cadena

Y una vez editadas, las guardamos. Al guardar, el sistema nos creará los archivos es_ES.po y es_ES.mo. Este último es el archivo de idioma que lee WordPress, así que es el que tenemos asegurarnos de subir.

Guardamos el texto. Se crean los archivos .po y .mo
Guardamos el texto. Se crean los archivos .po y .mo

Ya tendemos nuestra galería sin que se descuadre.

Galería corregida
Galería corregida

3.- Modificar el formato de las leyendas.

Si quieres hacer que quede bonita la leyenda, sólo tienes que jugar un poco con la hoja de estilo.
En nuestro caso, por si quieres utilizarlo de base, nuestro código es el siguiente:

.wp-caption {
	background-color: #eee;
	text-align: center;
	padding-top: 4px;
	border: none;
}

4.- Modificar el tamaño relativo y la posición de las imágenes.

Ésta es, sin duda, la actualización que más nos ha llamado la atención a la hora de jugar con las galerías.

Si hemos incluido una imagen en nuestro WordPress, podemos editarla pasando el ratón sobre ella en el modo de edición visual.

Editar una imagen
Editar una imagen

Haciendo esto, entraremos en un nuevo menú que nos permitirá cambiar el tamaño relativo de la imagen, así como su posición y , lo más importante, su enlace.

Edición de la imagen
Edición de la imagen

Y, en las opciones avanzadas, mucho más:

  • Cambiar el tamaño de la imagen
  • Añadir clases a la css
  • Añadir estilos
  • Añadir bordes y espaciados
  • Configurar el enlace asociado
Opciones avanzadas
Opciones avanzadas

¿Os ha surgido algún problema? ¿Hay algo que queráis saber hacer? Cuéntanoslo en los comentarios o a través de nuestro formulario de contacto.

2 respuestas a «Prepara tu tema para las galerías de WP 2.6»

  1. […] pequeño artículo que he escrito para Mecus y que podéis leer aquí. Parece mentira, he puesto a punto el blog de mecus, y en el mío todavía no lo he aplicado. Si […]

  2. Avatar de David

    llevo toda la mañana intentando cuadrar las imagenes con el texto. Ha sido modificar la hoja de estilos como cuentas y «voilá»! problema resuelto. Mil gracias amigo, sigue enriqueciendo internet!