Quer tentar editar o WordPress CSS, mas não tem idéia por onde começar? Com o estilo CSS, você pode editar a aparência de seu site globalmente ou em determinadas páginas. Acrescente cores, dê espaço a certos elementos, crie um layout e, basicamente, mude exatamente a aparência de qualquer coisa em seu tema WordPress.
Se você quiser se familiarizar mais com o ambiente de desenvolvimento do WordPress, ou apenas ter um melhor controle sobre a aparência de seu website, você precisará saber como adicionar CSS no WordPress (mais como mudar o que já está lá).
Ao editar seu tema e incluir seu próprio CSS adicional, você será capaz de otimizar cada elemento visual em seu site. Hoje, vamos dar uma olhada mais de perto.
Pronto para começar? Vamos fazer isso!
O que é Edição do CSS?
CSS significa Cascading Style Sheets e é a linguagem web mais popular, além do HTML. As duas andam de mãos dadas, pois o CSS é usado para estilizar elementos HTML. O HTML estabelece a base da aparência de um website e o CSS é usado para dar-lhe um estilo ainda maior.
O CSS lhe dá a capacidade de fazer um website responder, adicionar cores, mudar fontes, modificar o layout e, em geral, afinar a apresentação visual de um website. Como HTML e JavaScript, CSS é uma linguagem frontend do lado do cliente, o que significa que ele executa no lado do usuário, em vez de no servidor backend.
Ao mergulhar no desenvolvimento do WordPress, HTML, CSS, JavaScript e PHP são as linguagens que você precisará conhecer. Isto é o que o CMS principal é construído, assim como seus muitos temas e plugins.
Mas mesmo que você não seja um web designer ou desenvolvedor, é bom pegar um pouco de CSS, pois você pode usá-lo para mover ou estilizar elementos em seu website, ou fazer pequenas mudanças estéticas em seu tema para melhor se adequar a você.
WordPress e CSS
Dentro do WordPress, o CSS é um pouco diferente. É controlado por temas, que são compostos por arquivos de modelos, tags de modelos e, é claro, pela folha de estilo do CSS. Embora gerado por seu tema, todos eles são editáveis por você.
Os arquivos modelo dividem partes de seu website em seções (como header.php ou archive.php), e as tags modelo são usadas para chamá-los e outros conteúdos de seu banco de dados. Estes arquivos são na verdade compostos principalmente de PHP e HTML, embora você possa adicionar CSS se necessário.
O que você realmente está procurando é a folha de estilo, ou style.css. Para mudar a aparência de seu site, você precisará aprender como adicionar e editar o código neste arquivo.
Como Personalizar seu Tema WordPress com CSS
Se você quiser personalizar seu tema e mudar a aparência de seu site com CSS, você precisará adicionar seu próprio código ou editar o que já está lá. Há maneiras de adicionar CSS sem nunca tocar em nenhum arquivo temático, mas para mudar o código temático existente, você terá que acessar a folha de estilo do seu site.
Ao fazer estas mudanças, há uma coisa que você deve saber: quando seu tema for atualizado, qualquer edição feita em style.css, functions.php, ou outros arquivos de modelos de temas será apagada. Em geral, você não deve fazer mudanças diretas em seu site no editor sem usar um child theme.
A folha de estilo é como uma “lista de instruções” para seu website, definindo exatamente como ela é estilizada e como o código CSS é tratado. É aqui que você fará a maior parte de sua edição, mas também lhe mostraremos como acessar outros arquivos de modelos temáticos, tais como header.php e footer.php.
Há duas maneiras de acessar a folha de estilo de seu site WordPress: através do painel de controle do WordPress ou através de um cliente FTP. Cobriremos os dois.
Não se sente confortável em fazer isso você mesmo? Considere contratar um desenvolvedor WordPress para lidar com essa etapa para você.
Editando o WordPress CSS no Painel de Controle
A maneira mais fácil e conveniente de acessar sua folha de estilo CSS é bem no painel do WordPress. Não há necessidade de instalar programas FTP ou editores de código. Você pode editar diretamente qualquer arquivo com destaque de sintaxe e documentação de função embutida.
Antes de fazer qualquer grande edição dos arquivos principais, você deve sempre fazer backup do seu site WordPress. É muito fácil cometer acidentalmente um erro que pode quebrar a aparência de seu site se você for novo no CSS, e pode ser difícil descobrir como reverter suas mudanças.
Uma vez que você tenha feito um backup e um child theme, faça o login em seu backend. Você pode encontrar o editor indo até o menu e clicando em Aparência > Editor Temático.
Você deve ver um popup advertindo-o contra fazer edições diretas nestes arquivos. Não se preocupe, basta clicar em “Eu entendo”. É apenas um aviso para usar um child theme e fazer backup de seu site antes de fazer qualquer mudança importante. Siga estas etapas e é seguro editar.
E agora você está dentro! Você deve estar na folha de estilo por padrão, mas olhe para o menu à direita para ver seus arquivos temáticos se não estiver.
Além de style.css, você também terá acesso a arquivos de modelos como functions.php, header.php, e single.php. Tudo isso afeta como certas páginas de seu site agem.
Mas você deve se familiarizar com PHP antes de mergulhar nestes arquivos em particular.
Basta lembrar: a maioria das mudanças do CSS que você fizer aqui serão globais. Por exemplo, se você mudar seu cabeçalho H1 para uma determinada fonte, isso terá efeito para cada página de seu site. Você precisará usar uma sintaxe especial para personalizar o estilo de páginas específicas.
Editar arquivos temáticos diretamente
E se você não puder acessar o Editor Temático ou preferir fazer seu trabalho em vez de FTP? É mais fácil usar o editor backend, mas alguns temas ou plugins podem desabilitá-lo. Se este for o caso, você precisará se conectar ao seu site através de FTP.
FTP, ou File Transfer Protocol, permite que você acesse e modifique remotamente os arquivos de um website. A primeira coisa que você precisa fazer é baixar o FileZilla ou qualquer outro cliente FTP.
Em seguida, você deve entrar em contato com seu host e pedir suas credenciais FTP (host, porto e nome de usuário/senha, se aplicável). Se seu anfitrião tiver um painel de controle, você poderá encontrá-lo acessando o site.
As credenciais dos usuários Kinsta estão localizadas no painel MyKinsta em Sites > SFTP/SSH.
Uma vez que você os tenha, lance seu cliente FTP e digite essas informações. Se não funcionar, tente colocar “sftp://” antes da URL na seção Host.
Uma vez dentro, você pode encontrar seu arquivo style.css clicando na pasta wp-content para abri-lo, depois na pasta de seu tema (como o tema Twenty Twenty), depois rolando até ver style.css.
Clique duas vezes para abri-lo (ou clique com o botão direito do mouse e selecione View/Edit) e faça suas modificações. Lembre-se de salvar e fazer o upload de volta ao servidor.
Se você precisar editar outros arquivos de modelos como home.php, single.php, archive.php, você pode encontrá-los na mesma pasta do style.css.
Nem sempre é necessário editar seus arquivos temáticos, seja através de FTP ou do painel de controle. Na verdade, é melhor evitar fazê-lo se você estiver apenas adicionando algum código extra.
Para pequenas adições, aqui está a melhor maneira de adicionar CSS ao seu site WordPress.
Como adicionar CSS personalizado no WordPress
Se você não estiver procurando editar o código CSS existente, e quiser apenas adicionar seu próprio estilo, é fortemente sugerido o uso de um dos seguintes métodos: Personalizador WordPress ou usando um plugin dedicado.
Para um, o código CSS adicionado através de um destes métodos é muito mais fácil de acessar e usar. Você não precisa se preocupar em colocar seu novo CSS no lugar errado ou esquecer onde você o adicionou se quiser fazer modificações mais tarde.
Além disso, o CSS adicionado através de um destes métodos não será perdido quando seu tema for atualizado (embora ainda possa desaparecer se você mudar de tema).
Isto significa que você não precisa usar um child theme, e se algo quebrar, tudo que você tem que fazer é remover o CSS que você acabou de adicionar.
Observe que você ainda deve manter um backup de seu website, já que algumas pessoas relataram ocasionalmente a perda de seu CSS durante grandes atualizações. Ainda assim, este método é muito mais confiável do que a edição direta de arquivos temáticos.
Embora você possa simplesmente adicionar código ao style.css e chamá-lo de um dia, se você não quiser criar um child theme, fazer grandes edições ao CSS existente em seu tema, e potencialmente acabar com todo seu trabalho apagado, é melhor usar a opção CSS adicional no personalizador WordPress ou instalar um plugin.
1. Edição de CSS através do WordPress Customizer
Em vez de usar o Editor Temático, tente isto. Entre em seu backend WordPress e clique em Appearance > Customize para abrir a tela de personalização do tema. Você verá uma visualização ao vivo de seu site, com opções à esquerda para personalizar elementos como as cores, menus ou outros widgets.
Na parte inferior deste menu, você deve encontrar a caixa CSS adicional.
Clique para abrir. Você será levado a uma nova tela com uma caixa de entrada de código e algumas instruções. A tela CSS adicional inclui destaque de sintaxe, assim como o Editor de Tema, juntamente com validação que permite saber se seu código está errado.
Qualquer código que você escreve aparece automaticamente na área de visualização à direita, a menos que tenha um erro (embora você possa optar por publicá-lo de qualquer forma).
Quando terminar de trabalhar, você pode publicar seu código, programar quando ele terá efeito, ou salvá-lo como um rascunho para trabalhar mais tarde. Você pode até obter um link de pré-visualização para compartilhar com outros.
Como você pode ver, a página CSS adicional é de muitas maneiras mais poderosa do que o Editor Temático, e muito mais adequada para adicionar código do que mexer com arquivos centrais.
O código CSS que você escreve aqui sobrescreve o estilo padrão de seu tema e não desaparece quando seu tema é atualizado. Se você não conseguir vê-lo “ao vivo” em sua visualização, verifique novamente se você está usando os seletores corretos em seu código CSS.
Assim como com o Editor Temático, o CSS é global por padrão, mas você pode escrever código que visa páginas específicas.
A única desvantagem é que, se você trocar de tema, qualquer coisa que você tenha escrito será apagada. Certifique-se de fazer um backup do seu CSS antes de mudar para um novo tema ou você pode acabar perdendo muito trabalho.
Se você estiver lutando para usar esta opção, ou se quiser uma solução que funcione através de temas e possa mais facilmente direcionar certas páginas, você deve tentar um plugin em seu lugar.
2. Adicionando CSS personalizado ao WordPress usando Plugins
Há algumas razões para você querer usar um plugin para adicionar CSS ao WordPress. Embora a função seja similar ao menu CSS Adicional, os estilos normalmente se manterão mesmo que você troque/atualize os temas.
Você também pode desfrutar mais da IU deles, ou gostar das características extras como auto-completamento. Alguns plugins até permitem que você construa CSS através de menus suspensos, em vez de ter que escrevê-lo você mesmo.
Simple Custom CSS
O Simple CSS Custom é o plugin de editor CSS mais popular, devido a sua facilidade de uso, interface mínima e backend leve. Em resumo, é um plugin WordPress muito pequeno que embala um grande soco.
A instalação é uma brisa e você não verá nenhum impacto negativo no desempenho. Ela funciona em qualquer tema e inclui destaque de sintaxe e verificação de erros.
Simple Custom CSS and JS
O Simple Custom CSS and JS são uma boa alternativa. Ele também permite direcionar o cabeçalho, rodapé, frontend ou mesmo o backend administrativo.
SiteOrigin CSS
SiteOrigin CSS é outra opção que também inclui um editor CSS tradicional. Você pode alternar entre ele e o editor visual a qualquer momento.
WP Add Custom CSS
Se você estiver lutando para adicionar CSS a páginas específicas, WP Add Custom CSS adiciona uma caixa CSS personalizada à tela de edição, e também vem com estilo global.
CSS Hero
Você também pode querer considerar a possibilidade de tentar um editor CSS visual. Estes pegam toda a codificação complicada e a transformam em uma série de campos de entrada e menus suspensos fáceis de usar que tratam de toda a programação para você.
CSS Hero é um plugin de edição visual premium com alguns recursos seriamente poderosos (animação, edições específicas de dispositivos e edição não destrutiva, para citar alguns).
Onde aprender o CSS
Pronto para mergulhar no CSS por si mesmo? Estes tutoriais para iniciantes estabelecerão o básico e lhe ensinarão a sintaxe que você precisará saber para escrever seu próprio código CSS funcional.
Pode ser assustador, mas a menos que você esteja tentando fazer algo realmente avançado, o CSS não é muito difícil! Coisas simples como mudar a cor de fundo ou definir o estilo da fonte são bastante fáceis, e há muitos exemplos online.
A maioria dos tutoriais de programação que você encontrará na Internet também são completamente gratuitos. Há muitas informações por aí com custo zero/baixo.
Aqui estão alguns exemplos que cobrem os melhores tutoriais de CSS para iniciantes.
- W3Schools CSS Tutorial: Há uma tonelada absoluta de informações a serem encontradas aqui: tutoriais detalhados, exemplos e referências para você trabalhar. Os tutoriais da W3Schools são tão simples e fáceis de seguir quanto possível, portanto, mesmo que você seja um iniciante total, este é um ótimo lugar para começar.
- Codeacademy Learn CSS: Através de seis lições práticas gratuitas, você aprenderá as noções básicas do CSS. Este não é um simples tutorial em vídeo, mas uma lição interativa que tem você trabalhando com código real. Com a versão pro, você também recebe questionários e projetos freeform para trabalhar.
- Aprenda o CSS em uma hora: Muitas pessoas querem aprender uma nova linguagem de programação, mas não têm tempo para se dedicar a isso. Mas se você pode reservar apenas uma hora, você pode aprender CSS com este curso gratuito de 20 partes. Mesmo que você não seja um mestre até o final, você deve ter um bom domínio do básico.
- Introdução ao HTML & CSS básico para usuários do WordPress: Procurando por algo específico para WordPress? Se você sempre teve dificuldades para escrever HTML e CSS, este curso é perfeito para você. É pago, mas vem com 52 palestras e cinco horas de vídeo para aprender.
Resumo
Como um usuário do WordPress, saltar para o CSS pode ser confuso no início. Mas quando você souber como editar seus arquivos temáticos e onde adicionar estilo, você não terá mais problemas.
Os arquivos temáticos podem ser editados a partir de seu backend ou por FTP para alterar a aparência de seu site, mas isso deve ser normalmente evitado, a menos que você precise editar o código existente.
Se você quiser apenas adicionar seu próprio CSS, use a página CSS adicional em Aparência > Personalizar, ou tente um plugin se você precisar de algo mais poderoso.
As edições em sua folha de estilo serão perdidas na atualização do tema, a menos que você use um child theme. O mesmo não se aplica ao CSS adicional. Seu código está a salvo de atualizações, mas não se esqueça: somente um plugin irá reter o CSS quando você mudar de tema.
Qualquer que seja o método escolhido, você deve sempre manter backups regulares de seu website, incluindo a folha de estilo e o código personalizado que você adicionou. Agora é hora de aprimorar seus conhecimentos básicos de CSS utilizando os recursos que fornecemos.
Feliz estilo!
Editor-chefe da Kinsta e consultor de marketing de conteúdo para desenvolvedores de plugins do WordPress. Conecte-se com Matteo no Twitter.
Deixe um comentário