Como estilizar imagens em seu site WordPress com CSS

Tenho certeza que você já tem uma ideia de como as imagens são importantes para o sucesso do seu site.

Mas quando se trata de aumentar o engajamento (e, finalmente, seu resultado final), não se trata apenas de incluir imagens em seu site, mas de quais imagens você inclui e como as apresenta.

Neste post, quero abordar uma peça importante desse quebra-cabeça: a apresentação.

O WordPress vem pré-empacotado com meios simples de estilizar imagens com CSS. Você tem o poder de criar efeitos diferentes para as várias classes CSS que o WordPress atribui automaticamente às imagens do seu site. (Se parece que comecei a falar em uma língua estrangeira, não se preocupe, explicarei tudo em detalhes mais adiante no artigo.)

Vou começar investigando as razões pelas quais as imagens são tão importantes para o seu site, depois passar para as classes CSS padrão que o WordPress aplica às imagens e, finalmente, demonstrar como você pode usar CSS para aplicar estilos personalizados às suas imagens .

• Por que as imagens são tão importantes para sites
• Um curso intensivo de CSS do WordPress
• Como adicionar CSS personalizado ao WordPress
• As classes de imagem CSS padrão do WordPress
• Estilo de imagem simples com WordPress
• Mais exemplos do que você pode fazer com CSS de imagem no WordPress
• E os estilos existentes?
• O céu é o limite

Por que as imagens são tão importantes para sites

Que melhor maneira de explicar como as imagens são benéficas para os blogs do que provar isso com uma imagem?

As coisas ficam ainda mais interessantes quando você se aprofunda na biologia de como processamos as informações. Considere, por exemplo, que 90% das informações transmitidas ao cérebro são visuais e 40% das pessoas respondem melhor às informações visuais do que ao texto simples (fonte: Zabisco).

Mas vamos ser honestos: eu não preciso jogar estatísticas em você para mostrar meu ponto de vista. Você sabe por seus próprios hábitos que sites e blogs visualmente atraentes são muito mais propensos a chamar sua atenção do que uma massa de texto. As imagens adicionam cor, apelo e intriga. Eles disparam um monte de reações em nosso cérebro antes mesmo de termos a chance de começar a ler.

Simplificando, se você não incluir imagens atraentes e relevantes em suas postagens de blog, você não está nem perto de aproveitar ao máximo seu conteúdo. Fazer um esforço extra quando se trata de incluir imagens nas postagens do seu blog e apresentá-las bem pode fazer toda a diferença no engajamento, tráfego e vendas.

Um curso intensivo de CSS do WordPress

Os desenvolvedores do núcleo do WordPress estão muito cientes da importância das imagens para sites, e é por isso que eles oferecem aos desenvolvedores de temas (e aprimoradores de temas) muito poder e flexibilidade para determinar como as imagens são apresentadas.

Esse poder e flexibilidade são oferecidos na forma de várias classes CSS. Mas antes de prosseguirmos, vamos dar um tempo para entender o que é CSS e como você pode usá-lo.

CSS significa Cascading Style Sheets: uma linguagem de marcação que é usada para determinar a aparência das páginas da web. CSS é combinado com HTML (Hyper Text Markup Language), que é a linguagem de marcação usada para definir a estrutura semântica de um site. Se isso não faz muito sentido para você, não se preocupe – são mais informações complementares do que o necessário.

CSS é uma linguagem simples, uma vez que você entenda isso. Em termos de poder alterar a aparência e o posicionamento das imagens, você poderá pegar e trabalhar com o código que incluí neste artigo com relativa facilidade.

Aqui está um exemplo de um trecho de código CSS referente à aparência de um tipo de imagem específico no WordPress:

 .alignright {
	borda: 1px sólido #c5c5c5;
	flutuar: direita;
	margem: 0 0 10px 10px;
	preenchimento: 3px;
}

O texto .alignright é uma classe CSS (identificável como uma classe pelo ponto que precede seu nome). Nesse caso, .alignright é uma classe que o WordPress atribui a qualquer imagem selecionada no backend do WordPress para ser alinhada à direita do conteúdo:

Várias declarações (como border e padding ) podem ser aplicadas a uma classe CSS, que são aplicadas a qualquer elemento HTML ao qual a classe em questão foi atribuída.

No exemplo acima, qualquer imagem no WordPress que tenha sido alinhada à direita (através do editor de texto) terá a classe .alignright atribuída a ela e, portanto, herdará o estilo aplicado a essa classe. A imagem 'flutuará' para a direita, terá uma pequena margem para impedir que o texto entre nela, uma borda cinza ao redor e um pequeno preenchimento para separar a borda da borda da imagem.

