Artigos TecnologiaNOTICIA TECNOLOGIA

Adicionando à Body Class no WordPress

Neste breve tutorial, veremos a classe de corpo do WordPress e como podemos manipulá-la usando chamadas de API básicas.Especificamente, abordamos a adição de classes de corpo, remoção de classes de corpo, adição de classes de corpo condicionalmente e alguns casos de uso.

A body class: para que ela pode ser usada?

A  body classe no WordPress é uma classe ou série de classes que são aplicadas ao elemento do corpo do HTML. Isso é útil para aplicar estilos exclusivos a diferentes áreas de um site WordPress, pois as  body classes podem ser adicionadas condicionalmente.

Existem alguns métodos disponíveis para adicionarmos novas classes corporais no WordPress. Este tutorial irá cobrir a adição da classe body dentro de um tema (geralmente definido em  header.php ) usando a  body_class função e adicionando classes usando um filtro.

Esta é uma maneira realmente simples de adicionar classes corporais e é especialmente útil se você estiver criando um tema. A classe do corpo normalmente é incluída em um tema usando o seguinte código:

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

Para adicionar sua própria classe a isso, você pode passar um argumento para a função, assim:

<body <?php body_class( 'my-class' ); ?>>

Isso adicionaria uma classe de corpo de  my-class em cada página do seu site WordPress.

As classes geralmente são adicionadas a qualquer elemento para direcioná-los para estilização usando CSS ou para manipular seu conteúdo usando JavaScript.

A  body_class() função no WordPress torna isso muito fácil para nós, adicionando automaticamente um monte de classes apropriadas à tag do corpo do nosso site.

Um exemplo seria a  logged-inclasse que é adicionada à tag do corpo se um usuário conectado estiver visualizando a página. A classe logged-innão será adicionada ao corpo se um usuário desconectado estiver visualizando a página.

Da mesma forma, outras classes como  category,  archive,  search, e tagsão adicionados automaticamente para a bodytag se o usuário está vendo um tipo específico de página. Isso permite definir o estilo do conteúdo de uma página de forma seletiva, dependendo de seu tipo.

A  body_class()função também adiciona várias classes que podem ser usadas para direcionar coisas como arquivar páginas de uma tag ou categoria específica. Por exemplo, digamos que seu site tenha algumas postagens arquivadas na categoria “tutorial” e outras postagens arquivadas na categoria “dica”. Se você visitar a página de arquivo da categoria do tutorial, verá que a tag do corpo também contém classes como category-tutorial. Essas classes dinâmicas permitem que você direcione páginas e postagens para estilos muito específicos.

Se você estava planejando adicionar algumas classes à body tag para direcionar esses tipos de postagens e páginas, talvez seja melhor usar as classes adicionadas por padrão. Todas essas classes adicionadas pelo WordPress são mencionadas na documentação do WordPress .

Pode haver momentos em que você deseja adicionar mais de uma classe de corpo. Isso pode ser alcançado usando uma matriz simples:

1
<body <?php body_class( array( "class-one", "class-two", "class-three" ) ); ?>>

Isso pega todas as classes na matriz e as passa para a body_class função.

Você também pode querer adicionar condicionalmente uma classe de corpo. Isso é fácil com algum PHP simples. Este exemplo usa o método condicional WooCommerce de  is_shop() :

<?php if ( is_shop() ) { body_class( 'is-woocommerce-shop' ); } else { body_class(); } ?>

Nota: WooCommerce já adiciona uma classe com base nisso, então observe que este é apenas um exemplo.

O que o código acima está fazendo é verificar se a primeira função está retornando true. Se for verdade, a classe do corpo foi is-woocommerce-shopadicionada a ele; se não for verdade, apenas a classe de corpo padrão será exibida.

É possível usar um filtro WordPress para adicionar uma classe de corpo também. Este método mantém o código do tema mais limpo e é particularmente útil se você deseja adicionar uma classe de corpo de um plugin. Este código pode ir em functions.php de seu tema  ou em seu plugin.

1
2
3
4
5
6
7
8
add_filter( 'body_class','my_body_classes' );
function my_body_classes( $classes ) {
    $classes[] = 'class-name';
    
    return $classes;
    
}

Isso adiciona uma classe (ou classes, dependendo da sua implementação) ao array e retorna o array inteiro.

Para adicionar mais classes ao filtro, basta adicionar outra linha que adiciona outro valor à matriz:

1
2
3
4
5
6
7
8
9
add_filter( 'body_class','my_body_classes' );
function my_body_classes( $classes ) {
    $classes[] = 'class-name';
    $classes[] = 'class-name-two';
    
    return $classes;
    
}

As condições também podem ser usadas em um filtro. Tomando o mesmo exemplo que usamos anteriormente, podemos obter o mesmo efeito:

01
02
03
04
05
06
07
08
09
10
11
12
13
add_filter( 'body_class','my_body_classes' );
function my_body_classes( $classes ) {
    if ( is_shop() ) {
    
        $classes[] = 'class-name';
        $classes[] = 'class-name-two';
        
    }
    
    return $classes;
    
}

Por padrão, o WordPress adiciona uma classe de corpo para o seu modelo de página, mas se você for um desenvolvedor front-end e tiver convenções de nomenclatura para o seu CSS, talvez queira alterar isso.

Por exemplo, um modelo de página denominado “meio-termo” teria uma classe de corpo de  page-template-page-halfhalf-php– não ótimo.

Então, vamos adicionar uma nova classe, usando um filtro e uma tag condicional do WordPress:

01
02
03
04
05
06
07
08
09
10
add_filter( 'body_class','halfhalf_body_class' );
function halfhalf_body_class( $classes ) {
    if ( is_page_template( 'page-halfhalf.php' ) ) {
        $classes[] = 'halfhalf-page';
    }
    
    return $classes;
    
}

Isso adicionará a classe de corpo  halfhalf-page se o modelo de página for  page-halfhalf.php .

É improvável que você deseje remover uma classe de corpo, já que você não é forçado a usá-las e elas adicionam muito pouco à sua marcação. Dito isso, é possível fazer isso usando o mesmo  body_class filtro.

1
2
3
4
5
6
7
8
add_filter( 'body_class', 'remove_body_class' );
function remove_body_class( $classes ) {
    $remove_classes = ['custom-class', 'archive'];
    $classes = array_diff($classes, $remove_classes);
    
    return $classes;   
}

A maneira mais fácil e rápida de remover uma ou mais classes da tag body é definir uma matriz de classes que você deseja remover. Depois disso, simplesmente chamar a  array_diff() função retornará um novo array que contém a lista completa de classes após remover as classes que especificamos.

Você não terá que percorrer todo o array e remover a configuração das classes uma de cada vez. Em nosso caso, removemos as classes  custom-class e  archive da tag body.

Neste pequeno tutorial, cobrimos dois métodos de adição à classe de corpo do WordPress:

  1. usando a body_classfunção dentro de um tema
  2. usando um filtro

Também cobrimos a adição de classes de corpo condicionalmente e a remoção de classes, caso seja necessário fazer isso em um desenvolvimento futuro.


Ajude-nos a crescer, visite SENASNERD no Twitter FacebookInstagram . e deixe o seu gosto, para ter acesso a toda a informação em primeira mão. E se gostou do artigo não se esqueça de partilhar  com os seus amigos.

SUBSCREVA-SE NO CANAL YOUTUBE SENASNERD

Artigos Relacionados

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *

Botão Voltar ao Topo