Se você é um aspirante a designer de temas para WordPress, dominar o CSS é fundamental para liberar maior controle, personalização e eficiência em seu fluxo de trabalho.
Felizmente, o WordPress adiciona automaticamente classes CSS que você pode utilizar em seus temas. Várias dessas classes CSS são adicionadas automaticamente à seção <body> de cada página de um site do WordPress.
Neste artigo, explicaremos a classe body do WordPress. Também compartilharemos dicas e truques para usar as classes body do WordPress, com base em anos de experiência em desenvolvimento de temas, para ajudá-lo a aprimorar seus projetos.
Aqui está uma rápida visão geral do que você aprenderá neste artigo.
- What is WordPress Body Class?
- When to Use the WordPress Body Class
- How to Add Custom Body Classes
- Adding Body Class Using a WordPress Plugin
- Using Conditional Tags with the Body Class
- Other Examples of Dynamically Adding Custom Body Classes
- Browser Detection and Browser Specific Body Classes
- Expert Guides on WordPress Theme Design
O que é o WordPress Body Class?
Body class (body_class) é uma função do WordPress que permite atribuir classes CSS ao elemento body.
A tag HTML body normalmente começa no arquivo header.php de um tema, que é carregado em todas as páginas. Isso permite que você descubra dinamicamente qual página o usuário está visualizando e, em seguida, adicione as classes CSS de acordo.
Normalmente, a maioria dos temas e estruturas para iniciantes já inclui a função de classe body dentro da tag body do HTML. Entretanto, se o seu tema não a tiver, você poderá adicioná-la modificando a tag body da seguinte forma:
<body <?php body_class($class); ?>>
Dependendo do tipo de página que está sendo exibida, o WordPress adiciona automaticamente as classes apropriadas.
Por exemplo, se você estiver em uma página de arquivo, o WordPress adicionará automaticamente a classe de arquivo ao elemento body. Ele faz isso em praticamente 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 da página que está sendo 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, ao ter em mãos um recurso tão poderoso, é possível personalizar totalmente sua página do WordPress usando apenas CSS. Você pode personalizar páginas específicas de perfil de autor, arquivos baseados em datas etc.
Dito isso, agora vamos dar uma olhada em como e quando você usaria a classe body.
Quando usar a classe de corpo do WordPress
Primeiro, você precisa ter certeza de que o elemento body do seu tema contém a função body class, conforme mostrado acima. Se isso acontecer, ele incluirá automaticamente todas as classes CSS geradas pelo WordPress mencionadas acima.
Depois disso, você também poderá adicionar suas próprias classes CSS personalizadas ao elemento body. Você pode adicionar essas classes sempre que precisar delas.
Por exemplo, se você quiser alterar a aparência dos artigos de um autor específico arquivados em uma categoria específica.
Como adicionar classes corporais personalizadas
O WordPress tem um filtro que você pode utilizar para adicionar classes de corpo 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 de corpo são específicas do tema, você precisaria adicionar o seguinte código ao arquivo functions.php do seu tema ou em um plug-in de trechos de código.
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.
Recomendamos adicionar esse código com o WPCode, o melhor plug-in de snippets de código do mercado. Ele torna seguro e fácil adicionar códigos personalizados no WordPress sem editar o arquivo functions.php do seu tema.
Primeiro, você precisa instalar e ativar o plug-in gratuito WPCode. Se precisar de instruções, consulte nosso guia sobre como instalar um plug-in do WordPress.
Depois que o plug-in estiver ativado, vá para Code Snippets “ Add Snippet no painel do WordPress. Em seguida, localize a opção “Add Your Custom Code (New Snippet)” e clique no botão “Use snippet” abaixo dela.
A partir daí, você precisa escolher “PHP Snippet” como o tipo de código na lista de opções que aparece na tela.
Em seguida, adicione um título para seu snippet e cole o código acima na caixa “Code Preview” (Visualização de código).
Depois disso, basta alternar a chave de “Inativo” para “Ativo” e clicar no botão “Salvar snippet”.
Agora você pode utilizar essa classe CSS diretamente na folha de estilo do seu tema. Se estiver trabalhando em seu próprio site, também poderá adicionar o CSS usando o recurso CSS personalizado no personalizador de temas do WordPress.
Para obter mais detalhes, consulte nosso guia sobre como adicionar facilmente CSS personalizado ao seu site WordPress.
Adição de classe de corpo usando um plug-in do WordPress
Se você não estiver trabalhando em um projeto de cliente e não quiser escrever código, esse método será mais fácil para você.
A primeira coisa que você precisa fazer é instalar e ativar o plug-in Custom Body Class. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.
Após a ativação, você precisa visitar a página Settings ” Custom Body Class. A partir daí, você pode definir as configurações do plug-in.
Você pode selecionar os tipos de postagem em que deseja ativar o recurso de classe corporal e quem pode acessá-lo. Não se esqueça de clicar no botão “Save Changes” (Salvar alterações) para armazenar suas configurações.
Em seguida, você pode editar qualquer post ou página em seu site WordPress. Na tela de edição do post, você encontrará uma nova meta-caixa na coluna da direita chamada “Post Classes”.
Clique para adicionar suas classes CSS personalizadas. Você pode adicionar várias classes separadas por um espaço.
Quando terminar, basta salvar ou publicar sua postagem. O plug-in agora adicionará suas classes CSS personalizadas à classe body desse post ou página específica.
Uso de tags condicionais com a classe Body
O verdadeiro poder da função body_class surge quando ela é usada com as 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 verifica se a página exibida no momento é a página inicial ou não.
Isso permite que os desenvolvedores de temas 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 body.
Digamos que você queira estilizar sua página inicial de forma diferente para usuários conectados com a função de usuário autor. Embora o WordPress gere automaticamente uma classe .home e .logged-in, ele não detecta a função do usuário nem a adiciona como uma classe.
Agora, esse é um cenário em que você pode usar as tags condicionais com algum código personalizado para adicionar dinamicamente uma classe personalizada à classe body.
Para isso, você adicionará o seguinte código ao arquivo functions.php do seu tema ou ao plug-in de snippets de código.
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 exibida é uma visualização de um rascunho do WordPress.
Para fazer isso, usaremos a tag condicional is_preview e 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 utilizar a nova classe CSS personalizada que acabamos de adicionar.
.preview-mode .site-header:before {
content:'preview mode';
color:#FFF;
background-color:#ff0000;
}
Esta é a aparência em nosso site de demonstração:
Talvez você queira dar uma olhada na lista completa de tags condicionais que podem ser usadas no WordPress. Isso lhe dará um conjunto prático de tags prontas para usar em seu código.
Outros exemplos de adição dinâmica de classes de corpo personalizadas
Além das tags condicionais, você também pode usar outras técnicas para obter informações do banco de dados do WordPress e criar classes CSS personalizadas para a classe body.
Adição de nomes de categorias à classe do corpo de uma página de postagem única
Digamos que você queira personalizar a aparência de posts individuais com base na categoria em que estão arquivados. Para isso, você pode usar a classe body
Primeiro, você precisa adicionar nomes de categorias como classe CSS em páginas de postagem única. Para fazer isso, adicione o seguinte código ao arquivo functions.php do seu tema ou a um plug-in de trechos de código como o WPCode:
// 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. Em seguida, você pode usar classes CSS para estilizá-la como desejar.
Adição do slug da página à classe body
Cole o seguinte código no arquivo functions.php do seu tema ou em um plug-in de snippets de código:
//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' );
Novamente, recomendamos adicionar esse código no WordPress usando um plugin de trechos de código como o WPCode. Dessa forma, você não precisará se preocupar com a quebra do seu site.
Comece instalando e ativando o plug-in gratuito WPCode. Se precisar de ajuda, siga este guia sobre como instalar um plug-in do WordPress.
Depois que o plug-in for ativado, acesse Code Snippets “ Add Snippet no painel do WordPress. Em seguida, clique no botão “Use snippet” abaixo da opção “Add Your Custom Code (New Snippet)”.
Em seguida, selecione “PHP Snippet” como o tipo de código.
Em seguida, basta adicionar um título para seu snippet de código e colar o código acima na caixa “Code Preview” (Visualização de código).
Por fim, alterne a chave de “Inativo” para “Ativo” e clique no botão “Salvar snippet”.
Detecção de navegador e classes de corpo específicas do navegador
Às vezes, você pode se deparar com 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 ser carregado e 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 ou no plug-in de trechos de código:
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');
Você pode então usar classes como:
.ms-edge .navigation {some item goes here}
Se for um pequeno problema de preenchimento ou margem, essa é uma maneira bastante fácil de corrigi-lo.
Definitivamente, há muitos outros cenários em que o uso da função body_class pode evitar que você escreva longas linhas de código. Por exemplo, se você estiver usando uma estrutura de tema como o Genesis, poderá usá-la 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és, etc.
Guias especializados sobre design de temas para WordPress
Procurando mais tutoriais? Confira nossos outros guias sobre design de temas no WordPress:
- Como adicionar um efeito Parallax a qualquer tema do WordPress
- Como editar o rodapé no WordPress (4 maneiras)
- Como adicionar flocos de neve caindo em seu blog do WordPress
- Como atualizar um tema do WordPress sem perder a personalização
- Como obter feedback sobre o design do site no WordPress
Esperamos que este artigo tenha ajudado você a aprender como usar a classe body do WordPress em seus temas. Talvez você também queira ver nosso artigo sobre como estilizar cada post do WordPress de forma diferente e nossa comparação dos melhores plug-ins de construtor de páginas do WordPress.
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.
jenny
plsss give me example outwitting a crocodile theme plsssssssss
Corrinda
Thank you after reading a number of articles regarding the body-class this is the one the finally sunk in.
Got it working on individual pages and on category pages this is great. The use cases are what made the difference for me.
Editorial Staff
Sweet. Glad to be able to help.
Administrador
Yolanda
Great tips! I’m trying to figure out how to add the menu class (the one you can enter in the admin) to body_class:
[pre]
/** Add nav menu css class to body class */
function add_nav_menu_css( $classes ) {
$classes[] = ‘menu-class-from-admin’;
return $classes;
}
add_filter( ‘body_class’, ‘add_nav_menu_css’ );
[/pre]
Seth Burleigh
Great tips. I”m trying to do this, and when inserting “page-template page-template-(template file name)” into my header file such that I have:
<body >
And I then modify my CSS to include: .page-template-home_corechella
I am left with a completely blank page. Nothing. What am I doing wrong? Thanks!
Editorial Staff
The page-templates are added in the homepage automatically as long as you have the body_class tags. Would have to see the file to see what you are doing wrong. Use a third party service like pastebin, and then paste the link here.
Administrador
Seth
Ok, thank you very much!
I’ve changed the approach slightly since my post (now using instead of page template), but a similar problem is happening – the correct body CSS (body.corechella) is not showing. The original body class is taking priority.
Corechella Page template (http://dev.corebaby.org/corechella-home/) – http://pastebin.com/embed_js.php?i=8L6rhESr
Corechella header.php file – http://pastebin.com/embed_js.php?i=n2Sn4jUJ
CSS (the new body class is at the very bottom) – http://pastebin.com/embed_js.php?i=4U6d09cQ”
Seth
Editorial Staff
In your header.php, you have to keep the body class like this:
1-click Use in WordPress
In your CSS, just use .corchella instead of body.corchella
Michael
Great write up, thanks
Editorial Staff
Glad you found it helpful
Administrador
Rasha
i have news page that get posts using category.php , i want to give it specific class so i can make the content wide and without the sidebar , how i can do that ?
Vajrasar
Indeed a good writeup and very informative. Just a question – For example if I add Browser Specific Body Class today and after few days I need to apply Page Class in Body Slug. Then will the settings/css that I did with Browser Specific Body class will get ruined or not?
Editorial Staff
No it will not get ruined. It can be overridden depending on how your CSS is written.
Administrador