Olá pessoal. Hoje eu vou contar um pequeno truque de como quebrar o texto ao redor de imagens inseridas nos artigos com textos como este por exemplo. Algumas pessoas utilizam o termo contornar texto, quebrar texto, embrulhar com texto ou ainda em inglês wrap text. Bem, vou destacar duas possibilidades. Uma possibilidade é inserindo o código diretamente na tag IMG em HTML e outra é editando a folha de estilo Style.css e chamando posteriormente o estilo na tag IMG em HTML. A opção de editar a folha de estilo tem a vantagem de usar um código menor na tag IMG, mas em contrapartida você fica limitado a fazer ajustes nos valores das distâncias das margens/bordas entre o texto e a imagem individualmente, pois ficaria definido para todas imagens na folha de estilo. Bem, você entenderá melhor mais para frente. Já na opção de inserir o código por completo na tag IMG sem usar a folha de estilo, você pode definir os valores das distâncias das margens/bordas entre o texto e a imagem individualmente. Neste artigo, na imagem aqui inserida à esquerda temos o seguinte código:

<img style="border: 0pt none; float:left; padding-right:10px; padding-bottom:1px" title="" src="http://www.meusite.com.br/minhaimagem.jpg" alt="...>

O que nos interessa para quebrar o texto ao redor da imagem é a inserção do código marcado em vermelho na tag IMG acima. Então temos:

float:left – Aqui em float utilizei left para indicar que a imagem fica posicionada à esquerda. Se fosse à direita seria right;
padding-right:10px – Neste caso estando a imagem à esquerda (left), em padding-right usa-se o right para  informar a distância em pixels que o texto vai ter da margem/borda direita (right) da imagem. Aqui todo texto inicia afastado 10 pixels à direita da borda da imagem;
bottom:1px – Aqui em bottom é informado a distância em pixels que o texto vai ter da margem/borda inferior (bottom) da imagem. Aqui todo texto inicia afastado 1 pixel abaixo da borda inferior da imagem.

Para imagens inseridas no lado esquerdo temos algumas alterações no código acima. Como a imagem está agora à direita o comando float:left passa a ser float:right para indicar que a imagem fica posicionada à direita. O comando padding-right:10px agora passa a ser padding-left:10px para informar que o texto inicia afastado 10 pixels à esquerda da borda da imagem e não à direita como estava anteriormente. Uma nova possibilidade é a utilização do comando padding-top:5x para informar que o texto inicia afastado 5 pixels acima da borda da imagem superior. Pronto, com a inserção destes pequenos códigos na tag img você poderá inserir imagens em seus artigos e contornar os textos nas imagens. Anteriormente eu havia mencionado que há uma outra possibilidade de fazer o mesmo, mas editando a folha de estilo. Bem, na minha opinião, eu prefiro esta primeira opção devido a mobilidade de se definir individualmente as distâncias entre as margens e não deixar uma medida fixa na folha de estilo e poder visualizar na aba “visual” quando editando o texto já contornando a imagem. Bem, de qualquer forma, vamos a segunda opção onde será necessário editar a sua folha de estilo Style.css inserindo o seguinte código:

.contornoesq {border: 0pt none; float:left; padding-right:10px; padding-bottom:1px}
.contornodir {border: 0pt none; float:right; padding-left:10px; padding-bottom:1px}

Salve sua folha de estilho e evie para seu provedor e atualize a página no navegador (browser) com shift-F5 ou limpe o cache para carregar a página com a nova folha de estilo. Bem, agora ao invés de usar aquele código acima em style=”border…” em vermelho, você deverá utilizar o código da seguinte forma se a imagem estiver à esquerda:

<img class="contornoesq" title="" src="http://meusite.com.br/minhaimagem.jpg" alt="...>

E se a imagem estiver à direita utilize este código:

<img class="contornodir" title="" src="http://meusite.com.br/minhaimagem.jpg" alt="...>

É isso aí pessoal. Estas são as duas maneiras de contornar as imagens com textos quando criando um artigo no WordPress. Veja a qual você se adapta melhor. ;0)