Como editar CSS no WordPress (editar, adicionar e personalizar a aparência do seu site)

Quer tentar editar o CSS do WordPress, mas não sabe por onde começar? Com o estilo CSS, você pode editar a aparência do seu site globalmente ou em determinadas páginas. Adicione cores, espalhe certos elementos, crie um layout e basicamente mude exatamente a aparência de qualquer coisa no seu tema WordPress.

Se você quiser se familiarizar mais com o ambiente de desenvolvimento do WordPress, ou apenas ter um controle mais preciso sobre a aparência do seu site, você precisará saber como adicionar CSS no WordPress (além de como alterar o que já está lá).

Ao editar seu tema e incluir CSS adicional de sua preferência, você poderá otimizar cada elemento visual em seu site. Hoje, vamos dar uma olhada mais de perto.

Pronto para começar? Vamos fazer isso!

Prefere assistir a versão em vídeo?

O que é edição CSS?

CSS significa Cascading Style Sheets e é a linguagem web mais popular além do HTML. Os dois andam de mãos dadas, pois o CSS é usado para estilizar elementos HTML. O HTML estabelece as bases da aparência de um site e o CSS é usado para estilizá-lo ainda mais.

O CSS oferece a capacidade de tornar um site responsivo, adicionar cores, alterar fontes, modificar o layout e, em geral, ajustar a apresentação visual de um site. Assim como HTML e JavaScript, CSS é uma linguagem front-end do lado do cliente, o que significa que é executada no usuário final, e não no servidor back-end.

Ao mergulhar no desenvolvimento do WordPress, HTML, CSS, JavaScript e PHP são as linguagens que você precisa conhecer. É nisso que o CMS principal é construído, bem 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 site ou fazer pequenas alterações estéticas em seu tema para melhor se adequar a você.

WordPress e CSS

Dentro do WordPress, CSS é um pouco diferente. É controlado por temas, que são compostos de arquivos de modelo, tags de modelo e, claro, a folha de estilo CSS. Embora gerados pelo seu tema, todos eles são editáveis ​​por você.

Os arquivos de modelo dividem partes do seu site em seções (como header.php ou archive.php), e as tags de modelo são usadas para chamá-los e outros conteúdos do seu banco de dados. Esses arquivos são compostos principalmente de PHP e HTML, embora você possa adicionar CSS se necessário.

O que você está realmente procurando é a folha de estilo, ou style.css. Para alterar a aparência do seu site, você precisará aprender a adicionar e editar código nesse arquivo.

Como personalizar seu tema WordPress com CSS

Se você quiser personalizar seu tema e alterar a aparência do seu site com CSS, precisará adicionar seu próprio código ou editar o que já está lá. Existem maneiras de adicionar CSS sem precisar tocar em nenhum arquivo de tema, mas para alterar o código do tema existente, você terá que acessar a folha de estilo do seu site.

Ao fazer essas alterações, há uma coisa que você deve saber: quando seu tema for atualizado, todas as edições feitas em style.css , functions.php ou outros arquivos de modelo de tema serão apagadas. Em geral, você não deve fazer alterações diretas em seu site no editor sem usar um tema filho.

A folha de estilo é como uma “lista de instruções” para o seu site, definindo exatamente como ele é estilizado e como o código CSS é tratado. É aqui que você fará a maior parte de sua edição, mas também mostraremos como acessar outros arquivos de modelo de tema, como header.php e footer.php.

Existem duas maneiras de acessar a folha de estilo do seu site WordPress: através do painel do WordPress ou por meio de um cliente FTP. Nós vamos cobrir os dois.

Não se sente confortável fazendo isso sozinho? Considere contratar um desenvolvedor WordPress para lidar com essa etapa para você.

Editando o CSS do WordPress no Painel

A maneira mais fácil e conveniente de acessar sua folha de estilo CSS é diretamente no painel do WordPress. Não há necessidade de instalar programas de FTP ou editores de código. Você pode editar diretamente qualquer arquivo com destaque de sintaxe e documentação de função integrada.

Antes de fazer qualquer edição importante nos arquivos principais, você deve sempre fazer backup do seu site WordPress. É muito fácil cometer um erro acidentalmente que pode prejudicar a aparência do seu site se você for novo em CSS, e pode ser difícil descobrir como reverter suas alterações.

Depois de fazer um backup e um tema filho, faça login no seu back-end. Você pode encontrar o editor acessando o menu e clicando em Aparência > Editor de Temas .

Você deverá ver um pop-up avisando contra fazer edições diretas nesses arquivos. Não se preocupe, basta clicar em "Eu entendo". É apenas um aviso para usar um tema filho e fazer backup do seu site antes de fazer qualquer alteração importante. Siga essas 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 visualizar seus arquivos de tema, se não estiver.

Além de style.css, você também terá acesso a arquivos de modelo como functions.php, header.php e single.php. Tudo isso afeta a forma como determinadas páginas do seu site agem.

