Uma das grandes novidades do WordPress 2.6 é a inserção de legendas (captions) nas imagens. Funciona assim: o texto alternativo (alt=”qualquer coisa”) aparece abaixo da imagem, no post, caso o autor assim o queira. Se você atualizou seu sistema, mas ainda assim nada aconteceu em relação às legendas, ou elas apareceram sem formatação alguma, nada tema! O pBlog lhe ajuda a corrigir isso.
Antes de adentrarmos à edição, cabe uma breve explicação sobre o funcionamento das legendas. No editor, se você alterar o modo de exibição para o HTML, verá que há tags envoltas por [colchetes], cheias de atributos, responsáveis pelas legendas em torno das imagens. Não é preciso mexer em nada, só estou comentando a título de curiosidade 
.
No post, já publicado, em torno da imagem aparece uma DIV com classe wp-caption, e dentro dela, limitando a legenda em si, a DIV com classe wp-caption-text. É editando-as que teremos o efeito desejado, bastando, para tal, criatividade do editor (e talento em CSS, claro). Funciona assim, mais ou menos:
<div class="wp-caption"><img title="Imagem" src="caminho-da-imagem.jpg" alt="Imagem" /> <p class="wp-caption-text">Pôster de WALL•E.</p> </div>
Se CSS não é sua praia, esqueça o que leu acima, e simplesmente copie e cole o conteúdo abaixo em seu stylesheet.css:
.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;
}
Este é o código que foi incluído no tema padrão do WordPress, e gera o efeito presente nos blogs do WordPress.com, que por sua vez, pode ser conferido em meu blog pessoal. Bacana, não?
Como se vê, o trabalho é feito em cima das duas classes de DIVs comentadas acima - e nem poderia ser de outra forma. Este código, bastante complexo, mostra bordas arredondadas sem o uso de imagens, o que é deveras legal. Ele não impede, porém, que você mesmo crie sua formatação para as legendas. Basta saber um pouco de CSS, e ter imaginação, para ser diferente .
Márcio : 19 julho 2008 às 5:44 pm
Excelente dica Ghedin, mas um coisa estranha que observei é que a borda do footer da legenda é mais grossa do que o resto (de acordo com o seu blog pessoal).
O que pode ser?
José Vitor : 20 julho 2008 às 2:35 pm
Finalmente poderei dar o crédito da imagem da maneira correra.
Anizio Carlos da Silva : 21 julho 2008 às 6:18 pm
Será que tem uma forma da legenda aparecer ACIMA das imagens? Já pesquisei bastante sobre esse novo recurso do Wordpress 2.6, e não consegui encontrar nada…
Walmar Andrade : 22 julho 2008 às 8:31 am
Eu acho que a decisão de usar o “alt” foi equivocada. O alt deve ser uma descrição da imagem para quem não pode vê-la. A legenda não necessariamente precisa ser isso. O WP deveria ter criado um campo específico para a legenda, diferente do alt.
Rodrigo Ghedin : 22 julho 2008 às 9:37 am
Walmar, na realidade, o WordPress aproveita o Alt para inserir a legenda. Se você quiser escrever algo diferente na legenda, mantendo o texto original alternativo, basta, após inserir a imagem no editor, clicar no botão de edição (da imagem, que aparece após selecioná-la no editor visual), e escrever algo no campo Edit Image Caption.
Isso merece até um post
. Mais tarde escreverei.
[]’s!
José Vitor Lopes e Silva : 22 julho 2008 às 2:19 pm
A dica funcionou mas como não sei editar css ficou com cara de texto, confundindo com o conteúdo do post. Só por isso to usando http://www.channel-ai.com/blog/plugins/image-caption/
Bighi : 25 julho 2008 às 12:51 pm
Só uma correção: quem está limitando o texto com a classe wp-caption-text não é uma DIV, é um P, um parágrafo.
Alex Frachetta : 25 julho 2008 às 6:38 pm
obrigado pela dica! resolveu o meu problema!
cassiano : 28 julho 2008 às 11:24 am
fiz as modificacoes no tecnopot.com.br e nao funcionou, n entendi porque
grande abraco
cassiano
Wbrown : 02 setembro 2008 às 10:32 pm
Cara, no klentinhas.com, as imagens não ficam centralizadas com as legendas.
Estranho isso, oq ue pode haver?
[barba] : 22 novembro 2008 às 1:52 pm
Mesma coisa acontece comigo, não centraliza as imagens.
Alex Frachetta : 23 novembro 2008 às 10:16 am
Pessoal, se a imagem não está centralizando, tentem ir nas opções da imagem, cliquem na aba Advanced Settings e determinem um valor para Horizontal Space. Aqui comigo dá certo quando eu coloco 5.
Rics : 23 novembro 2008 às 5:32 pm
Pra centralizar o bloco inteiro (imagem e legenda) é só mudar uma das regras de CSS. Em .wp-caption onde temos margin: 10px; coloque margin: 10px auto; e pronto! Vai ficar tudo centralizado! Vocês podem ver o resultado no meu blog se quiserem. Estou usando.