WordPress Body Class 101: dicas e truques para designers de temas

Você é um aspirante a designer de temas WordPress procurando novas maneiras de usar CSS em seus temas?

Felizmente, o WordPress adiciona automaticamente classes CSS que você pode usar em seus temas. Várias dessas classes CSS são adicionadas automaticamente ao <body> seção de cada página em um site WordPress.

Neste artigo, vamos explicar a classe de corpo do WordPress com dicas e truques para os aspirantes a designers de tema usarem em seus projetos.

Esta é uma visão geral rápida do que você aprenderá neste artigo.

  • O que é a classe de corpo do WordPress?
  • Quando usar a classe corporal
  • Como adicionar classes corporais personalizadas
  • Como adicionar uma classe de corpo usando um plugin
  • Use tags condicionais para adicionar classes corporais personalizadas
  • Mais exemplos de como adicionar classes corporais personalizadas dinamicamente
  • Detecta o navegador do usuário e adiciona uma classe de corpo específica do navegador

O que é WordPress Body Class?

A classe de corpo (body_class) é uma função do WordPress que permite atribuir classes CSS ao elemento de corpo.

A tag de corpo HTML normalmente começa em um arquivo header.php de tema, que é carregado em todas as páginas. Isso permite que você determine dinamicamente qual página um usuário está visualizando e, em seguida, adicione as classes CSS de acordo.

Normalmente, a maioria dos temas e frames iniciais já incluem a função de classe do corpo na tag do corpo do HTML. No entanto, se o seu tema não tiver, você pode adicioná-lo modificando a tag do corpo da seguinte maneira:

<body <?php body_class($class); ?>>

Dependendo do tipo de página exibida, o WordPress adiciona automaticamente as classes apropriadas.

Por exemplo, se você estiver em uma página de arquivo, o WordPress adicionará automaticamente uma classe de arquivo ao elemento de corpo. Isso acontece em quase todas as páginas.

Relacionado: Veja como o WordPress funciona nos bastidores (infográfico)

Aqui estão alguns exemplos de classes comuns que o WordPress pode adicionar, dependendo de qual página é exibida:

.rtl {}
.home {}
.blog {}
.archive {}
.date {}
.search {}
.paged {}
.attachment {}
.error404 {}
.single postid-(id) {}
.attachmentid-(id) {}
.attachment-(mime-type) {}
.author {}
.author-(user_nicename) {}
.category {}
.category-(slug) {}
.tag {}
.tag-(slug) {}
.page-parent {}
.page-child parent-pageid-(id) {}
.page-template page-template-(template file name) {}
.search-results {}
.search-no-results {}
.logged-in {}
.paged-(page number) {}
.single-paged-(page number) {}
.page-paged-(page number) {}
.category-paged-(page number) {}
.tag-paged-(page number) {}
.date-paged-(page number) {}
.author-paged-(page number) {}
.search-paged-(page number) {}

Como você pode ver, tendo um recurso tão poderoso em mãos, você pode personalizar totalmente sua página do WordPress usando apenas CSS. Você pode personalizar páginas de perfil de autor específicas, arquivos baseados em data e muito mais.

Com isso dito, agora vamos dar uma olhada em como e quando você usaria a classe corporal.

Quando usar a classe de corpo do WordPress

Primeiro, você precisa se certificar de que o elemento body do seu tema contém a função da classe body conforme mostrado acima. Nesse caso, ele incluirá automaticamente todas as classes CSS geradas pelo WordPress mencionadas acima.

Leia Também:  Como criar um link curto no WordPress (a maneira mais fácil)

Depois disso, você também pode adicionar suas próprias classes CSS personalizadas ao elemento body. Você pode adicionar essas classes quando precisar delas.

Por exemplo, se você deseja alterar a aparência de artigos de um autor específico arquivado em uma categoria específica.

Como adicionar classes corporais personalizadas

O WordPress tem um filtro que você pode usar para adicionar classes corporais personalizadas quando necessário. Mostraremos como adicionar uma classe de corpo usando o filtro antes de mostrar o cenário de caso de uso específico para que todos possam estar na mesma página.

Como as classes do corpo são específicas do tema, você precisa adicionar o seguinte código ao arquivo functions.php do seu tema.

function my_class_names($classes) {
	// add 'class-name' to the $classes array
	$classes[] = 'wpb-class';
	// return the $classes array
	return $classes;
}

