Mi nombre es Fernando Briano y soy programador.

Adaptar el theme para WordPress 2.6: [Caption]

Una de las nuevas características de WordPress 2.6, es la de agregar un “caption” a cada imagen. O sea, un texto que muestra el valor del texto alternativo (propiedad “alt” del tag “img”) de la imagen, con una caja y borde al rededor. Esta característica viene habilitada por defecto. Podemos verla cuando insertamos una nueva imagen. El uploader de imágenes nos avisa que el texto alternativo será usado como “caption” también.

Al insertar la imagen con el botón de “Add an image” (agregar una imagen), nuestro editor nos muestra algo así:

WordPress Caption

La imagen es encerrada entre los tags:

[caption id="attachment_936" align="aligncenter" width="125" caption="WordPress"]
[/caption]

Este código es automáticamente “traducido” a HTML y CSS, e interpretado como tal por nuestro navegador. Entonces, la imagen va a tener un código así (código de ejemplo):

<div id="attachment_936" class="wp-caption aligncenter" style="width: 128px;">
     <a href="url/img/wordpress.jpg">
          <img title="WordPress" src="url/img/wordpress.jpg" alt="WordPress" />
     </a>
     <p class="wp-caption-text">
          WordPress
     </p>

Como ven, hay un par de clases nuevas que tenemos que definir en nuestro CSS. Por defecto, el CSS de nuestro tema no está preparado para mostrar el caption como viene en WordPress 2.6, a menos que hagamos algunas modificaciones.

Los cambios los podemos observar en el tema por defecto, en el archivo style.css. Estos nos permiten mostrar la caja de caption, y el texto en tamaño chico. Pueden verlo en el changeset de WordPress 2.6, o si lo descargaron, ir hasta /wp-content/themes/default y ver el archivo style.css.

El código es el siguiente:

/* Captions */
.aligncenter, div.aligncenter {
     display: block;
     margin-left: auto;
     margin-right: auto;
}
 
.wp-caption {
     border: 1px solid #ddd;
     text-align: center;
     background-color: #f3f3f3;
     padding-top: 4px;
     margin: 10px;
     -moz-border-radius: 3px;
     -khtml-border-radius: 3px;
     -webkit-border-radius: 3px;
     border-radius: 3px;
}
 
.wp-caption img {
     margin: 0;
     padding: 0;
     border: 0 none;
}
 
.wp-caption p.wp-caption-text {
     font-size: 11px;
     line-height: 17px;
     padding: 0 4px 5px;
     margin: 0;
}
/* End captions */

El primer bloque (.aligncenter) es el que se encarga de alinear al centro la imagen, en caso de que así lo especifiquemos en las opciones del uploader de imágenes. En .wp-caption, podemos editar el color de fondo y borde, alineación de texto, etc. En mi caso por ejemplo usé los colores #222 para el fondo y #86bb66 para el borde, de manera de adaptarlo al resto de los colores del sitio. El resto del código es bastante explicativo.

Lo que hay que hacer es agregar estas líneas de código al css de nuestro tema/theme/plantilla/template de WordPress, y personalizarlo con los colores, márgenes y demás a nuestro gusto. Yo estrené el nuevo diseño en el post anterior, y mi caja con caption se ve así:

PicandoCodigo.net

PicandoCodigo.net

Feed de comentarios | Url para Trackbacks | Suscribirse a los posts por correo electrónico

15 comentarios en este post

  1. Avatar fernando 19 Julio. 2008 - 4:15 pm Debian IceWeasel 3.0 Debian GNU/Linux

    Por cierto, es un sufrimiento tratar de mostrar código HTML en un post de WordPress, incluso teniendo el plugin WP-Syntax…

  2. Avatar soullost 20 Julio. 2008 - 1:15 pm Firefox 3.0 Gentoo

    Cierto, yo tambien me percaté de lo mismo (del caption), habrá que picarle un rato al css. Sobre insertar (x)html en un post para mostrar, tienes que tener el cuenta que hay que escribir los signos de las etiquetas (, sobre todo el <) como < y > para que no lo interprete como html.

  3. Avatar soullost 20 Julio. 2008 - 1:18 pm Firefox 3.0 Gentoo

    Vaya que me hizo lo mismo (me estropeo el código html), decía que para mostrar código (x)html hay que sustituir < y > como:
    < y > .

  4. Avatar soullost 20 Julio. 2008 - 1:22 pm Firefox 3.0 Gentoo

    Dios santo XD, deverías permitir pre, mejor te dejo un link http://codex.wordpress.org/Writing_Code_in_Your_Posts .

  5. Avatar fernando 20 Julio. 2008 - 8:16 pm Debian IceWeasel 3.0.1 Debian GNU/Linux

    soullost:
    Creo puedes usar “", vamos a ver si anda:

  6. Avatar fernando 20 Julio. 2008 - 8:17 pm Debian IceWeasel 3.0.1 Debian GNU/Linux

    Maldito WordPress… Es frustrante!
    Me voy a leer el enlace a ver qué onda…

  7. Avatar elfleat 4 Agosto. 2008 - 12:54 am Firefox 3.0.1 Windows XP

    Buen Tip! 😀

  8. Avatar Kevin 9 Agosto. 2008 - 8:54 am Firefox 3.0.1 Windows XP

    Muchas gracias por la información del Caption!
    Lo acabo de descubrir subiendo una foto a un post y me ha ido de perlas para poderlo editar 🙂

  9. Avatar fernando 9 Agosto. 2008 - 5:53 pm Debian IceWeasel 3.0.1 Debian GNU/Linux

    Qué bueno que a alguien más le sirvió 😀

  10. Avatar Peliculas Online 2 Febrero. 2009 - 11:46 am Internet Explorer 7.0 Windows XP

    Muchas gracias por el aporte, buen trabajo

  11. Avatar Juan Mosa 26 Junio. 2010 - 11:16 pm Firefox 3.5.10 Windows XP

    te amo jajaja gracias este código es el único que me funciono de todos los que probe gracias por eso

  1. WordPress Cómo mostrar código fuente en los comentarios | Picando Código | 24 Julio. 2008 - 2:47 am

    […] que esperábamos. Destaco los posts sobre sintaxis, y más recientemente el post de AWK, o el de WordPress y caption, donde pasó lo mismo (malditos […]

  2. WordPress Problema de alineación de imágenes en Wordpress 2.6.x | Punto Geek | 28 Agosto. 2008 - 2:43 pm

    […] Otro truco de yapa es el de los CAPTIONS, que son una descripción que se agrega a la imagen, además de un marco con bordes redondeados que le da un efecto muy elegante, lo pueden ver en cada imagen de los posts de Punto Geek. Para usarlos correctamente tenemos que agregar el siguiente código a nuestro CSS: Clic para ver Texto Plano CSS: […]

  3. vBSEO (VBulletin) Di lo que quieras 2.5 | 17 Febrero. 2011 - 1:42 am

    […] […]

  4. vBSEO (VBulletin) Las imagenes no quedan centradas | 29 Marzo. 2011 - 9:58 pm

    […] […]

Dejar un comentario

Toasty!