Como adicionar CSS personalizado a um site com WordPress – da maneira certa!

Para iniciantes, adicionar CSS a um site WordPress não é uma tarefa fácil. É, no entanto, às vezes muito necessário. Na verdade, existem várias maneiras de personalizar seu site (com criadores de páginas, vários plugins e configurações de temas do WordPress etc.), mas às vezes tudo o que você precisa fazer é alterar um ou dois aspectos muito específicos de um design – e é aí que o CSS entra. Mas como você faz isso? Onde você começa no WordPress? Não tema, temos as respostas …


Aqui está o que você precisa saber:

Como adicionar CSS ao WordPress:

– (nota: créditos em vídeo para Topher DeRosia – criador do HeroPress

Transcrição do vídeo:

Oi! Este é o Topher com o WinningWP. Neste vídeo, veremos como adicionar CSS personalizado ao WordPress da maneira certa. Imagine por um momento que você deseja fazer uma pequena alteração na aparência do site. Você pesquisa no Google um pouco e encontra um pequeno trecho de CSS e eles dizem: “Basta colocar isso no seu site”. Mas onde você coloca isso? E como você sabe que foi feito da maneira certa? Deixe-me te mostrar. Primeiro, precisamos determinar para que serve o seu CSS. Na verdade, existem apenas duas áreas nas quais você pode aplicar o CSS. Um é para o design geral do site, que é o layout, as cores etc. O outro é o design de conteúdo e é assim que o seu conteúdo específico se parece: tratamento de imagem e tamanho das cotações em bloco, etc. No futuro, convém alterar o design do site. Obtenha um tema totalmente novo e mantenha os pequenos ajustes que você fez para a aparência do seu conteúdo. Deixe-me mostrar o que eu quero dizer. Aqui temos um site bastante simples e é fácil descrever o layout. Há uma barra de pesquisa na parte superior, uma barra de cabeçalho, uma área de conteúdo e é difícil de ver porque está vazia, mas eu tenho uma barra lateral aqui. O fundo é todo branco, o rodapé é cinza e a barra de pesquisa é preta. Esses são os tipos de coisas que você mudaria relacionadas ao seu tema. Aqui temos o nosso conteúdo e temos uma certa quantidade de preenchimento à direita das imagens e legendas em itálico. Essas seriam mudanças relacionadas ao conteúdo, então vamos ver como fazer as duas coisas. As alterações no design do site estão vinculadas ao seu tema, o que faz sentido. Se você alterar seu tema no futuro, não desejará manter o CSS, pois é tudo sobre a aparência dele. Então, queremos mudar o seu tema atual e desaparecer se você se livrar dele. Você tem duas opções, uma é o Customizer e a outra está editando style.css. Nem são muito difíceis, mas o Customizer realmente é de longe o mais fácil. Deixe-me mostrar o que eu quero dizer. Gostaria de mudar o cabeçalho do meu site para vermelho. Então, a primeira coisa que vou fazer é encontrar o nome. No Chrome, clique com o botão direito do mouse e pressione inspecionar. E bem aqui diz site-header-main. Então é isso que eu quero mudar. Agora aqui na parte superior do meu site está o botão Personalizar. Se eu rolar até a parte inferior do Customizer, posso clicar em CSS adicional. Há um pouco de instruções aqui sobre como usá-lo. Se você clicar em fechar, ele aparecerá aqui. Então, eu vou digitar site-header-main e, em chaves, colocar o vermelho na cor de fundo. Agora você não precisa necessariamente saber como usar o inspetor como eu e não precisa saber que f é vermelho. Você pode ter obtido esse código de um site em algum lugar e tudo bem, não precisa saber como encontrá-lo. Estou apenas mostrando como colocar aqui. Agora que está lá, posso clicar em publicar e agora posso fechar esta guia e agora tenho um cabeçalho vermelho. Você pode colocar tanto CSS quanto quiser. Você pode alterar completamente todo o design do seu site, se desejar. Mas agora quero mostrar a outra maneira de editar o CSS. Vou remover o código que eu inseri antes e salvá-lo e agora vamos editar o arquivo style.css do nosso tema. Indo para o Painel, em Aparência, Temas. Agora, o seu tema ativo está sempre aqui no canto superior esquerdo. Você realmente só quer fazer esse método específico se estiver usando um tema filho. Você pode ver aqui que eu fiz o install, mas meu tema ativo é o make – child theme. Isso faz com que, se o make fizer uma atualização, não elimine minhas personalizações, que estarão no meu tema filho e meu tema filho nunca receberá uma atualização porque os temas filhos não recebem atualizações. Se você pode confirmar que está usando um tema filho, no menu aqui está um link para o Editor. E bem aqui, eles contarão tudo o que eu disse sobre temas infantis. Então vá em frente e clique em Compreendo se você está usando um tema filho. O primeiro arquivo que aparece é o seu style.css. Sempre será assim. E todo esse texto aqui é informações sobre o seu tema. Você não precisa prestar atenção. Vá para a parte inferior direita e você verá aqui a minha dizendo: “Adicione seus estilos personalizados abaixo”. Antes de fazer qualquer edição neste arquivo, quero recomendar que você faça o backup. E isso é realmente simples. Vamos apenas copiar e colar em outro arquivo em algum lugar. Portanto, se você estiver no Windows, poderá executar o comando Control + A ou, no Mac, o comando Command + A. Ele destacará tudo e o comando Control ou Command + C e o copiará. E você pode colar em qualquer outro arquivo que possa conter texto. Você realmente não precisa mantê-lo permanentemente, apenas o mantém enquanto edita este e, se este funcionar perfeitamente, depois que terminar, basta excluir seu backup. Mas se este quebrar e você se perder, pode simplesmente apagar esse e colar novamente o que copiou. Então, colarei exatamente o mesmo código que fiz com o Personalizador e clique em Atualizar arquivo. E depois recarregue meu site. E aqui estamos, também é vermelho. Agora, se o Customizer é tão fácil, por que você deseja inserir seu arquivo style.css? O motivo é que seu arquivo style.css é carregado muito antes do Customizer. Portanto, se você fez isso com o Personalizador, poderá obter uma instância em que a página carregue totalmente, parecerá branca por uma fração de segundo e piscará em vermelho. Mas se você colocar em style.css, não faz isso. Outra das coisas que eu mais amei no Customizer é que você pode ver suas alterações enquanto as digita. Portanto, um fluxo de trabalho comum para mim é escrever todo o meu CSS no Customizer e copiá-lo e colá-lo em style.css. Você não precisa fazer isso. Você pode deixar tudo no Customizer e funcionaria apenas para sempre. Se você está apenas começando, minha recomendação é que você faça apenas o Personalizador. É rápido, fácil, indolor e os negativos são muito mínimos. Se você quiser experimentar e se molhar um pouco com o funcionamento interno do WordPress, vá em frente e edite seu arquivo style.css. Agora, o outro tipo de CSS com o qual você pode querer trabalhar é para gerenciar seu conteúdo. Agora, para isso, você não o quer vinculado ao tema. Você quer que ele permaneça, mesmo se alterar os temas. Você sempre pode querer que as legendas das imagens não fiquem em itálico, independentemente do tema que estiver usando. Nesse caso, você deseja usar um plugin. Estou usando este plug-in chamado CSS personalizado simples. Em Aparência, há um item de menu CSS personalizado. E permite que você simplesmente digite CSS aqui. Então, eu vou descobrir o nome desta legenda. Clico com o botão direito e inspeciono. E diz que se chama texto-legenda-wp. Então aqui eu posso digitar .wp-caption-text, no estilo da fonte: normal; Clico em Atualizar CSS personalizado e recarregamos nossa página. E você pode ver que não está mais em itálico. Então agora vou mudar meu tema para. E você verá que minha legenda da imagem ainda não está em itálico e, no entanto, todo o conceito de um cabeçalho vermelho desapareceu porque todo esse código estava vinculado ao outro tema. Portanto, para revisar, se você deseja gerenciar seu tema, use o Personalizador ou, em Aparência, vá ao Editor e edite sua folha de estilos. Se você deseja gerenciar o CSS do seu conteúdo, deseja um plugin que mantenha o CSS separado do tema. Algo como CSS personalizado. Se você quiser saber mais sobre o WordPress, acesse www.winningwp.com.

Ver mais vídeos…

Qualquer coisa a acrescentar?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me