Mas você deve se familiarizar com o PHP antes de mergulhar nesses arquivos específicos.

Apenas lembre-se: a maioria das alterações de CSS que você fizer aqui serão globais. Por exemplo, se você alterar seus cabeçalhos H1 para uma determinada fonte, isso terá efeito para todas as páginas do seu site. Você precisará usar uma sintaxe especial para personalizar o estilo de páginas específicas.

Editar arquivos de tema diretamente

E se você não conseguir acessar o Editor de Temas ou preferir fazer seu trabalho por FTP? É mais fácil usar o editor de back-end, mas alguns temas ou plugins podem desativá-lo. Se for esse o caso, você precisará se conectar ao seu site por meio de FTP.

FTP, ou File Transfer Protocol, permite acessar e modificar remotamente os arquivos de um site. 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 solicitar suas credenciais de FTP (host, porta e nome de usuário/senha, se aplicável). Se o seu host tiver um painel, você poderá encontrá-los fazendo login.

As credenciais dos usuários Kinsta estão localizadas no painel MyKinsta em Sites > SFTP/SSH .

Depois de tê-los, inicie seu cliente FTP e insira essas informações. Se não funcionar, tente colocar “sftp://” antes da URL na seção Host .

Quando estiver dentro, você pode encontrar seu arquivo style.css clicando na pasta wp-content para abri-lo, depois na pasta do seu tema (como o tema T goy Twenty ) e rolando até ver style.css.

Clique duas vezes para abri-lo (ou clique com o botão direito do mouse e selecione Visualizar/Editar ) e faça suas modificações. Lembre-se de salvar e fazer o upload de volta para o servidor.

Se você precisar editar outros arquivos de modelo como home.php, single.php, archive.php, você pode encontrá-los na mesma pasta que style.css.

Editar seus arquivos de tema, seja por FTP ou pelo painel, nem sempre é necessário. Na verdade, é melhor evitar fazer isso 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 deseja editar o código CSS existente e apenas deseja adicionar seu próprio estilo, é altamente recomendável usar um dos seguintes métodos: personalizador do WordPress ou usar um plug-in dedicado.

Por um lado, o código CSS adicionado por meio de um desses 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 o adicionou se quiser fazer modificações mais tarde.

Assine a newsletter

Quer saber como aumentamos nosso tráfego em mais de 1000%?

Junte-se a mais de 20.000 pessoas que recebem nossa newsletter semanal com dicas privilegiadas do WordPress!

Inscreva-se agora

Além disso, o CSS adicionado por meio de um desses métodos não será perdido quando o tema for atualizado (embora ainda possa desaparecer se você alterar os temas).

Isso significa que você não precisa usar um tema filho e, se algo quebrar, tudo o que você precisa fazer é remover o CSS que acabou de adicionar.

Observe que você ainda deve manter um backup do seu site, pois algumas pessoas relataram ocasionalmente perder seu CSS durante as principais atualizações. Ainda assim, esse método é muito mais confiável do que editar arquivos de tema diretamente.

Embora você possa simplesmente adicionar código ao style.css e encerrar o dia, se não quiser criar um tema filho, fazer grandes edições no CSS existente em seu tema e potencialmente acabar com todo o seu trabalho apagado, é melhor para usar a opção CSS Adicional no personalizador do WordPress ou instalar um plugin.

1. Editando CSS através do WordPress Customizer

Em vez de usar o Editor de Temas, tente isso. Faça login no back-end do WordPress e clique em Aparência > Personalizar para abrir a tela de personalização do tema. Você verá uma visualização ao vivo do seu site, com opções à esquerda para personalizar elementos como cores, menus ou outros widgets.

Na parte inferior deste menu, você deve encontrar a caixa CSS adicional .

Clique para abri-lo. Você será levado a uma nova tela com uma caixa de entrada de código e algumas instruções. A tela CSS Adicional inclui realce de sintaxe, assim como o Editor de Temas, juntamente com validação que permite saber se seu código está errado.

Qualquer código que você escrever aparecerá automaticamente na área de visualização à direita, a menos que tenha um erro (embora você possa optar por publicá-lo de qualquer maneira).

Quando terminar de trabalhar, você poderá publicar seu código, agendar quando ele entrará em vigor ou salvá-lo como rascunho para trabalhar mais tarde. Você pode até obter um link de visualização para compartilhar com outras pessoas.

Como você pode ver, a página CSS Adicional é de muitas maneiras mais poderosa que o Editor de Temas e muito mais adequada para adicionar código do que mexer nos arquivos principais.

O código CSS que você escreve aqui substitui o estilo padrão do seu tema e não desaparece quando o seu tema é atualizado. Se você não conseguir vê-lo “ao vivo” em sua visualização, verifique se está usando os seletores corretos em seu código CSS.

