Como adicionar a lesma da página à classe do corpo no WordPress

Trabalhamos em muitos sites do WordPress ao longo dos anos, e um truque de personalização ao qual sempre voltamos é adicionar o slug da página à classe body. É uma coisa tão simples, mas que faz uma diferença enorme quando se trata de flexibilidade de design.

A adição de um slug de página no tema do WordPress permite que você faça todas as personalizações que desejar sem complicações. Você pode alterar facilmente as cores, as fontes e outros itens em páginas individuais sem afetar o restante do site.

Neste artigo, mostraremos como adicionar um slug de página na classe body de seus temas do WordPress.

Por que adicionar um Slug de página na classe Body em seu tema?

Se estiver procurando personalizar páginas específicas em seu site e quiser identificar corretamente a página, é muito útil adicionar um slug de página na classe body do seu tema.

Por padrão, seu site WordPress mostrará apenas as classes de ID da postagem, o que pode ser complicado quando se trata de reconhecer a página correta. Um slug de página mostra o URL da publicação do blog, facilitando a personalização da página.

Além disso, você pode fazer diferentes personalizações em suas páginas usando uma classe de corpo de slug de página. Por exemplo, você pode alterar a fonte e as cores de uma determinada postagem ou destacar um botão de chamada para ação em uma página de destino específica.

Dito isso, vamos ver como você pode adicionar o slug da página na classe body do seu tema do WordPress.

Adição de um slug de página em seu tema do WordPress

Para ajudá-lo a adicionar o URL da sua página na classe body do seu tema do WordPress, você pode inserir o seguinte código no arquivo functions.php do seu tema.

function add_slug_body_class( $classes ) {
global $post;
if ( isset( $post ) ) {
$classes[] = $post->post_type . '-' . $post->post_name;
}
return $classes;
}
add_filter( 'body_class', 'add_slug_body_class' );

Você pode acessar os arquivos functions.php do seu tema acessando o Editor de temas do WordPress (Editor de código). Entretanto, a edição direta dos arquivos do tema é muito arriscada.

Isso se deve ao fato de que qualquer erro ao adicionar o código pode danificar seu site e impedir que você faça login no painel do WordPress.

Uma maneira muito mais simples de adicionar o código à classe body do seu tema é usar um plug-in do WordPress como o WPCode.

Com o WPCode, você pode adicionar facilmente códigos ao seu site em questão de minutos e sem erros. Além disso, ele também garante que seu código não seja removido se você atualizar ou alterar o tema no futuro.

Ele também vem com uma biblioteca de snippets de código criados por especialistas que você pode instalar com um clique. Portanto, você não precisa de nenhuma habilidade de codificação para fazer personalizações avançadas do WordPress.

Primeiro, você precisará instalar e ativar o plugin gratuito WPCode em seu site. Para obter instruções passo a passo, consulte nosso guia sobre como instalar um plug-in do WordPress.

Depois que o plug-in for ativado, um novo item de menu chamado “Code Snippets” será adicionado à barra de administração do WordPress. Ao clicar nele, você será levado à página em que gerenciará todos os seus snippets de código.

Para adicionar seu primeiro snippet de código personalizado, clique no botão “Add New” (Adicionar novo).

Isso abrirá a página “Add Snippet”, na qual você poderá escolher um trecho de código da biblioteca predefinida ou adicionar seu código personalizado.

Para adicionar seu código personalizado, navegue até a opção “Add Your Custom Code (New Snippet)” (Adicionar seu código personalizado (novo snippet)) e clique no botão “Use snippet” (Usar snippet).

Agora, dê um título ao seu snippet de código e insira o código na caixa “Code Preview” (Visualização de código). Você também precisa selecionar “PHP Snippet” como o tipo de código na lista suspensa à direita.

Em seguida, role a tela para baixo até a seção “Inserção”. Aqui, você pode escolher o método “Auto Insert” (Inserção automática) para inserir e executar automaticamente o código em um local específico do WordPress, como o administrador, o front-end e outros. Se não tiver certeza, mantenha a opção padrão “Run Everywhere” (Executar em todos os lugares).

Ou você pode escolher o método “Shortcode”. Com esse método, o snippet não é inserido automaticamente. Você receberá um shortcode que poderá inserir manualmente em qualquer lugar do seu site.

Quando estiver pronto, alterne a chave de “Inativo” para “Ativo” e clique no botão “Salvar snippet” no canto superior direito.

Para obter mais detalhes, consulte nosso guia sobre como adicionar código personalizado no WordPress.

Agora você começará a ver uma nova classe de corpo sendo gerada assim: page-{slug}. Use essa classe para substituir seus estilos padrão e personalizar elementos para páginas específicas.

Por exemplo, digamos que você queira estilizar os widgets da barra lateral, mas somente em uma página que tenha o slug “educação”. Nesse caso, você poderia adicionar CSS como este:

#sidebar .widgets{background: #fff; color: #000;}
.page-education #sidebar .widgets{background: #000; color: #fff;}

Para obter mais detalhes, consulte nosso guia sobre como adicionar CSS personalizado ao WordPress.

Esperamos que este artigo tenha ajudado você a aprender como adicionar um slug de página na classe body do seu tema do WordPress. Talvez você também queira dar uma olhada em nosso guia sobre a classe body do WordPress e como escolher o melhor software de design.

Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.