//Now add test class to the filter
add_filter('body_class','my_class_names');

O código acima adicionará uma classe “wpb-class” à tag body em todas as páginas do seu site. Isso não é tão ruim, é?

Agora você pode usar essa classe CSS diretamente na folha de estilo do seu tema. Se você estiver trabalhando em seu próprio site, também poderá adicionar o CSS usando a função CSS personalizada no personalizador de tema.

Adicionar CSS personalizado no personalizador de tema

Adicionar classe corporal usando um plugin WordPress

Se você não estiver trabalhando em um projeto de cliente e não quiser escrever código, este método será mais fácil para você.

A primeira coisa a fazer é instalar e ativar o Classe de corpo personalizada plugue. Para obter mais detalhes, verifique nosso guia passo a passo sobre como instalar um plugin do WordPress.

Após a ativação, você deve visitar Configurações »Classe de corpo personalizada página. A partir daqui, você pode definir as configurações do plugin.

Configurações personalizadas de classe corporal

Você pode selecionar os tipos de postagens em que deseja habilitar o recurso de classe corporal e quem pode acessá-lo. Não se esqueça de clicar no botão Salvar alterações para armazenar suas configurações.

Você pode então prosseguir para editar qualquer postagem ou página em seu site WordPress. Na tela de edição de postagem, você encontrará uma nova metacaixa na coluna da direita chamada ‘Aulas de postagem’.

Adicionar classes corporais a uma postagem no WordPress

Clique para adicionar suas classes CSS personalizadas. Você pode adicionar várias classes separadas por um espaço.

Quando terminar, você pode simplesmente salvar ou publicar sua postagem. O plug-in agora adicionará suas classes CSS personalizadas à classe do corpo para aquele post ou página em particular.

Leia Também:  Como indexar o novo conteúdo do WordPress mais rápido no Google

Usando rótulos condicionais com a classe Body

O verdadeiro poder da função body_class vem quando ela é usada com tags condicionais.

Essas tags condicionais são tipos de dados verdadeiros ou falsos que verificam se uma condição é verdadeira ou falsa no WordPress. Por exemplo, a tag condicional is_home Verifique se a página exibida atualmente é a página inicial ou não.

Isso permite que os desenvolvedores de tema verifiquem se uma condição é verdadeira ou falsa antes de adicionar uma classe CSS personalizada à função body_class.

Vamos dar uma olhada em alguns exemplos de uso de tags condicionais para adicionar classes personalizadas à classe do corpo.

Suponha que você queira projetar sua página inicial de forma diferente para usuários que estão logados com a função de usuário de autor. Enquanto o WordPress gera automaticamente um .home Y .logged-in classe, ele não detecta a função do usuário nem o adiciona como uma classe.

Agora, este é um cenário onde você pode usar as tags condicionais com algum código personalizado para adicionar dinamicamente uma classe personalizada à classe do corpo.

Para fazer isso, você adicionará o seguinte código ao arquivo functions.php do seu tema.

function wpb_loggedin_user_role_class($classes) { 

// let's check if it is homepage
if ( is_home() ) {

// Now let's check if the logged in user has author user role.  
$user = wp_get_current_user();
if ( in_array( 'author', (array) $user->roles ) ) {
    //The user has the "author" role
    // Add user role to the body class
    $classes[] = 'author';
    // Return the classes array
    return $classes;      
} 
} else { 
// if it is not homepage, then just return default classes
return $classes; 
}
} 

add_filter('body_class', 'wpb_loggedin_user_role_class');

Agora, vamos dar uma olhada em outro exemplo útil. Desta vez, vamos verificar se a página mostrada é uma prévia de um rascunho do WordPress.

Para fazer isso, usaremos a tag condicional is_preview e, em seguida, adicionaremos nossa classe CSS personalizada.

function add_preview_class($classes) { 
if ( is_preview() )  {
$classes[] = 'preview-mode';
return $classes;
}
return $classes; 
}
add_filter('body_class','add_preview_class');

Agora, adicionaremos o seguinte CSS à folha de estilo do nosso tema para usar a nova classe CSS personalizada que acabamos de adicionar.

.preview-mode .site-header:before { 
content:'preview mode';
color:#FFF;
background-color:#ff0000;
}

