[NOVO] O WP Media Cleanup elimina imagens não utilizadas escondidas na sua biblioteca multimédia
Joella Dunn
Joella Dunn
John Turner
John Turner
Já alguma vez olhou para o seu site WordPress e pensou: "Está quase perfeito, mas aquele botão tem o tom de azul errado" ou "Gostava de poder aumentar um pouco o tamanho do texto"?
Os temas do WordPress vêm com opções de personalização, mas por vezes não cobrem tudo o que pode querer alterar.
É aí que entra o CSS - é como ter uma varinha mágica que lhe permite ajustar o aspeto do seu site exatamente como pretende.
Neste guia, vou mostrar-lhe o que é CSS, como adicionar os seus próprios estilos personalizados e alguns exemplos práticos para começar.
No final, sentir-se-á mais à vontade para fazer os ajustes visuais que levam o seu site de "quase lá" para "exatamente certo".
Pense no seu sítio Web WordPress como uma casa. O código HTML forma a estrutura - as paredes, as divisões e os alicerces. CSS (Cascading Style Sheets) são todos os elementos de design de interiores: as cores da pintura, a disposição dos móveis, a iluminação e os toques decorativos.
As CSS indicam ao seu browser como apresentar o conteúdo da sua página. Quer que todo o texto do seu parágrafo seja azul? As CSS podem fazer isso.
Precisa de mais espaço entre o título e o parágrafo abaixo dele? As CSS também tratam disso.
A estrutura básica das CSS segue este padrão:
selector { property: value; }
O seletor visa elementos específicos na sua página e os pares propriedade-valor definem o aspeto que esses elementos devem ter.
Por exemplo:
p { color: blue; }
Esta simples linha diz ao browser para mostrar todo o texto do parágrafo a azul. É tudo o que há para fazer!
Embora simples no conceito, o CSS torna-se poderoso quando se começa a combinar diferentes selectores e propriedades para criar regras de estilo precisas para o seu site.
O CSS no WordPress não está apenas num lugar - está disposto em camadas em todo o site, e é por isso que é chamado de "cascata". Compreender esta hierarquia ajuda-o a saber onde fazer alterações.
O ficheiro style.css do seu tema é a base. Contém todas as regras de estilo básicas que dão ao seu tema o seu aspeto caraterístico. Pense nele como o pacote padrão de design de interiores.
O Personalizador do WordPress oferece uma secção dedicada "CSS adicional" onde pode adicionar os seus próprios estilos em segurança. Estes substituem as predefinições do tema e sobrevivem às actualizações do tema.
Se estiver a fazer alterações substanciais, um tema filho é a sua melhor aposta. O seu ficheiro style.css herda tudo do tema principal, mas os estilos que adicionar têm precedência.
Alguns plugins trazem o seu próprio CSS para estilizar as suas caraterísticas específicas. Normalmente, estas são carregadas depois dos estilos do tema.
O Editor de Blocos (Gutenberg) e o Editor de Sítio Completo introduzem novas formas de adicionar CSS, permitindo-lhe estilizar blocos ou secções específicas sem afetar todo o sítio.
Ocasionalmente, verá CSS em linha - estilos aplicados diretamente a elementos HTML utilizando o atributo style. Esta abordagem é geralmente desaconselhada para a criação de estilos em todo o sítio, porque é mais difícil de manter.
Compreender esta cascata é importante porque, quando os estilos entram em conflito, o CSS mais específico ou de carregamento posterior ganha. É por isso que pode substituir o estilo do seu tema por CSS personalizadas.
Aprender CSS dá-lhe um controlo que as opções do tema, por si só, não podem proporcionar.
Muitos utilizadores do WordPress sentem-se frustrados quando não conseguem alterar algo no aspeto do seu site. O seletor de cores não tem a tonalidade certa. O espaçamento entre elementos não parece correto. O tamanho da letra precisa de ser um pouco maior.
Mesmo com conhecimentos básicos de CSS, é possível efetuar estes ajustes precisos.
O CSS permite-lhe tornar o seu site verdadeiramente único. Sem ele, está limitado a quaisquer opções de personalização que o programador do tema tenha pensado em incluir. Com CSS, pode libertar-se dessas restrições.
Quando surgem falhas visuais (e vão surgir), compreender o CSS ajuda-o a corrigi-las rapidamente. Talvez uma atualização de plug-in tenha causado a sobreposição de algum texto ou uma atualização de tema tenha alterado o estilo do botão. Algumas linhas de CSS podem muitas vezes resolver estes problemas imediatamente.
Mais importante ainda, aprender CSS cria uma base para entender como os temas do WordPress funcionam. Depois de perceber como o CSS controla o aspeto, compreenderá melhor porque é que as coisas têm o aspeto que têm - tornando a resolução de problemas muito mais rápida.
Existem muitos recursos acessíveis disponíveis para aprender CSS, muitos deles gratuitos.
O Mozilla Developer Network (MDN) Web Docs é um ótimo recurso para tecnologias Web, incluindo CSS. Os seus tutoriais dividem os conceitos em partes digeríveis com exemplos práticos.
A W3Schools oferece lições de CSS para principiantes com exemplos interactivos onde pode testar o código diretamente no seu browser. Esta abordagem prática torna a aprendizagem menos abstrata.
O YouTube está repleto de tutoriais específicos para CSS do WordPress. Ver alguém a fazer as alterações em tempo real pode ajudar os conceitos a serem mais claros quando as explicações em texto não são suficientes.
Muitas plataformas de cursos como Coursera e Udemy oferecem cursos de CSS gratuitos (ou muito acessíveis). Alguns centram-se especificamente no WordPress, mostrando-lhe exatamente como direcionar elementos temáticos.
A aprendizagem mais eficaz acontece quando se pratica efetivamente. Configure um sítio de teste (não faça experiências no seu sítio ativo!) e tente fazer pequenas alterações. Veja o que acontece quando ajusta propriedades como cores, margens ou tamanhos de letra.
Lembre-se de que não precisa de memorizar todas as propriedades CSS. Até mesmo os programadores profissionais consultam regularmente as propriedades. O que importa é compreender os conceitos fundamentais.
O WordPress oferece várias maneiras de adicionar CSS personalizado. Cada uma tem as suas vantagens, dependendo das suas necessidades e do seu nível de conforto.
O Personalizador do WordPress é o local mais seguro para adicionar facilmente CSS ao WordPress.
Navegue até Aparência " Personalizar " CSS adicional no seu painel de controlo do WordPress.
Verá um editor de código onde pode escrever ou colar o seu CSS.
Pode pré-visualizar as suas alterações em tempo real antes de as publicar. Se algo não parecer correto, ajuste o seu código e veja imediatamente os resultados.
O Customizer é perfeito para pequenas e médias quantidades de CSS. Se estiver a adicionar centenas de linhas de código, talvez seja melhor considerar um dos outros métodos.
WPCode (anteriormente Insert Headers and Footers) é um popular plugin de snippets de código. Proporciona uma forma mais organizada de gerir o seu CSS personalizado.
Depois de instalar o plugin, navegue até Code Snippets " Add Snippet. Passe o mouse sobre Adicionar seu código personalizado e clique em Adicionar snippet personalizado.
Escolha CSS Snippet como o tipo de código, dê-lhe um nome descritivo e adicione o seu código CSS.
O WPCode oferece várias vantagens em relação ao Customizer. Pode criar vários fragmentos de CSS, o que os torna mais fáceis de gerir do que um grande bloco de código.
Também pode controlar com precisão onde e quando os snippets são executados. Precisa de CSS que se aplique apenas aos posts do seu blogue? O WPCode pode lidar com esse carregamento condicional.
O plugin inclui funcionalidades de prevenção de erros que ajudam a detetar erros de sintaxe antes que estes afectem o seu site ativo - uma rede de segurança útil quando está a aprender.
Se estiver a utilizar um tema de blocos, tem acesso ao Editor de site completo em vez do Personalizador. No entanto, ainda pode adicionar CSS personalizado ao seu site.
Navegue até este URL, ajustando-o com o domínio do seu sítio: https://example.com/wp-admin/customize.php
Isso abrirá uma versão limitada do FSE. Verá que tem uma secção CSS adicional, tal como o Customizer.
Para personalizações extensas, poderá ser necessário editar diretamente o CSS nos ficheiros de tema do WordPress.
No seu painel de controlo, pode ir a Appearance " Theme File Editore editar o ficheiro style.css.
No entanto, isso vem com um aviso importante: Não recomendo a modificação direta dos ficheiros de um tema principal.
Em vez disso, crie um tema secundário. Um tema secundário herda toda a funcionalidade e estilo do tema principal, permitindo-lhe fazer alterações com segurança que não serão substituídas durante as actualizações.
Depois de ter um tema filho ativado, pode editar os ficheiros CSS no seu editor de ficheiros de temas do WordPress. Também pode aceder aos ficheiros do seu tema utilizando o FTP ou o gestor de ficheiros do seu fornecedor de alojamento.
Vamos ver alguns exemplos práticos de CSS personalizado simples que resolvem necessidades comuns de personalização do WordPress.
Quer dar mais destaque aos seus blocos de citação? Pode seleccioná-los com CSS:
.wp-block-quote {
background-color: #f9f9f9;
border-left: 4px solid #0073aa;
padding: 20px;
}Isto dá aos blocos de citação um fundo cinzento claro, um rebordo esquerdo azul e algum preenchimento para dar espaço para respirar.
Talvez os widgets da barra lateral precisem de alguma separação visual. Pode adicionar espaço e margens entre eles:
.widget {
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 1px solid #eaeaea;
}Cada widget terá agora mais espaço por baixo e uma linha divisória subtil.
Os menus de navegação necessitam frequentemente de ajustes de estilo para corresponderem ao design do seu sítio:
.main-navigation li a {
color: #333333;
font-weight: 500;
text-transform: uppercase;
}
.main-navigation li a:hover {
color: #0073aa;
}Isto torna as ligações de menu cinzentas escuras, ligeiramente a negrito, em maiúsculas e azuis quando se passa o rato por cima.
A tipografia tem um enorme impacto na personalidade do seu site. Eis um exemplo de como pode personalizar os tipos de letra com CSS:
body {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
line-height: 1.6;
}
h1, h2, h3 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}Lembre-se de que, se estiver a utilizar tipos de letra não padrão, terá de os importar primeiro utilizando @font-face ou ligando ao Google Fonts.
Alterar as cores é uma das tarefas CSS mais comuns. Estas poucas linhas alteram o fundo do seu site para cinzento claro e tornam as ligações cor-de-rosa com uma tonalidade mais escura quando se passa o rato por cima:
body {
background-color: #f5f5f5;
}
a {
color: #e94c89;
}
a:hover {
color: #c13872;
}O espaço à volta e dentro dos elementos (margem e preenchimento) afecta significativamente a legibilidade. Isto adiciona espaço por baixo dos parágrafos e cria um preenchimento à volta da área de conteúdo principal:
.entry-content p {
margin-bottom: 20px;
}
.site-content {
padding: 40px 20px;
}Os formulários precisam muitas vezes de ajuda de estilo para corresponder ao design do seu sítio. Estes estilos criam campos de formulário limpos com um botão de submissão que se destaca:
input[type="text"],
input[type="email"],
textarea {
border: 1px solid #ddd;
padding: 10px;
border-radius: 4px;
}
input[type="submit"] {
background-color: #0073aa;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
}Mesmo os programadores experientes deparam-se com problemas de CSS. Aqui estão alguns problemas comuns e como resolvê-los.
Adicionou novas CSS, mas o seu site tem exatamente o mesmo aspeto. Antes de entrar em pânico, isso geralmente é apenas o cache do navegador.
Os browsers guardam ficheiros CSS (cache) para carregar os sites mais rapidamente. Isto significa que podem estar a mostrar-lhe CSS antigas em vez das suas novas alterações.
Tente fazer uma atualização forçada premindo Ctrl+F5 (Windows) ou Cmd+Shift+R (Mac). Isto força o seu browser a obter cópias novas de todos os ficheiros em vez de utilizar versões em cache.
Se utilizar um plug-in de cache como o WP Super Cache ou o W3 Total Cache, também terá de limpar essa cache quando efetuar alterações de CSS.
Procure um botão Limpar cache nas definições do seu plug-in de cache.
Até limpar esta cache, as suas alterações poderão ser visíveis apenas para si (quando tem sessão iniciada), mas não para os visitantes regulares.
Quando o seu CSS não está a funcionar, o problema reside frequentemente no seletor - está a apontar para o elemento errado.
As CSS seguem uma hierarquia de especificidade. Os selectores mais específicos substituem os gerais. Por exemplo, #sidebar p (um ID mais um elemento) substituirá os estilos definidos apenas para p (um elemento).
Os erros ortográficos são fáceis de perder. Foi .sidebar ou .side-bar? Um hífen faz toda a diferença.
As ferramentas de desenvolvimento do seu browser são muito úteis para a resolução de problemas. Clique com o botão direito do rato no elemento que está a tentar estilizar e selecione Inspecionar. Verá todos os estilos atualmente aplicados e quais os que estão a ser substituídos.
O !important força a aplicação de um estilo, independentemente da especificidade:
p { color: blue !important; }
Embora tentador quando se está frustrado, o !important cria dores de cabeça a longo prazo. Quebra a cascata natural das CSS e leva a "guerras de especificidade" em que acaba por precisar de várias declarações !important.
Em vez disso, torne os seus selectores mais específicos. Se .content p não estiver a funcionar, tente .content .entry-content p para ser mais exato.
O seu sítio Web tem de ter bom aspeto em todo o lado. O que funciona no seu computador portátil pode não funcionar nos ecrãs móveis.
Utilize as ferramentas de desenvolvimento do seu browser para simular diferentes tamanhos de ecrã. No Chrome, clique com o botão direito do rato, selecione Inspecionar e procure o ícone de alternância de dispositivo.
Antes de efetuar alterações ao CSS, especialmente as mais extensas, faça uma cópia de segurança do seu site. Isto não é apenas um bom conselho - é uma proteção crucial.
Ferramentas como o Duplicator tornam as cópias de segurança simples. Basta criar uma nova cópia de segurança e selecionar a predefinição Site completo.
Para proteção extra contra erros específicos do site, envio sempre cópias de segurança para a nuvem. Quando estiver a criar a cópia de segurança, escolha uma das muitas integrações de armazenamento na nuvem.
Ter esta rede de segurança significa que pode experimentar mais livremente, sabendo que pode restaurar tudo se algo correr mal.
Uma cópia de segurança de cinco minutos pode poupar-lhe horas de resolução de problemas. Se detetar um erro de CSS, aceda a esta cópia de segurança e prima Restaurar.
Mesmo que a sua cópia de segurança esteja na nuvem, o Duplicator descarrega-a e restaura-a. Será como se o erro nunca tivesse acontecido!
O CSS vem incorporado no seu tema do WordPress. Pode adicionar o seu próprio CSS personalizado através do Personalizador(Aparência " Personalizar " CSS adicional), com um plug-in de código do WordPress, como o WPCode, ou criando um tema filho e editando o respetivo ficheiro style.css.
O WordPress utiliza ambos. O HTML cria a estrutura das suas páginas e mensagens, enquanto o CSS controla o aspeto dessa estrutura. O WordPress gera o HTML automaticamente com base no seu conteúdo, e o seu tema fornece o CSS que o estiliza.
Eis alguns exemplos simples de CSS personalizado do WordPress:
p { font-size: 18px; }.button { background-color: #ff6b6b; }.wp-block-image { margin-bottom: 30px; }.element-to-hide { display: none; }.special-text { font-weight: 700; }Não precisa de aprender CSS se estiver satisfeito com as opções incorporadas do seu tema. No entanto, aprender até mesmo CSS básico dá-lhe muito mais controlo sobre o aspeto do seu site e a capacidade de corrigir problemas visuais sem esperar por actualizações de temas ou pagar a um programador.
Sim, o CSS é uma das principais tecnologias utilizadas por todos os programadores Web front-end, juntamente com o HTML e o JavaScript. É uma competência essencial para quem constrói sítios Web profissionalmente.
O CSS não é um código misterioso que apenas os programadores profissionais conseguem compreender. É uma ferramenta prática que lhe dá um controlo preciso sobre o aspeto do seu site WordPress.
Começar com pouco é a chave - mudar uma cor aqui, ajustar algum espaçamento ali. À medida que se sentir mais confortável, será capaz de efetuar ajustes mais complexos.
Lembre-se que todos os programadores WordPress profissionais começaram exatamente onde você está agora. Aprenderam experimentando, cometendo erros e desenvolvendo gradualmente as suas competências.
Ao começar, mantenha uma cópia de segurança à mão com o Duplicator. Reverte os erros com um clique, por isso, se algo não funcionar, pode sempre reverter as alterações e tentar novamente.
Já que está aqui, acho que vai gostar destes outros guias do WordPress:
Divulgação: O nosso conteúdo é apoiado pelos leitores. Isto significa que, se clicar em algumas das nossas hiperligações, podemos ganhar uma comissão. Apenas recomendamos produtos que acreditamos que acrescentam valor aos nossos leitores.
