Maikel Neris - guru Wordpress (título auto proclamado)

A maneira mais correta de se fazer um alinhamento de imagens na página web é usando css. Acontece que nem todo mundo sabe inserir códigos inline de css em elementos html, como no caso da tag img. Logo, quem não sabe usar o recurso acaba usando o alinhamento por parágrafo.

Quando você insere uma imagem em um post no Wordpress, essas são suas opções de alinhamento:

Mas esse alinhamento não funciona, se ele não estiver setado no seu arquivo css. Explico.

O que o sistema do Wordpress faz é inserir uma classe com um nome de alinhamento específico. Logo, para que o alinhamento se concretize, as propriedades css dessa classe devem existir.

As classes para cada alinhamento são: alignnone, alignleft, aligncenter e alignright. Então, se você escolher alinhar a imagem para a esquerda do texto, ou de onde ela está inserida, a classe a ser inserida na tag img será class=”alignleft”.

Num mundo perfeito, todos os temas teriam que vir com as propriedades de alinhamento em css por padrão. Mas se o seu tema não tem essas propriedades, abra o seu arquivo style.css e acrescente o seguinte códigopara alinhamento a esquerda e a direita:

img .alignleft { float:left; margin:0 10px 10px 0; }
 
img .alignright { float:right; margin:0 0 10px 10px; }

Adicionei a propriedade “margin” em ambas as classes, para que o texto não fique “grudado” na imagem (as margens mudam de acordo com o alinhamento).

Desenvolvedor que se preze tem que ter um kit de ferramentas adequados; isso inclui programas, frameworks, bibliotecas de códigos e outros. Vamos incluir nessa lista algumas extensões para o Firefox que auxiliam (e muito!) o rápido desenvolvimento e teste de websites:

• Web Developer - adiciona ao Firefox menu e barra de ferramentas voltados para análise de página. Permite que o desenvolvedor ative/desative elementos da página, destaque propriedades de html, faça a validação rápida de documentos, editar css (adicionar css personalizado também), visualizar cada imagem que a página contém e uma infinidade de coisas;
• Firebug - a minha preferida. Tem várias funções idênticas à Web Developer, mas uma que é espetacular: debug de javascript. É também mais rápido para identificar trechos de códigos referentes a blocos na página. Vocêpode inclusive fazer alteração no css e no xhtml e ver o resultado em tempo real na página;
• IE Tab - permite que você abra uma janela do Internet Explorer em uma aba do Firefox. Na hora de ficar comparando o que ficou de diferente com a página no Firefox e no IE, é só abrir uma nova aba e ficar com as duas lado a lado, sem a necessidade de abrir o IE (um pequeno passo para um mundo perfeito!);
• Fire FTP - tão completo que pode substituir qualquer programa de FTP desktop existente (falo sério!). Geralmente uso o FTP do Dreamweaver, mas para dar permissões de arquivos, ou enviar arquivos rapidamente, nenhum melhor do que esta extensão.

Essa são as que eu uso com mais frequência, e minhas preferidas também. Para encontrar mais vá para o diretório de extensões do Firefox - Desenvolvimento Web.

Primeiro, a tag que mostra o link para as páginas. Vamos exibi-lá sem mostrar um título para ela, como “Páginas”. Vamos deixar só a lista de páginas mesmo:<ul>
<?php wp_list_pages('title_li='); ?>
</ul>

Pronto, temos a nossa lista de páginas em uma lista não ordenada. Ou seja, cada link virá entre as tags <li> e </li>.

Agora, um css para editar cada um desses links:

ul li a.page_item { padding:10px; margin:0 15px 0 0; }

ul li a:hover.page_item { padding:10px; margin:0 15px 0 0; background-color:#CECECE; }

Não se esqueça:TODOS essas propriedades são opções; altere O QUE VOCÊ quiser.

Explicando: eu fiz bem geral. Você pode aplicar IDs nessa propriedades para que elas fiquem restritas somente ao menu de páginas, por exemplo, usando uma div id=”menu”, e adiciona #menu antes de cada uma dessas propriedades.

Eu coloquei a class “page_item” para esses itens do menu. Isso porque, quando o Wordpress forma o html do link das páginas, a estrutura é semelhante a isso (pode conferir):

<li class="page_item current_page_item"> [a página atual] </li>
<li class="page_item"> [outra página] </li>

Então, para fazermos uma diferenciação entre a página que está sendo exibido e os demais links, adicione uma classe “current_page_item” ao css:

ul li a.current_page_item { padding:10px; margin:0 15px 0 0; border:solid 1px #CECECE; }

Novamente, mude o que preferir.

Be happy ;^)

P.S.: Não esqueci da série sobre criação de temas. Ainda essa semana, o quarto capítulo!