Adicionar CSS personalizado

Embora a maioria das alterações possa ser feita com as configurações do editor do WordPress, você pode preferir usar CSS para personalizar seu site se tiver experiência com esse tipo de código. Este guia mostrará como editar seu site com CSS.

Essa funcionalidade está disponível nos sites com o nossos planos WordPress.com Premium, Negócios e Commerce e o antigo plano Pro. Para sites com os planos Gratuito e Pessoal, faça upgrade do seu plano para acessar essa funcionalidade.

CSS significa Cascading Style Sheets (folhas de estilos em cascata) É uma linguagem de marcação que controla a aparência de elementos HTML em uma página da Web. O WordPress inclui um editor CSS para você adicionar seus próprios estilos de CSS e substituir os estilos padrão do seu tema.

O potencial do que você pode fazer com o CSS para modificar o design de um site é quase infinito. No entanto, é necessário saber como o CSS e o HTML funcionam (ou pelo menos ter vontade de aprender). O guia de CSS do MDN Web Docs é um ótimo lugar para começar a aprender sobre o assunto.

Se você não tem interesse em aprender CSS, escolha um tema de bloco para o seu site. Esses temas oferecem as opções mais flexíveis para personalizar qualquer aspecto do design do seu site sem que você precise ter qualquer conhecimento sobre programação.

Dependendo do seu tema, há duas maneiras de acessar o editor CSS do seu site. Cada uma delas será explicada abaixo.

Se o seu site usa um tema compatível com o editor, você pode personalizar o site com CSS usando esse método. Uma maneira rápida de descobrir se seu site usa o editor do site é conferir a opção Aparência em seu painel. Se você vir Editor aqui, poderá acessar o editor CSS seguindo estas etapas:

1. Acesse o painel do seu site.
2. Acesse Aparência → Editor.
3. Clique em Estilos no menu Design, à esquerda.
   • Se o seu tema inclui variações de estilo, clique no ícone de lápis para abrir as opções de estilo:

4. Clique nos três pontos à direita do cabeçalho “Estilos” e escolha “CSS adicional“:

5. Digite ou cole seu CSS na caixa de texto exibida.
6. Clique no botão “Salvar” na parte superior direita da tela para salvar o CSS no seu site.

Você pode visualizar o impacto das alterações de CSS em qualquer tipo de bloco ao carregar o Livro de estilos. Clique no ícone de olho para abrir o livro de estilos.

Nos temas do editor do site, você pode aplicar o código CSS a blocos específicos em todo o site seguindo as etapas abaixo.

1. Acesse o painel do seu site.
2. Acesse Aparência → Editor.
3. Clique em Estilos no menu Design, à esquerda.
   • Se o seu tema inclui variações de estilo, clique no ícone de lápis para abrir as opções de estilo.
4. Desta vez, selecione a seção “Blocos” para acessar as configurações e personalizar a aparência de blocos específicos em todo o site.
5. Clique no nome do bloco ao qual deseja adicionar CSS. Você também pode localizar o tipo de bloco desejado usando o campo de busca.
6. Role até a parte inferior e clique em “Avançado“.
7. Na caixa rotulada “CSS adicional“, digite o CSS que será aplicado a todas as instâncias desse tipo de bloco. Ao adicionar CSS por bloco, não é necessário incluir um seletor de CSS, basta adicionar a propriedade e o valor. No vídeo acima, há um exemplo.
8. Clique no botão “Salvar” na parte superior direita da tela para salvar o CSS no seu site.

Para temas que não usam o editor do site, incluindo temas clássicos e vários temas de terceiros, você pode adicionar CSS seguindo estas etapas:

1. Acesse o painel do seu site.
2. Vá para a seção Aparência → Personalizar → CSS adicional.
3. Digite ou cole seu CSS na caixa de texto exibida. A janela de visualização à direita refletirá suas alterações.
4. Clique no botão “Salvar alterações” para salvar o CSS no seu site.

As últimas 25 versões das suas edições de CSS ficam salvas e podem ser acessadas clicando em “Ver histórico completo” na parte inferior do editor CSS. É possível restaurar versões anteriores do seu CSS aqui.

Se a opção não for exibida, não há histórico de CSS para restaurar.

A opção “Largura de mídia” deve ser usada caso você tenha modificado a largura da área de conteúdo primário usando o CSS personalizado. A configuração da “Largura de mídia” é o tamanho padrão para imagens de tela inteira quando inseridas em seu site.

Isso não afeta o tamanho de algumas imagens adicionadas antes de você alterar a configuração (dependendo de como foram inseridas). Talvez seja necessário reinserir algumas dessas imagens antes de alterar a configuração.

Por padrão, o CSS personalizado inserido no editor CSS será carregado depois do CSS original do tema. Isso significa que as suas regras podem prevalecer e substituir os estilos do tema.

Para desativar totalmente o CSS original, clique na caixa de seleção “Não usar o CSS original do tema“. Essa ação permitirá que você use qualquer tema do WordPress.com como tela em branco para realizar seus designs com o CSS. Esta é uma opção avançada e só deve ser usada se você quiser começar novamente e projetar o CSS do seu tema do zero.

Se quiser criar com base nas regras de CSS existentes (a abordagem mais comum e recomendada), deixe essa opção desativada.

O WordPress.com tem suporte para pré-processadores CSS dos tipos LESS e Sass (Sintaxe SCSS). Essa é uma opção avançada para usuários que desejam usar as extensões CSS, como variáveis e mixins. Acesse os sites do LESS e do Sass para obter mais informações.

Os créditos do rodapé não devem ser modificados com CSS. É possível remover ou modificar os créditos do rodapé nas configurações dependendo do tipo de tema usado pelo site:

• Se o seu site usa um tema de bloco, você pode editar ou remover os créditos do rodapé usando o editor do site, sem a necessidade de CSS.
• Se o seu site usa um tema clássico, você pode alterar os créditos do rodapé para um logotipo minimalista do WordPress. É possível ocultar o crédito se o site tiver uma assinatura dos planos Negócios ou Commerce.

Sim, mas apenas em sites com plugins ativados.

Você pode escolher as fontes do seu site usando as opções do seu tema. Ao trabalhar com CSS, você se limita a essas duas fontes da Web no front end. No entanto, é possível adicionar outras fontes usando plugins de fontes de terceiros.

Sim. Você pode fazer upload de uma imagem na sua biblioteca de mídia e se referir a ela pela URL direta na sua folha de estilos de CSS. Veja um exemplo de como usar uma imagem de fundo em sua folha de estilos:

div#content {
background-image: url('http://example.files.wordpress.com/1999/09/example.jpg');
}

Recomendamos fazer edições de CSS usando o editor CSS, conforme explicado acima. Quando você adiciona CSS usando esse método, ele substitui as regras de CSS da folha de estilos do seu tema. Esse é um método seguro que facilita a depuração de conflitos de CSS e a restauração de versões anteriores de CSS que você adicionou.

Se você souber editar os arquivos do tema diretamente, é possível fazer isso por SFTP ou criando um tema secundário. Recomendamos testar as alterações em um site de teste antes de aplicá-las ao seu site ativo.

Todos os upgrades do WordPress.com são renovados anualmente. Se você cancelar sua assinatura, seu CSS personalizado ainda ficará salvo, mas não será mais aplicado ao seu site para que todos vejam. Caso queira que eles sejam reaplicados ao seu site, você pode adquirir o plano novamente e os estilos serão reaplicados automaticamente, desde que você não tenha trocado de tema. Se você trocou de tema, seu CSS anterior estará disponível nas revisões de CSS.