Assim como com o Editor de Temas, o CSS é global por padrão, mas você pode escrever código direcionado a páginas específicas.

A única desvantagem é que, se você trocar de tema, tudo o que você escreveu será apagado. Certifique-se de fazer backup do seu CSS antes de mudar para um novo tema ou você pode acabar perdendo muito trabalho.

Se você está com dificuldades para usar essa opção ou deseja uma solução que funcione em vários temas e possa segmentar mais facilmente determinadas páginas, tente um plug-in.

2. Adicionando CSS personalizado ao WordPress usando plugins

Existem algumas razões pelas quais você pode querer usar um plugin para adicionar CSS ao WordPress. Embora a função seja semelhante ao menu CSS Adicional, os estilos geralmente permanecem mesmo se você alternar/atualizar temas.

Você também pode aproveitar mais a interface do usuário ou gostar dos recursos extras, como o preenchimento automático. Alguns plugins até permitem que você crie CSS por meio de menus suspensos, em vez de ter que escrevê-lo você mesmo.

CSS personalizado simples

Simple Custom CSS é o plugin de editor de CSS mais popular, devido à sua facilidade de uso, interface mínima e backend leve. Em suma, é um plugin WordPress muito pequeno que dá um grande impacto.

A configuração é fácil e você não verá nenhum impacto negativo no desempenho. Funciona em qualquer tema e inclui realce de sintaxe e verificação de erros.

CSS e JS personalizados simples

CSS e JS personalizados simples são uma boa alternativa. Ele também permite direcionar o cabeçalho, rodapé, front-end ou até mesmo o back-end do administrador.

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 Adicionar CSS personalizado

Se você está lutando para adicionar CSS a páginas específicas, o WP Add Custom CSS adiciona uma caixa CSS personalizada à tela de edição e também vem com estilo global.

Herói CSS

Você também pode tentar um editor visual de CSS. Eles pegam toda a codificação complicada e a transformam em uma série de campos de entrada fáceis de usar e menus suspensos que lidam com toda a programação para você.

CSS Hero é um plugin de edição visual premium com alguns recursos realmente poderosos (animação, edições específicas do dispositivo e edição não destrutiva, para citar alguns).

Onde aprender CSS

Pronto para mergulhar no CSS por si mesmo? Esses tutoriais para iniciantes estabelecerão o básico e ensinarão a sintaxe que você precisa 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, CSS não é muito difícil! Coisas simples, como alterar a cor do plano de fundo ou definir o estilo da fonte, são bastante fáceis, e há muitos exemplos online.

(Leitura sugerida: 50+ fontes modernas para usar em seu site WordPress)

A maioria dos tutoriais de programação que você encontrará na internet também são totalmente gratuitos. Há uma abundância de informações por aí sem/pouco custo.

Aqui estão alguns exemplos que cobrem os melhores tutoriais de CSS para iniciantes.

• Tutorial CSS W3Schools: Há uma tonelada absoluta de informações a serem encontradas aqui: tutoriais detalhados, exemplos e referências para você trabalhar. Os tutoriais do W3Schools são tão simples e fáceis de seguir quanto possível, então mesmo se você for um iniciante, este é um ótimo lugar para começar.
• Codeacademy Aprenda CSS: Através de seis aulas práticas gratuitas, você aprenderá o básico de CSS. Este não é um tutorial em vídeo simples, mas uma lição interativa que faz você trabalhar com código real. Com a versão pro, você também recebe questionários e projetos de forma livre para trabalhar.
• Aprenda CSS em uma hora: Muitas pessoas querem aprender uma nova linguagem de programação, mas simplesmente não têm tempo para se dedicar. Mas se você puder reservar apenas uma hora, poderá aprender CSS com este curso gratuito de 20 partes. Mesmo que você não seja um mestre no final, você deve ter uma boa compreensão do básico.
• Introdução ao HTML básico e CSS para usuários do WordPress: Procurando algo específico para o 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 usuário do WordPress, pular para CSS pode ser confuso no começo. Mas uma vez que você saiba como editar seus arquivos de tema e onde adicionar estilo, você não terá mais problemas.

Os arquivos de tema podem ser editados a partir de seu back-end ou por FTP para alterar a aparência do seu site, mas isso geralmente deve ser evitado, a menos que você precise editar o código existente.

Se você deseja apenas adicionar seu próprio CSS, use a página CSS Adicional em Aparência > Personalizar ou experimente um plug-in se 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 tema filho. O mesmo não é verdade para CSS adicional. Seu código está protegido contra atualizações, mas não se esqueça: apenas um plugin manterá o CSS quando você alterar os temas.

Seja qual for o método escolhido, você deve sempre manter backups regulares do seu site, incluindo a folha de estilo e o código personalizado que você adicionou. Agora é hora de aprimorar seus conceitos básicos de CSS usando os recursos que fornecemos.

Feliz estilo!

Leitura sugerida: Melhores cursos de web design online