Você é um aspirante a designer de temas do WordPress e está procurando novas maneiras de usar CSS em seus temas?
Felizmente, o WordPress adiciona automaticamente classes CSS que você pode utilizar em seus temas. Várias dessas classes CSS são adicionadas automaticamente à <body>seção de cada página em um site WordPress.
Neste artigo, explicaremos a classe de corpo do WordPress com dicas e truques para aspirantes a designers de temas para utilizá-los em seus projetos.
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 carrega em todas as páginas. Isso permite que você descubra qual página um usuário está visualizando dinamicamente e, em seguida, adicione as classes CSS de acordo.
Normalmente, a maioria dos temas e estruturas iniciais já incluem a função da classe body dentro da tag body HTML. No entanto, se o seu tema não tiver, você pode adicioná-lo modificando a tag do corpo da seguinte maneira:
1 | <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 a classe de arquivo ao elemento do corpo. Ele faz isso para quase todas as páginas.
Relacionado: Veja como WordPress funciona nos bastidores (infográfico)
Aqui estão alguns exemplos de classes comuns que o WordPress pode adicionar, dependendo de qual página está sendo exibida:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | .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, por ter 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ífico , arquivos com base em data, etc.
Dito isso, agora vamos dar uma olhada em como e quando você usaria a classe corporal.
Quando usar o WordPress Body Class
Primeiro, você precisa se certificar de que o elemento do corpo do seu tema contém a função da classe do corpo, conforme mostrado acima. Em caso afirmativo, 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.
Por exemplo, se você deseja alterar a aparência de 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 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 .
1 2 3 4 5 6 7 8 9 | 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 filteradd_filter('body_class','my_class_names'); |
O código acima irá adicionar uma classe “wpb-class” à tag body em cada página do seu site. Isso não é tão ruim, certo?
Agora você pode utilizar essa classe CSS diretamente na folha de estilo do seu tema. Se estiver trabalhando em seu próprio site, você também pode adicionar o CSS usando o recurso CSS personalizado no personalizador de tema.
Adicionando classe corporal usando um plug-in WordPress
Se você não estiver trabalhando em um projeto de cliente e não quiser escrever código, este método seria mais fácil para você.
A primeira coisa que você precisa fazer é instalar e ativar o plugin Custom Body Class .
Após a ativação, você precisa visitar a página Configurações »Classe de carroceria personalizada . A partir daqui, você pode definir as configurações do plugin.
Você pode selecionar os tipos de postes onde 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.
Em seguida, você pode 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’.
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.
Usando tags condicionais com a Body Class
O verdadeiro poder da função body_class vem 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_homeverifica 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.
Digamos que você queira estilizar sua página inicial de maneira diferente para usuários conectados com afunção de usuário de autor . Embora o WordPress gere automaticamente uma classe .homee .logged-in, ele não detecta a função do usuário nem a 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 conseguir isso, você adicionará o seguinte código ao arquivo functions.php do seu tema.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | function wpb_loggedin_user_role_class($classes) { // let's check if it is homepageif ( 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 classesreturn $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 prévia de um rascunho do WordPress.
Para fazer isso, usaremos a tag condicional is_preview e, em seguida, adicionaremos nossa classe CSS personalizada.
1 2 3 4 5 6 7 8 | 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.
1 2 3 4 5 | .preview-mode .site-header:before { content:'preview mode';color:#FFF;background-color:#ff0000;} |
Era assim que parecia em nosso site de demonstração:
Você pode querer verificar a lista completa de tags condicionais que você pode usar no WordPress. Isso lhe dará um conjunto útil de tags prontas para uso 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 buscar informações do banco de dados WordPress e criar classes CSS personalizadas para a classe de corpo.
Adicionar nomes de categorias à classe do corpo de uma única página de postagem
Digamos que você queira personalizar a aparência de postagens únicas com base na categoria em que estão inseridas. Você pode usar a classe corporal para fazer isso
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:
1 2 3 4 5 6 7 8 9 | // add category nicenames in body classfunction 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 desejar.
Adicionando slug de página à classe de corpo
Cole o seguinte código no arquivo functions.php do seu tema:
1 2 3 4 5 6 7 8 9 | //Page Slug Body Classfunction 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 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 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.
Simplesmente, copie e cole o seguinte código no arquivo functions.php do seu tema:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | 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:
1 | .ms-edge .navigation {some item goes here} |
Se for um pequeno preenchimento ou problema de margem, esta é uma maneira bastante fácil de consertá-lo.
Definitivamente, existem 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 ao 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.
Esperamos que este artigo tenha ajudado você a aprender como usar a classe de corpo do WordPress em seus temas.
