O que \u00e9 Edi\u00e7\u00e3o do CSS?<\/h2>\n
CSS significa Cascading Style Sheets e \u00e9 a linguagem web mais popular, al\u00e9m do HTML<\/a>. As duas andam de m\u00e3os dadas, pois o CSS \u00e9 usado para estilizar elementos HTML<\/a>. O HTML estabelece a base da apar\u00eancia de um website e o CSS \u00e9 usado para dar-lhe um estilo ainda maior.<\/p>\n O CSS lhe d\u00e1 a capacidade de fazer um website responder<\/a>, adicionar cores, mudar fontes<\/a>, modificar o layout e, em geral, afinar a apresenta\u00e7\u00e3o visual de um website. Como HTML e JavaScript, CSS \u00e9 uma linguagem frontend do lado do cliente, o que significa que ele executa no lado do usu\u00e1rio, em vez de no servidor backend.<\/p>\n Ao mergulhar no desenvolvimento do WordPress, HTML, CSS, JavaScript e PHP<\/a> s\u00e3o as linguagens que voc\u00ea precisar\u00e1 conhecer. Isto \u00e9 o que o CMS<\/a> principal \u00e9 constru\u00eddo, assim como seus muitos<\/a> temas e plugins<\/a>.<\/p>\n Mas mesmo que voc\u00ea n\u00e3o seja um web designer<\/a> ou desenvolvedor<\/a>, \u00e9 bom pegar um pouco de CSS, pois voc\u00ea pode us\u00e1-lo para mover ou estilizar elementos em seu website, ou fazer pequenas mudan\u00e7as est\u00e9ticas em seu tema para melhor se adequar a voc\u00ea.<\/p>\n\n Dentro do WordPress, o CSS \u00e9 um pouco diferente. \u00c9 controlado por temas<\/a>, que s\u00e3o compostos por arquivos de modelos, tags de modelos e, \u00e9 claro, pela folha de estilo do CSS. Embora gerado por seu tema, todos eles s\u00e3o edit\u00e1veis por voc\u00ea.<\/p>\n Os arquivos modelo<\/a> dividem partes de seu website em se\u00e7\u00f5es (como header.php ou archive.php), e as tags modelo<\/a> s\u00e3o usadas para cham\u00e1-los e outros conte\u00fados de seu banco de dados. Estes arquivos s\u00e3o na verdade compostos principalmente de PHP e HTML, embora voc\u00ea possa adicionar CSS se necess\u00e1rio.<\/p>\n O que voc\u00ea realmente est\u00e1 procurando \u00e9 a folha de estilo<\/a>, ou style.css. Para mudar a apar\u00eancia de seu site, voc\u00ea precisar\u00e1 aprender como adicionar e editar o c\u00f3digo<\/a> neste arquivo.<\/p>\n Se voc\u00ea quiser personalizar seu tema<\/a> e mudar a apar\u00eancia de seu site com CSS, voc\u00ea precisar\u00e1 adicionar seu pr\u00f3prio c\u00f3digo ou editar o que j\u00e1 est\u00e1 l\u00e1. H\u00e1 maneiras de adicionar CSS sem nunca tocar em nenhum arquivo tem\u00e1tico, mas para mudar o c\u00f3digo tem\u00e1tico existente, voc\u00ea ter\u00e1 que acessar a folha de estilo do seu site.<\/p>\n Ao fazer estas mudan\u00e7as, h\u00e1 uma coisa que voc\u00ea deve saber: quando seu tema for atualizado<\/a>, qualquer edi\u00e7\u00e3o feita em style.css<\/em>, functions.php<\/em>, ou outros arquivos de modelos de temas ser\u00e1 apagada. Em geral, voc\u00ea n\u00e3o deve fazer mudan\u00e7as diretas em seu site no editor sem usar um child theme<\/a>.<\/p>\n A folha de estilo \u00e9 como uma “lista de instru\u00e7\u00f5es” para seu website, definindo exatamente como ela \u00e9 estilizada e como o c\u00f3digo CSS \u00e9 tratado. \u00c9 aqui que voc\u00ea far\u00e1 a maior parte de sua edi\u00e7\u00e3o, mas tamb\u00e9m lhe mostraremos como acessar outros arquivos de modelos tem\u00e1ticos, tais como header.php e footer.php<\/a>.<\/p>\n H\u00e1 duas maneiras de acessar a folha de estilo de seu site WordPress: atrav\u00e9s do painel de controle do WordPress<\/a> ou atrav\u00e9s de um cliente FTP<\/a>. Cobriremos os dois.<\/p>\n N\u00e3o se sente confort\u00e1vel em fazer isso voc\u00ea mesmo? Considere contratar um desenvolvedor WordPress<\/a> para lidar com essa etapa para voc\u00ea.<\/p>\n A maneira mais f\u00e1cil e conveniente de acessar sua folha de estilo CSS \u00e9 bem no painel do WordPress. N\u00e3o h\u00e1 necessidade de instalar programas FTP ou editores de c\u00f3digo<\/a>. Voc\u00ea pode editar diretamente qualquer arquivo com destaque de sintaxe e documenta\u00e7\u00e3o de fun\u00e7\u00e3o embutida.<\/p>\n Antes de fazer qualquer grande edi\u00e7\u00e3o dos arquivos principais, voc\u00ea deve sempre fazer backup do seu site WordPress<\/a>. \u00c9 muito f\u00e1cil cometer acidentalmente um erro que pode quebrar a apar\u00eancia de seu site se voc\u00ea for novo no CSS, e pode ser dif\u00edcil descobrir como reverter suas mudan\u00e7as.<\/p>\n Uma vez que voc\u00ea tenha feito um backup e um child theme, fa\u00e7a o login em seu backend. Voc\u00ea pode encontrar o editor indo at\u00e9 o menu e clicando em Apar\u00eancia > Editor Tem\u00e1tico<\/em>.<\/p>\n Voc\u00ea deve ver um popup advertindo-o contra fazer edi\u00e7\u00f5es diretas nestes arquivos. N\u00e3o se preocupe, basta clicar em “Eu entendo”. \u00c9 apenas um aviso para usar um child theme e fazer backup de seu site antes de fazer qualquer mudan\u00e7a importante. Siga estas etapas e \u00e9 seguro editar.<\/p>\n E agora voc\u00ea est\u00e1 dentro! Voc\u00ea deve estar na folha de estilo por padr\u00e3o, mas olhe para o menu \u00e0 direita para ver seus arquivos tem\u00e1ticos se n\u00e3o estiver.<\/p>\n Al\u00e9m de style.css, voc\u00ea tamb\u00e9m ter\u00e1 acesso a arquivos de modelos como functions.php, header.php, e single.php. Tudo isso afeta como certas p\u00e1ginas de seu site agem.<\/p>\n Mas voc\u00ea deve se familiarizar com PHP<\/a> antes de mergulhar nestes arquivos em particular.<\/p>\n Basta lembrar: a maioria das mudan\u00e7as do CSS que voc\u00ea fizer aqui ser\u00e3o globais. Por exemplo, se voc\u00ea mudar seu cabe\u00e7alho H1 para uma determinada fonte, isso ter\u00e1 efeito para cada p\u00e1gina de seu site. Voc\u00ea precisar\u00e1 usar uma sintaxe especial para personalizar o estilo de p\u00e1ginas espec\u00edficas.<\/p>\n E se voc\u00ea n\u00e3o puder acessar o Editor Tem\u00e1tico ou preferir fazer seu trabalho em vez de FTP? \u00c9 mais f\u00e1cil usar o editor backend, mas alguns temas ou plugins podem desabilit\u00e1-lo. Se este for o caso, voc\u00ea precisar\u00e1 se conectar ao seu site atrav\u00e9s de FTP<\/a>.<\/p>\n FTP, ou File Transfer Protocol, permite que voc\u00ea acesse e modifique remotamente os arquivos de um website. A primeira coisa que voc\u00ea precisa fazer \u00e9 baixar o FileZilla<\/a> ou qualquer outro cliente FTP.<\/p>\n Em seguida, voc\u00ea deve entrar em contato com seu host e pedir suas credenciais FTP (host, porto e nome de usu\u00e1rio\/senha, se aplic\u00e1vel). Se seu anfitri\u00e3o tiver um painel de controle, voc\u00ea poder\u00e1 encontr\u00e1-lo acessando o site.<\/p>\n As credenciais dos usu\u00e1rios Kinsta est\u00e3o localizadas no painel MyKinsta<\/a> em Sites > SFTP\/SSH<\/em>.<\/p>\n Uma vez que voc\u00ea os tenha, lance seu cliente FTP e digite essas informa\u00e7\u00f5es. Se n\u00e3o funcionar, tente colocar “sftp:\/\/” antes da URL na se\u00e7\u00e3o Host<\/em>.<\/strong><\/p>\n Uma vez dentro, voc\u00ea pode encontrar seu arquivo style.css clicando na pasta wp-content<\/em> para abri-lo, depois na pasta de seu tema (como o tema Twenty Twenty<\/em><\/a>), depois rolando at\u00e9 ver style.css.<\/p>\n Clique duas vezes para abri-lo (ou clique com o bot\u00e3o direito do mouse e selecione View\/Edit<\/em>) e fa\u00e7a suas modifica\u00e7\u00f5es. Lembre-se de salvar e fazer o upload de volta ao servidor.<\/p>\n Se voc\u00ea precisar editar outros arquivos de modelos<\/a> como home.php, single.php, archive.php, voc\u00ea pode encontr\u00e1-los na mesma pasta do style.css.<\/p>\n Nem sempre \u00e9 necess\u00e1rio editar seus arquivos tem\u00e1ticos<\/a>, seja atrav\u00e9s de FTP ou do painel de controle. Na verdade, \u00e9 melhor evitar faz\u00ea-lo se voc\u00ea estiver apenas adicionando algum c\u00f3digo extra.<\/p>\n Para pequenas adi\u00e7\u00f5es, aqui est\u00e1 a melhor maneira de adicionar CSS ao seu site WordPress.<\/p>\n Se voc\u00ea n\u00e3o estiver procurando editar o c\u00f3digo CSS existente, e quiser apenas adicionar seu pr\u00f3prio estilo, \u00e9 fortemente sugerido o uso de um dos seguintes m\u00e9todos: Personalizador WordPress ou usando um plugin dedicado.<\/p>\n Para um, o c\u00f3digo CSS adicionado atrav\u00e9s de um destes m\u00e9todos \u00e9 muito mais f\u00e1cil de acessar e usar. Voc\u00ea n\u00e3o precisa se preocupar em colocar seu novo CSS no lugar errado ou esquecer onde voc\u00ea o adicionou se quiser fazer modifica\u00e7\u00f5es mais tarde.<\/p>\n Al\u00e9m disso, o CSS adicionado atrav\u00e9s de um destes m\u00e9todos n\u00e3o ser\u00e1 perdido quando seu tema for atualizado (embora ainda possa desaparecer se voc\u00ea mudar de tema<\/a>).<\/p>\n Isto significa que voc\u00ea n\u00e3o precisa usar um child theme, e se algo quebrar, tudo que voc\u00ea tem que fazer \u00e9 remover o CSS que voc\u00ea acabou de adicionar.<\/p>\n Observe que voc\u00ea ainda deve manter um backup de seu website<\/a>, j\u00e1 que algumas pessoas relataram ocasionalmente a perda de seu CSS durante grandes atualiza\u00e7\u00f5es. Ainda assim, este m\u00e9todo \u00e9 muito mais confi\u00e1vel do que a edi\u00e7\u00e3o direta de arquivos tem\u00e1ticos.<\/p>\n Embora voc\u00ea possa simplesmente adicionar c\u00f3digo ao style.css e cham\u00e1-lo de um dia, se voc\u00ea n\u00e3o quiser criar um child theme<\/a>, fazer grandes edi\u00e7\u00f5es ao CSS existente em seu tema, e potencialmente acabar com todo seu trabalho apagado, \u00e9 melhor usar a op\u00e7\u00e3o CSS adicional no personalizador WordPress ou instalar um plugin.<\/p>\n Em vez de usar o Editor Tem\u00e1tico, tente isto. Entre em seu backend WordPress<\/a> e clique em Appearance > Customize<\/em> para abrir a tela de personaliza\u00e7\u00e3o do tema. Voc\u00ea ver\u00e1 uma visualiza\u00e7\u00e3o ao vivo de seu site, com op\u00e7\u00f5es \u00e0 esquerda para personalizar elementos como as cores, menus ou outros widgets<\/a>.<\/p>\n Na parte inferior deste menu, voc\u00ea deve encontrar a caixa CSS adicional<\/a>.<\/em><\/p>\n Clique para abrir. Voc\u00ea ser\u00e1 levado a uma nova tela com uma caixa de entrada de c\u00f3digo e algumas instru\u00e7\u00f5es. A tela CSS adicional inclui destaque de sintaxe, assim como o Editor de Tema, juntamente com valida\u00e7\u00e3o que permite saber se seu c\u00f3digo est\u00e1 errado.<\/p>\n Qualquer c\u00f3digo que voc\u00ea escreve aparece automaticamente na \u00e1rea de visualiza\u00e7\u00e3o \u00e0 direita, a menos que tenha um erro (embora voc\u00ea possa optar por public\u00e1-lo de qualquer forma).<\/p>\n Quando terminar de trabalhar, voc\u00ea pode publicar seu c\u00f3digo, programar quando ele ter\u00e1 efeito, ou salv\u00e1-lo como um rascunho para trabalhar mais tarde. Voc\u00ea pode at\u00e9 obter um link de pr\u00e9-visualiza\u00e7\u00e3o para compartilhar com outros.<\/p>\n Como voc\u00ea pode ver, a p\u00e1gina CSS adicional \u00e9 de muitas maneiras mais poderosa do que o Editor Tem\u00e1tico, e muito mais adequada para adicionar c\u00f3digo do que mexer com arquivos centrais.<\/p>\n O c\u00f3digo CSS que voc\u00ea escreve aqui sobrescreve o estilo padr\u00e3o de seu tema e n\u00e3o desaparece quando seu tema \u00e9 atualizado. Se voc\u00ea n\u00e3o conseguir v\u00ea-lo “ao vivo” em sua visualiza\u00e7\u00e3o, verifique novamente se voc\u00ea est\u00e1 usando os seletores corretos em seu c\u00f3digo CSS.<\/p>\n Assim como com o Editor Tem\u00e1tico, o CSS \u00e9 global por padr\u00e3o, mas voc\u00ea pode escrever c\u00f3digo que visa p\u00e1ginas espec\u00edficas<\/a>.<\/p>\n A \u00fanica desvantagem \u00e9 que, se voc\u00ea trocar de tema<\/a>, qualquer coisa que voc\u00ea tenha escrito ser\u00e1 apagada. Certifique-se de fazer um backup do seu CSS antes de mudar para um novo tema ou voc\u00ea pode acabar perdendo muito trabalho.<\/p>\n Se voc\u00ea estiver lutando para usar esta op\u00e7\u00e3o, ou se quiser uma solu\u00e7\u00e3o que funcione atrav\u00e9s de temas e possa mais facilmente direcionar certas p\u00e1ginas, voc\u00ea deve tentar um plugin em seu lugar.<\/p>\n H\u00e1 algumas raz\u00f5es para voc\u00ea querer usar um plugin para adicionar CSS ao WordPress. Embora a fun\u00e7\u00e3o seja similar ao menu CSS Adicional, os estilos normalmente se manter\u00e3o mesmo que voc\u00ea troque\/atualize os temas.<\/p>\n Voc\u00ea tamb\u00e9m pode desfrutar mais da IU deles, ou gostar das caracter\u00edsticas extras como auto-completamento. Alguns plugins at\u00e9 permitem que voc\u00ea construa CSS atrav\u00e9s de menus suspensos<\/a>, em vez de ter que escrev\u00ea-lo voc\u00ea mesmo.<\/p>\n O Simple CSS Custom<\/a> \u00e9 o plugin de editor CSS mais popular, devido a sua facilidade de uso, interface m\u00ednima e backend leve. Em resumo, \u00e9 um plugin WordPress muito pequeno que embala um grande soco.<\/p>\n A instala\u00e7\u00e3o \u00e9 uma brisa e voc\u00ea n\u00e3o ver\u00e1 nenhum impacto negativo no desempenho<\/a>. Ela funciona em qualquer tema e inclui destaque de sintaxe e verifica\u00e7\u00e3o de erros.<\/p>\n O Simple Custom CSS and JS<\/a> s\u00e3o uma boa alternativa. Ele tamb\u00e9m permite direcionar o cabe\u00e7alho, rodap\u00e9, frontend ou mesmo o backend administrativo.<\/p>\n SiteOrigin CSS<\/a> \u00e9 outra op\u00e7\u00e3o que tamb\u00e9m inclui um editor CSS tradicional. Voc\u00ea pode alternar entre ele e o editor visual<\/a> a qualquer momento.<\/p>\n Se voc\u00ea estiver lutando para adicionar CSS a p\u00e1ginas espec\u00edficas, WP Add Custom CSS<\/a> adiciona uma caixa CSS personalizada \u00e0 tela de edi\u00e7\u00e3o, e tamb\u00e9m vem com estilo global.<\/p>\n Voc\u00ea tamb\u00e9m pode querer considerar a possibilidade de tentar um editor CSS visual. Estes pegam toda a codifica\u00e7\u00e3o complicada e a transformam em uma s\u00e9rie de campos de entrada e menus suspensos f\u00e1ceis de usar que tratam de toda a programa\u00e7\u00e3o para voc\u00ea.<\/p>\n CSS Hero<\/a> \u00e9 um plugin de edi\u00e7\u00e3o visual premium com alguns recursos seriamente poderosos (anima\u00e7\u00e3o, edi\u00e7\u00f5es espec\u00edficas de dispositivos e edi\u00e7\u00e3o n\u00e3o destrutiva, para citar alguns).<\/p>\n Pronto para mergulhar no CSS por si mesmo? Estes tutoriais para iniciantes estabelecer\u00e3o o b\u00e1sico e lhe ensinar\u00e3o a sintaxe que voc\u00ea precisar\u00e1 saber para escrever seu pr\u00f3prio c\u00f3digo CSS funcional.<\/p>\n Pode ser assustador, mas a menos que voc\u00ea esteja tentando fazer algo realmente avan\u00e7ado, o CSS n\u00e3o \u00e9 muito dif\u00edcil! Coisas simples como mudar a cor de fundo ou definir o estilo da fonte<\/a> s\u00e3o bastante f\u00e1ceis, e h\u00e1 muitos exemplos online.<\/p>\n A maioria dos tutoriais de programa\u00e7\u00e3o<\/a> que voc\u00ea encontrar\u00e1 na Internet tamb\u00e9m s\u00e3o completamente gratuitos. H\u00e1 muitas informa\u00e7\u00f5es por a\u00ed com<\/a> custo zero\/baixo.<\/p>\n Aqui est\u00e3o alguns exemplos que cobrem os melhores tutoriais de CSS para iniciantes.<\/p>\n Como um usu\u00e1rio do WordPress, saltar para o CSS pode ser confuso no in\u00edcio. Mas quando voc\u00ea souber como editar seus arquivos tem\u00e1ticos e onde adicionar estilo, voc\u00ea n\u00e3o ter\u00e1 mais problemas.<\/p>\n Os arquivos tem\u00e1ticos podem ser editados a partir de seu backend ou por FTP para alterar a apar\u00eancia de seu site, mas isso deve ser normalmente evitado, a menos que voc\u00ea precise editar o c\u00f3digo existente.<\/p>\n Se voc\u00ea quiser apenas adicionar seu pr\u00f3prio CSS, use a p\u00e1gina CSS adicional em Apar\u00eancia > Personalizar<\/em>, ou tente um plugin se voc\u00ea precisar de algo mais poderoso.<\/p>\n As edi\u00e7\u00f5es em sua folha de estilo<\/a> ser\u00e3o perdidas na atualiza\u00e7\u00e3o do tema, a menos que voc\u00ea use um child theme<\/a>. O mesmo n\u00e3o se aplica ao CSS adicional. Seu c\u00f3digo est\u00e1 a salvo de atualiza\u00e7\u00f5es, mas n\u00e3o se esque\u00e7a: somente um plugin ir\u00e1 reter o CSS quando voc\u00ea mudar de tema<\/a>.<\/p>\n![\"w3school\"](\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/03\/w3school-1.png\")
WordPress e CSS<\/h2>\n
Como Personalizar seu Tema WordPress com CSS<\/h2>\n
Editando o WordPress CSS no Painel de Controle<\/h3>\n
![\"editar](\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/03\/editar-temas-1.png\")
![\"Editando](\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/07\/editar-tema-style-css.png\")
Editar arquivos tem\u00e1ticos diretamente<\/h3>\n
![\"Credenciais](\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/07\/credenciais-ftp-mykinsta.png\")
![\"FileZilla\"](\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/03\/filezilla-1.png\")
Como adicionar CSS personalizado no WordPress<\/h2>\n
1. Edi\u00e7\u00e3o de CSS atrav\u00e9s do WordPress Customizer<\/h3>\n
![\"CSS](\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/03\/css-adicional.png\")
2. Adicionando CSS personalizado ao WordPress usando Plugins<\/h3>\n
Simple Custom CSS<\/h4>\n
![\"Simple](\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/07\/simple-custom-css-plugin.jpg\")
Simple Custom CSS and JS<\/h4>\n
![\"Simple](\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/07\/Simple-Custom-CSS-and-JS-plugin.jpg\")
SiteOrigin CSS<\/h4>\n
![\"SiteOrigin](\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/07\/siteorigin-css-plugin.jpg\")
WP Add Custom CSS<\/h4>\n
![\"WP](\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/07\/wp-add-custom-css-plugin.jpg\")
CSS Hero<\/h4>\n
![\"CSS](\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/03\/css-hero-1.png\")
Onde aprender o CSS<\/h2>\n
![\"Learn](\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/03\/learn-css-1-1.png\")
\n
Resumo<\/h2>\n