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 .
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?
Finalmente poderei dar o crédito da imagem da maneira correra.
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…
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.
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!
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/
Só uma correção: quem está limitando o texto com a classe wp-caption-text não é uma DIV, é um P, um parágrafo.
obrigado pela dica! resolveu o meu problema!
fiz as modificacoes no tecnopot.com.br e nao funcionou, n entendi porque
grande abraco
cassiano
Cara, no klentinhas.com, as imagens não ficam centralizadas com as legendas.
Estranho isso, oq ue pode haver?
Mesma coisa acontece comigo, não centraliza as imagens.
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.
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.