Você já quis editar temporariamente uma página da web para ver como ficaria com cores, fontes e estilos específicos? Isso é possível com uma ferramenta que já existe em seu navegador chamada " Inspecione o elemento ". Este é um sonho tornado realidade para todos os usuários que gostam de manipular CSS.

Neste tutorial, vamos guiá-lo pelos fundamentos da inspeção de itens e como usá-la com seu site WordPress.

Inspeção de elementos do WordPress

O que é uma ferramenta de inspeção de itens?

Navegadores modernos, como Google Chrome e Mozilla Firefox, criaram ferramentas que permitem aos desenvolvedores da Web depurar erros. Essas ferramentas exibem HTML, CSS e JavaScript para uma página e mostram como o código é executado.

O uso da ferramenta " Inspect Element Você pode editar o código HTML, CSS ou JavaScript de qualquer página da Web e ver suas alterações ao vivo (apenas no seu computador).

Para um proprietário de um site da Web, essas ferramentas podem ajudá-lo a visualizar a aparência de um determinado estilo sem realmente aplicar as alterações para todos.

Para os escritores, essas ferramentas são fantásticas porque você pode facilmente alterar as informações de identificação pessoal enquanto tira suas capturas de tela, eliminando a necessidade de realmente esmaecer os elementos.

Para os agentes de suporte, essa é uma ótima maneira de identificar o erro que pode estar fazendo com que suas galerias não carreguem ou impedindo que funcionem corretamente.

Estamos apenas arranhando a superfície dos casos de uso, porque a ferramenta " Inspecione o elemento É realmente poderoso.

Neste artigo, focaremos na ferramenta " Inspecione o elemento Do Google Chrome, porque é o nosso navegador preferido. O Firefox tem suas próprias ferramentas de desenvolvimento que também podem ser chamadas selecionando o menu " inspecionar elemento ".

Lançamento da ferramenta "Inspecionar elemento" e localização do código

Você pode executar essa ferramenta pressionando CTRL + Shift + I no seu teclado. Como alternativa, você pode clicar em qualquer lugar em uma página da web e selecionar Inspecionar o item de menu do navegador.

inpection de código blogpascher

A janela do seu navegador será dividida em duas e a janela inferior mostrará o código fonte da página da web.

A janela da ferramenta do desenvolvedor é dividida em duas janelas. À sua esquerda, você verá o código HTML da página. No painel direito, você verá as regras CSS.

inspeção de código HTML-CSS

Ao mover o mouse sobre a fonte do código HTML, você verá a área destacada destacada na página da web. Você também observará as regras CSS para esse elemento em questão.

Regras CSS do elemento HTML

Você também pode colocar o ponteiro do mouse sobre um item da página da Web, clicar com o botão direito do mouse e selecionar " inspecionar o elemento " O item em que você clicou será destacado no código-fonte.

Desenvolvedor de código e depurador de desenvolvedor

HTML e CSS na janela de inspeção do elemento são editáveis. Você pode clicar duas vezes no código-fonte HTML e editar o código como desejar.

modificar HTML

Você também pode clicar duas vezes e editar os atributos dos estilos no painel CSS. Para adicionar uma regra, clique no ícone de adição no painel de estilos na parte superior.

adicione uma nova regra css

Quando você faz alterações no código CSS ou HTML, essas alterações são refletidas instantaneamente no seu navegador.

alterações de código viver

Observe que nem todas as alterações feitas aqui são salvas em qualquer lugar. A ferramenta Inspecione o elemento É uma ferramenta de depuração e não salva as alterações em um arquivo no servidor. Isso significa que, se você atualizar a página, todas as suas alterações serão perdidas.

Para realmente fazer as alterações, você precisará modificar o estilo do seu tema WordPress ou um modelo para adicionar as alterações que deseja salvar.

Antes de começar a editar seu tema WordPress existente usando a ferramenta " Inspecione o elemento Salve todas as alterações criando um tema filho.

Como encontrar erros no WordPress

A ferramenta Inspecione o elemento Tem uma área chamada " cônsul O que mostra todos os erros que existem no seu site. Antes de tentar depurar um erro ou pedir ajuda aos autores de um tema ou plugin, sempre vale a pena procurar aqui para ver o que está errado.

console JavaScript

Por exemplo, se você fosse um cliente OptinMonster Quem se pergunta por que a opção dele não carrega, é possível encontrar facilmente o problema que indica que o " gole de sua página não corresponde ".

Se sua barra de compartilhamento não estava funcionando corretamente, você pode ver que há um erro de JavaScript causando isso.

Isso é tudo para este tutorial, espero que você possa personalizar melhor seu blog WordPress. Sinta-se à vontade para compartilhar este tutorial com seus amigos.