Utilizar ferramentas que otimizam e facilitam o nosso trabalho customizando e alterando o estilo do nosso site WordPress é de muita valia! Uma das ferramentas mais acessíveis e práticas é o navegador da Google, o Chrome. Além de utilizá-lo para navegar na internet, você pode e deve utilizar o Inspetor Google Chrome. Ele é excelente para fazer testes CSS sem modificar códigos reais. É tão útil, que o CanalWP vai falar sobre suas possibilidades hoje.

Inspetor Google Chrome

Desenvolvido com o propósito de facilitar o trabalho de desenvolvedores e designers, o inspetor Google Chrome é muito útil para realizar testes de CSS, verificar erros JavaScript e até para fazer testar o comportamento de sites em diversos aparelhos – sem sair do navegador de seu computador.

Primeiros passos

Para começar a utilizar o inspetor Google Chrome você precisa, obviamente, estar utilizando tal navegador. Se você ainda não tem esse browser instalado em seu computador, que no botão abaixo para ser redirecionado a página de download.

Baixar | Hospedagem

Com o navegador devidamente instalado em sua máquina, utilize o mesmo para acessar seu site WordPress. Estando em seu site, poderemos descobrir todas as possibilidades que o inspetor do Chrome nos oferece para editar código.

Quando se instala esse navegador, de forma nativa o inspetor Google Chrome é instalado junto com ele. Essa ferramenta funciona apenas por este browser e é muito fácil de utilizar, você precisa apenas se ambientar e se acostumar com suas ferramentas e funcionalidades.

Testes com o inspetor

Para todas as demonstrações que vamos fazer aqui iremos utilizar o site do CanalWP como exemplo. Todavia, você pode realizar todos os passos seguintes em seu próprio WordPress ou qualquer outro tipo de site e plataforma web.

Utilizando o navegador Google Chrome para acessar o site, escolha a página em que pretende realizar os testes e alterações com o inspetor e clique com o botão direito sobre o background do site. Logo você verá uma janela aparecer e a opção Inspect element ou Inspecionar elemento será exibida. É clicando nessa ação que a nossa brincadeira começa. Então, clique nela.

Se você clicou na área de background, provavelmente estará dentro do mesmo div que é mostrado na imagem abaixo. Ter uma base de HTML e CSS vai te ajudar e muito no processo de aprendizado do inspetor Google Chrome. Assim como, com o inspetor você conseguirá entender e visualizar na prática como funcionam as marcações e regras de estilo.

Clicando para inspecionar o background, você deve cair dentro da div referente a class=”container”. A janela referente ao inspetor será mostrada na parte de baixo do seu navegador ou na lateral. Certifique-se de permanecer dentro da aba Styles do inspetor (fica do lado direito) – é nessa aba que você poderá trabalhar com as regras CSS existentes e testar novas.

O exemplo que vou mostrar agora é referente a mudança de cor do background, um teste simples e rápido. Atualmente o CanalWP utiliza uma imagem como background, mas vamos mudar através do inspetor para que o fundo do site fique na cor preta. Para isso iremos adicionar a regra CSS a seguir na área Styles – confira o código e a imagem:

background: #000;

Dentro de Styles você deve clicar na área element.styles. O cursor para digitar texto irá aparecer e você pode definir as regras que quiser, assim como fiz com a regra CSS que mostrei acima.

Realizando alterações CSS

Neste tutorial estou apenas demonstrando que você pode manipular regras CSS para seu tema WordPress em tempo real. Porém, ressalto que as regras aplicadas via inspetor Google Chrome não são definitivas. Você vai testar pelo inspetor e depois precisa copiá-las para o arquivo styles.css do seu tema. Caso contrário, ao atualizar a página todas as regras testadas serão perdidas. É válido lembrar também, que apenas você – que está manipulando o CSS com o inspetor, pode ver as simulações permitidas por ele.

Para que as regras CSS aplicadas e testadas em seu tema WordPress com o inspetor funcionem para todos os visitantes, você precisa alterar o arquivo CSS do seu tema. Para isso acesse esse arquivo por FTP (wp-content > themes > SEU TEMA > styles.css) ou Dashboard (Aparência >Editor) e aplique as alterações. Lembre-se de que as classes e id’s precisam ser especificadas. No caso do nosso exemplo a classe é container. Então, no arquivo de estilos do CanalWP teríamos de aplicar a regra CSS para mudança de background da seguinte maneira:

div.container{background: #000;}

Sei que as coisas podem estar um tanto confusas em sua mente, mas com a utilização diária do inspetor Google Chrome você vai se acostumar e aprender como manuseá-lo. Explore as abas e funcionalidades do inspetor e veja como é fácil visualizar e entender a estrutura do seu tema WordPress utilizando essa ferramenta.

Se você gostou desse artigo considere compartilhar nas redes sociais. Siga-nos nas redes sociais para acompanhar mais artigos como esse. Se de alguma forma este artigo lhe foi útil deixe seu comentário abaixo para podermos saber a sua opinião.