Isso tudo fará muito mais sentido com uma representação visual:

Existem muitas outras declarações que podem ser adicionadas a uma classe CSS; vamos nos divertir com eles em breve.

Como adicionar CSS personalizado ao WordPress

Os temas do WordPress vêm com suas próprias 'folhas de estilo' CSS, que são arquivos preenchidos com marcação CSS como no exemplo acima. Embora existam muitas maneiras de adicionar seu próprio CSS personalizado ao seu site, editar a folha de estilo CSS de um tema existente não é o caminho a seguir. Seu trabalho duro pode ser substituído na próxima vez que o tema for atualizado.

O método mais limpo e à prova de futuro é criar seu próprio “tema filho” simples do WordPress com sua própria folha de estilo CSS. A folha de estilo CSS no diretório do seu tema filho substituirá qualquer estilo correspondente na folha de estilo do tema “pai”.

Criar um tema filho pode parecer um exercício um pouco assustador, mas é bastante fácil se você estiver familiarizado com FTP. Se você quiser seguir esse caminho, confira o tutorial sobre o WordPress Codex.

Se você está procurando algo mais simples, tenho duas sugestões de plugins:

1. O módulo CSS personalizado no Jetpack: Ideal se você já usa o Jetpack em seu site.
2. CSS personalizado simples: Se você ainda não usa o Jetpack (e não precisa de sua funcionalidade variada), esta é uma opção mais leve.

Qualquer que seja a opção escolhida, adicionar CSS personalizado ao WordPress será tão simples quanto editar o arquivo CSS personalizado que foi gerado (por você ou por um dos plugins).

As classes de imagem CSS padrão do WordPress

Com tudo isso fora do caminho, vamos ao que interessa: classes CSS de imagem padrão do WordPress.

Existem quatro classes padrão que você pode usar para alterar a aparência das imagens no WordPress:

• .aligncenter
• .alignleft
• .alignright
• .alignnone

Tenho certeza que você pode descobrir a que tipos de imagens essas classes são atribuídas.

Cada imagem que você adicionar ao seu site por meio do editor de texto TinyMCE nas telas de postagem/página terá uma dessas classes atribuídas a ela, o que significa que você tem o poder de estilizar todas essas imagens como achar melhor.

Para estilizar um tipo de imagem específico, tudo o que você precisa fazer é seguir o formato que você já viu no exemplo acima:

 .nome da classe {
	valor da propriedade;
	valor da propriedade;
	valor da propriedade;
}

Importante: Quando uma imagem tem uma legenda, o WordPress atribui uma das classes acima a uma div que envolve a imagem, em vez da própria imagem. Lidar com esse problema específico está fora do escopo deste post, mas é algo a ter em mente ao experimentar. Eu recomendo que você teste seus efeitos escolhidos com imagens legendadas para ver como as coisas ficam.

Com isso dito, vamos para a parte divertida: estilizar suas imagens!

Estilo de imagem simples com WordPress

Quando se trata de adicionar efeitos estilísticos simples às suas imagens no WordPress, existem cinco propriedades CSS comuns:

1. background
2. border
3. float
4. margin
5. padding

Para obter uma compreensão completa de como essas propriedades afetam a aparência de uma imagem (ou mais precisamente, a aparência do 'quadro' no qual a imagem é colocada), precisamos considerar o 'modelo de caixa' CSS:

Quando se trata de estilizar imagens, a imagem em si é o “conteúdo”. Essa imagem é então cercada por preenchimento, bordas e margens; tudo o que você pode definir. As imagens também podem ser 'flutuadas', o que para os propósitos deste tutorial significa simplesmente alinhado. Suas opções de 'float' são esquerda, direita e nenhuma. (Centralizar uma imagem é um pouco mais complicado; falaremos sobre isso em breve.)

Vamos considerar um exemplo simples para demonstrar como essas propriedades podem ser usadas. Primeiro, aqui está uma imagem com a classe .alignright atribuída a ela, sem qualquer marcação CSS:

Agora vamos adicionar uma marcação CSS simples:

 .alignright {
	fundo: cinza;
	borda: preto sólido de 3px;
	flutuar: direita;
	margem: 10px;
	preenchimento: 3px;
}

Aqui está o efeito final:

Você provavelmente pode decifrar o que fizemos aqui. A imagem agora foi “flutuada” (ou seja, alinhada) para a direita, para que o texto a envolva. Adicionamos um pouco de preenchimento, que recebeu um fundo cinza. Aplicamos uma borda preta grossa que aparece ao redor do preenchimento. Finalmente, uma margem de 10px cria algum espaço entre a imagem e o texto.

Há muito que você pode fazer apenas com os cinco seletores acima. Se você quiser explorá-los ainda mais, aqui está um recurso abrangente para cada um:

• background
• border
• float
• margin
• padding

Prometi uma solução para centralizar as imagens também. Por motivos que estão além do escopo deste tutorial, o CSS não permite simplesmente usar float: center; (ou seja, o valor não existe). Em vez disso, você deve definir a imagem como um elemento de bloco , aplicar margin: 0 auto; e defina uma largura para a imagem. Você pode ler mais sobre essa técnica aqui. (Também fornecerei um exemplo da marcação usada para criar uma imagem centralizada abaixo.)

Mais exemplos do que você pode fazer com CSS de imagem no WordPress

Agora que você tem uma melhor compreensão das propriedades CSS mais comuns que você pode usar, aqui estão alguns exemplos para se inspirar.

Vamos começar com algum preenchimento e um fundo cinza para dar um quadro às nossas imagens:

 .alinhar à esquerda {
	fundo: #dbdbdb;
	flutuar: esquerda;
	margem: 0 10px 5px 0;
	preenchimento: 5px;
}

Essa marcação resulta nisso:

Vamos explorar o que aconteceu aqui:

• Eu usei uma cor hexadecimal HTML para o plano de fundo. Esses códigos de cores oferecem flexibilidade praticamente ilimitada na escolha de cores para o seu site.
• Como a imagem que usei é um PNG transparente, a cor de background preencheu todo o espaço disponível não utilizado no arquivo de imagem.
• Eu usei quatro valores dentro da propriedade margin para definir margens diferentes para cada lado da imagem.

Vamos tentar outra coisa. Em vez de dar uma cor de fundo às nossas imagens, vamos defini-las em uma borda simples para delimitá-las do conteúdo. Aqui está a marcação:

 .alignright {
	borda: 1px sólido #000099;
	flutuar: direita;
	margem: 0 0 10px 10px;
	preenchimento: 3px;
}

Como você pode ver, brincamos com os valores da propriedade margin para levar em conta o alinhamento da imagem, reduzimos o preenchimento e adicionamos uma borda sólida de 1px. Aqui está o resultado final:

Finalmente, vamos criar uma imagem centralizada e dar a ela uma borda cinza grossa. Aqui está a marcação:

 .aligncenter {
	borda: 5px sólido #dbdbdb;
	exibição: bloco;
	margem: 0 automático;
	largura: 300px;
}

E o resultado final:

Como você pode ver, é possível alterar completamente o posicionamento e a aparência de uma imagem no WordPress usando apenas CSS.

Na realidade, apenas arranhamos a superfície aqui; há muito mais que você pode fazer. (Se você estiver interessado em descobrir mais, eu forneci alguns recursos úteis para aprender mais abaixo.)

E os estilos existentes?

Se você estiver usando um tema WordPress de qualidade real, o desenvolvedor já terá adicionado estilos a cada uma das classes de imagem padrão do WordPress. No mínimo, ela terá alinhado cada classe de imagem adequadamente.

Além disso, suas escolhas terão sido inteiramente subjetivas, e agora você tem o poder de substituir seus efeitos de estilo. Qualquer marcação CSS que você inserir – seja na folha de estilo do seu tema filho ou por meio de um plug-in – terá precedência sobre o CSS padrão do tema. Você está no controle.

O céu é o limite

Ao ler este artigo, também espero que você se inspire a experimentar seus próprios estilos CSS personalizados. Eu não queria me aprofundar muito em seletores mais avançados neste tutorial, mas há muito mais que você pode fazer com CSS do que eu abordei aqui.

Se você deseja explorar efeitos mais avançados (como sombras, arredondamento e rotação), há um grande número de recursos on-line gratuitos que podem ensinar mais sobre CSS. Minhas recomendações pessoais são:

• Mozilla Developer Network: Adorado entre a comunidade de desenvolvedores web.
• W3 Schools: Odiado por muitos desenvolvedores web “sérios”, mas não há como refutar sua profundidade e amplitude de informações. Apenas tenha em mente que nem sempre pode estar 100% correto e/ou atualizado.
• WordPress Codex: Saiba mais sobre como WordPress e CSS se unem.

Se você tiver alguma dúvida, não hesite em disparar na seção de comentários abaixo!

Crédito da foto: Simon Pow, PicJumbo.

• CSS
• imagens