Como reter CSS personalizado ao atualizar um tema do WordPress
Publicados: 2022-05-05Os temas determinam o layout e a aparência dos sites WordPress. Independentemente do tema escolhido, talvez seja necessário personalizá-lo um pouco para atender às suas necessidades específicas.
Uma maneira de personalizar seu tema é usar Cascading Style Sheets (CSS). Esta linguagem de folha de estilo popular permitirá que você altere praticamente qualquer elemento do seu tema. Você pode adicionar CSS personalizado ao seu tema para especificar cores de fundo, alterar tamanhos de fonte, criar espaçamento entre conteúdo, reposicionar menus e muito mais. CSS personalizado, no entanto, pode ser excluído na próxima vez que você atualizar seu tema.
Por que as atualizações de temas quebram o CSS personalizado
Todos os temas têm um arquivo style.css. Disponível na pasta do tema, contém o CSS. Ao atualizar seu tema, você fará o download de uma versão nova e diferente dele para substituir a versão existente.
A atualização do seu tema excluirá o arquivo style.css existente e o substituirá por um novo arquivo style.css novo. O novo arquivo style.css não conterá nenhum CSS personalizado que você possa ter adicionado anteriormente. Você sempre pode adicionar de volta o CSS personalizado excluído, mas fazer isso após cada atualização de tema pode ser tedioso.
Adicionar ao personalizador
Você pode manter o CSS personalizado ao atualizar seu tema adicionando-o ao personalizador. O personalizador é uma ferramenta de personalização de temas no painel do WordPress. Possui um campo “CSS Adicional”. Em vez de adicionar CSS personalizado diretamente ao style.css do seu tema, você pode adicioná-lo a este campo.
O campo “CSS Adicional” foi introduzido na versão 4.7 do WordPress para evitar que o CSS personalizado fosse excluído durante as atualizações do tema. Não afeta o arquivo style.css, nem afeta outros arquivos na pasta do tema. Ao adicionar CSS personalizado ao personalizador por meio desse campo, ele será armazenado no banco de dados do seu site. Você pode atualizar seu tema enquanto mantém o CSS personalizado.
Para acessar o personalizador, clique em “Aparência” no painel do WordPress e escolha “Personalizar”. A guia “CSS Adicional” está próxima à parte inferior. Clicar nessa guia exibirá um campo onde você pode inserir CSS personalizado. A atualização do seu tema substituirá apenas os arquivos na pasta do tema. Ele não substituirá ou afetará o banco de dados do seu site, portanto, o CSS personalizado será preservado.
Adicionar CSS personalizado ao personalizador permite visualizá-lo. O personalizador possui um recurso de visualização integrado para todas as alterações. Esteja você configurando novos widgets ou adicionando CSS personalizado, o personalizador revelará a aparência do seu site. Você pode optar por prosseguir com a personalização clicando em "Publicar". Se o seu site não parecer correto, você pode alterar as opções de personalização antes de colocá-lo no ar. Independentemente disso, o personalizador mostrará uma visualização do seu site com o CSS personalizado.
Criar um tema filho
Outra solução é criar um tema filho. Temas filhos são essencialmente cópias de outros temas que você pode personalizar sem medo de perder suas alterações. Não são cópias completas. Em vez disso, a maioria dos temas filhos consiste em apenas alguns arquivos básicos, incluindo um arquivo style.css e um arquivo functions.php.
Temas filho são projetados para herdar as propriedades de um tema pai. Você pode usar seu tema como um tema pai. O tema filho terá sua própria pasta, que conterá seu próprio arquivo style.css e arquivo functions.php. O tema filho, no entanto, não conterá um arquivo index.php, um arquivo page.php, um arquivo single.php ou outros arquivos de tema padrão. Ele aproveitará o tema pai para essas propriedades.
Como os temas filhos têm seu próprio arquivo style.css, eles oferecem suporte a CSS personalizado. Mais importante, os temas filhos mantêm todo o seu CSS personalizado quando os temas pai são atualizados. A atualização do tema pai não afetará o arquivo style.css do tema filho. Para obter instruções sobre como criar um tema filho, visite developer.wordpress.org/themes/advanced-topics/child-theme. Como alternativa, alguns temas premium vêm com um tema filho.
Para apenas algumas linhas de CSS personalizado, você pode querer adicioná-lo ao personalizador. Para quantidades maiores de CSS personalizado, criar um tema filho provavelmente vale o esforço. Um tema filho fornecerá um arquivo style.css separado que você pode personalizar.
Você pode até trabalhar offline no arquivo style.css do tema filho e, como é um arquivo separado, você terá muito espaço para CSS personalizado. Adicionar CSS personalizado ao personalizador restringirá você a um pequeno campo acessível apenas online. O personalizador oferece o benefício de um modo de visualização, enquanto um tema filho oferece o benefício de um arquivo style.css separado.
Use um plug-in CSS personalizado
Você pode usar um plugin CSS personalizado. O plugin Simple Custom CSS, por exemplo, faz exatamente o que parece: ele permite que você adicione facilmente CSS personalizado ao seu tema. O CSS personalizado adicionado ao plug-in substituirá o próprio CSS do seu tema.
Depois de ativar o plugin Simple Custom CSS, você deverá ver uma nova guia “Custom CSS” em “Appearance” no painel do WordPress. É aqui que você pode adicionar CSS personalizado. Ao atualizar seu tema, o CSS personalizado será preservado. A atualização do seu tema substituirá o arquivo style.css do tema, mas o plug-in substituirá o novo arquivo style.css pelo seu CSS personalizado.
Há também o plugin Simple Custom CSS e JS, que suporta CSS customizado e JavaScript customizado. Você pode usá-lo para criar CSS personalizado que substitui o próprio CSS do seu tema. Se você não quer mexer com a criação de um tema filho, você pode querer usar um plugin CSS personalizado. Baixar um plugin CSS personalizado é uma maneira fácil de preservar o CSS personalizado durante as atualizações do tema.
Conclusão
É frustrante quando você perde o CSS personalizado após atualizar um tema. Mesmo se você salvou o CSS personalizado localmente em seu computador, você terá que voltar e adicioná-lo. Você pode manter o CSS personalizado do seu tema usando o personalizador no painel do WordPress, criando um tema filho ou usando um plugin CSS personalizado.