Era assim que parecia em nosso site de demonstração:

Classe CSS do modo de visualização personalizada adicionada à classe de corpo

Você pode querer verificar a lista completa de rótulos condicionais que você pode usar no WordPress. Isso fornecerá a você um conjunto útil de tags prontas para o seu código.

Outros exemplos de adição dinâmica de classes corporais personalizadas

Além de tags condicionais, você também pode usar outras técnicas para obter informações do banco de dados WordPress e criar classes CSS personalizadas para a classe de corpo.

Adicione nomes de categorias à classe do corpo de uma única página de postagem

Leia Também:  Baixe 10 plug-ins grátis para acelerar seu site WordPress

Digamos que você queira personalizar a aparência de postagens individuais com base na categoria em que foram arquivadas. Você pode usar a classe corporal para conseguir isso

Primeiro, você precisa adicionar nomes de categorias como classes CSS em páginas de postagem única. Para fazer isso, adicione o seguinte código ao arquivo functions.php do seu tema:

// add category nicenames in body class
function category_id_class($classes) {
    global $post;
    foreach((get_the_category($post->ID)) as $category)
        $classes[] = $category->category_nicename;
    return $classes;
}
 
add_filter('body_class', 'category_id_class');

O código acima adicionará a classe de categoria em sua classe de corpo para páginas de postagem única. Você pode então usar classes CSS para estilizá-lo como quiser.

Adicionar slug de página à classe de corpo

Cole o seguinte código no arquivo functions.php do seu tema:

//Page Slug Body Class
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' );

Detecção de navegador e classes corporais específicas do navegador

Às vezes, você pode encontrar problemas em que seu tema pode precisar de CSS adicional para um navegador específico.

Agora, a boa notícia é que o WordPress detecta automaticamente o navegador ao carregar e, em seguida, armazena temporariamente essas informações como uma variável global.

Você só precisa verificar se o WordPress detectou um navegador específico e, em seguida, adicioná-lo como uma classe CSS personalizada.

Basta copiar e colar o seguinte código no arquivo functions.php do seu tema:

function wpb_browser_body_class($classes) { 
	global $is_iphone, $is_chrome, $is_safari, $is_NS4, $is_opera, $is_macIE, $is_winIE, $is_gecko, $is_lynx, $is_IE, $is_edge;

if ($is_iphone)    $classes[] ='iphone-safari';
elseif ($is_chrome)    $classes[] ='google-chrome';
elseif ($is_safari)    $classes[] ='safari';
elseif ($is_NS4)    $classes[] ='netscape';
elseif ($is_opera)    $classes[] ='opera';
elseif ($is_macIE)    $classes[] ='mac-ie';
elseif ($is_winIE)    $classes[] ='windows-ie';
elseif ($is_gecko)    $classes[] ='firefox';
elseif ($is_lynx)    $classes[] ='lynx';
elseif ($is_IE)      $classes[] ='internet-explorer';
elseif ($is_edge)    $classes[] ='ms-edge';
else $classes[] = 'unknown';
	
return $classes;
}
add_filter('body_class','wpb_browser_body_class');

Então você pode usar classes como:

.ms-edge .navigation {some item goes here}

Se for uma pequena margem ou problema de preenchimento, esta é uma maneira bastante fácil de consertar.

Definitivamente, existem muitos outros cenários em que o uso da função body_class pode evitar que você tenha que escrever longas linhas de código. Por exemplo, se você estiver usando uma estrutura de tema como Genesis, você pode usá-lo para adicionar classes personalizadas em seu tema filho.

Você pode usar a função body_class para adicionar classes CSS para layouts de página de largura total, conteúdo da barra lateral, cabeçalho e rodapé, etc.

Esperamos que este artigo tenha ajudado você a aprender como usar a classe de corpo do WordPress em seus temas. Você também pode querer verificar nosso artigo sobre como estilizar cada postagem do WordPress de forma diferente e nossa comparação dos melhores plug-ins de construtor de páginas do WordPress.

Compartilhe este Link:

Compartilhar no facebook
Compartilhar no twitter
Compartilhar no linkedin
Compartilhar no pinterest
Compartilhar no email
Compartilhar no whatsapp
Compartilhar no telegram

Deixe um comentário

Receba nossos preços
e condções direto no seu email

Por favor, preencha os campos abaixo:

Preferência de contato: