Como Adicionar o Slug da Página à Classe Body no WordPress

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

É o que queremos dizer: você provavelmente já passou por isso antes – você quer estilizar apenas uma página de forma diferente do resto do seu site. Sem o slug da página na classe do corpo, você acaba lutando com seletores CSS complexos ou criando folhas de estilo separadas.

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

Neste artigo, mostraremos como adicionar um slug de página na classe do corpo dos seus temas WordPress. Usamos este método em tudo, desde sites de negócios simples até lojas de comércio eletrônico complexas.

Por que adicionar um slug de página na classe do corpo do seu tema?

Se você deseja personalizar páginas específicas do seu site e quer identificar corretamente a página, adicionar um slug de página na classe do corpo do seu tema é muito útil.

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

Além disso, você pode realizar 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 postagem específica 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 de corpo do seu tema WordPress.

Adicionando um Slug de Página ao Seu Tema WordPress

Para ajudá-lo a adicionar o URL da sua página na classe de corpo do seu tema 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 indo ao Editor de Temas do WordPress (Editor de Código). No entanto, editar diretamente os arquivos do tema é muito arriscado.

Isso ocorre porque qualquer erro ao adicionar o código pode quebrar seu site e impedi-lo de fazer login no seu painel do WordPress.

Uma maneira muito mais simples de adicionar o código à classe de corpo do seu tema é usando um plugin do WordPress como o WPCode. Nós o usamos em vários sites, veja nossa análise completa do WPCode para saber mais.

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

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

Na verdade, adicionar um slug de página à classe do corpo está disponível como um trecho pré-fabricado na biblioteca WPCode. Este é o método mais fácil de seguir.

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

Assim que o plugin for ativado, um novo item de menu chamado 'Code Snippets' será adicionado à sua barra de administração do WordPress. Clicar nele o levará à página onde você gerenciará todos os seus trechos de código.

Para adicionar seu primeiro trecho de código, clique no botão ‘Adicionar Novo’.

Isso abrirá a página ‘Adicionar Trecho’, onde você pode escolher um trecho de código da biblioteca pré-fabricada.

Simplesmente procure pelo trecho ‘Add the Page Slug to Body Class’ e, quando encontrá-lo, clique no botão ‘Usar trecho’.

Agora, o WPCode adicionará o código automaticamente e definirá o método de inserção correto.

Tudo o que você precisa fazer é alternar o interruptor de ‘Inativo’ para ‘Ativo’. Por fim, clique no botão ‘Atualizar’ na parte superior da página.

Você começará a ver uma nova classe de corpo sendo exibida 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 seus widgets de barra lateral, mas apenas em uma página com o slug “education”. Nesse caso, você poderia adicionar CSS assim:

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

Para mais detalhes, você pode ver nosso guia sobre como adicionar CSS personalizado ao WordPress.

Adicionando o Código Personalizado Manualmente

Se você preferir adicionar o código personalizado acima manualmente, veja como fazer isso.

Primeiro, navegue até a página Trechos de Código » Adicionar Trecho no seu painel do WordPress.

A partir daí, vá para a opção ‘Adicionar Seu Código Personalizado (Novo Trecho)’ e clique no botão ‘+ Adicionar Trecho Personalizado’.

Em seguida, você precisa selecionar um tipo de código na lista de opções que aparecem na tela. Para este tutorial, escolha ‘Trecho PHP’.

Agora, dê um título ao seu trecho de código, que é apenas para sua referência e pode ser qualquer coisa para ajudá-lo a identificar o código.

Depois disso, basta copiar e colar o código acima na caixa 'Code Preview'.

Em seguida, role para baixo até a seção 'Insertion'. Aqui, você pode escolher o método 'Auto Insert' para inserir e executar automaticamente o código em um local específico do WordPress, como o admin, frontend e muito mais.

Se você não tiver certeza, mantenha a opção padrão 'Run Everywhere'.

Ou, você pode escolher o método 'Shortcode'. Com este método, o trecho não é inserido automaticamente. Você receberá um shortcode que você pode inserir manualmente em qualquer lugar do seu site.

Quando estiver pronto, alterne o interruptor de 'Inactive' para 'Active' e clique no botão 'Save Snippet' no canto superior direito.

Para mais detalhes, você pode consultar nosso guia sobre como adicionar código personalizado no WordPress.

Esperamos que este artigo tenha ajudado você a aprender como adicionar um slug de página na classe body do seu tema WordPress. Você também pode querer consultar nosso guia sobre classe body do WordPress e como escolher o melhor software de design.

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