Caixas Meta WordPress – Um Guia Rápido

WordPress Meta Boxes são caixas arrastáveis ​​que aparecem em sua tela de edição e são usadas para lidar com dados adicionais, como termos de taxonomia. Neste artigo, vamos dar uma olhada nas meta boxes do WordPress e ver como podemos personalizar as nossas próprias, descobrir como salvar as alterações que fazemos e como podemos exibir seu conteúdo no front-end do nosso site.

Vamos começar!

Campos personalizados, caixas meta e metadados

Há muita confusão por aí sobre a diferença entre esses três termos. Vamos dar uma olhada em todos os três para entender melhor o que são e como funcionam.

Metadados

Os metadados de um post são as informações extras sobre um post que são armazenadas na tabela postmeta do banco de dados.

Cada par de chave/valor é considerado um 'campo de postagem'. Não há limites para quantas meta-entradas essa tabela pode ter.

Os campos personalizados

Existem campos predefinidos pelo WordPress, como a imagem do recurso, que são campos tecnicamente personalizados. Outros podem ser adicionados por um plugin ou código personalizado e definidos pelo usuário administrador. Você pode descobrir mais sobre campos personalizados lendo nosso artigo 'Introdução aos campos personalizados do WordPress'.

Metaboxes

Ao abrir uma postagem do WordPress para editá-la, você verá que a página está dividida em diferentes seções (muitas das quais estão localizadas na barra lateral do lado direito).

Todas essas seções são tecnicamente 'meta boxes'. Assim, o editor de postagem principal, os contêineres para escolher categorias, publicar a postagem, adicionar tags, adicionar uma imagem em destaque são todas as meta caixas que contêm elementos HTML que interagem com os metadados da postagem. Dependendo de como os metadados são tratados pelo site, essas caixas aparecerão em locais diferentes na tela.

A título de exemplo adicional, vejamos a meta-caixa da Imagem em Destaque. Isso normalmente é encontrado na barra lateral direita da tela de administração de uma postagem. Lá, você pode facilmente alterar a imagem. Ao fazer isso, você está realmente atualizando o _thumbnail_id dos metadados desse post.

Uma meta box de campo personalizado, como a 'fonte' (que adicionamos em nosso tutorial sobre Campos personalizados), geralmente pode ser encontrada abaixo do editor de postagem principal.

Criando uma Meta Box para nosso tipo de postagem personalizada

Agora que temos uma ideia mais clara do que exatamente são metaboxes, podemos seguir em frente e criar nossa própria metabox personalizada para nosso site. Este tutorial segue nosso tutorial sobre Tipos de postagem personalizados ... se você quiser seguir passo a passo, precisará verificar esse artigo e criar um tipo de postagem personalizado chamado 'receitas' e configurar algumas 'receitas' ' postagens de teste com uma imagem em destaque selecionada.

Neste tutorial, vamos expandir nosso tipo de postagem personalizado adicionando uma nova meta box que será usada para definir se a receita é vegana ou não, marcando uma caixa de seleção.

Passo 1 – Registre a Meta Box

Para adicionar uma meta box em nosso tipo de postagem personalizado, usamos a função add_meta_box fornecida pelo WordPress. Aqui está a estrutura da função com os argumentos que usaremos:

 add_meta_box( $id, $title, $callback, $screen, $context )

Para o id exclusivo usaremos is_vegan e para o título da meta box a string Is Vegan .

A função de retorno de chamada para mostrar o conteúdo da caixa será display_vegan_meta_box . O atributo $screen se refere à tela de administração na qual a meta box será exibida. No nosso caso, esta é a área de edição de postagem da receita, portanto, será o nome exclusivo do tipo de postagem que, conforme mencionado anteriormente, é recipes . O parâmetro $context varia de acordo com a tela de administração.

Os contextos de tela de edição de postagem que usaremos aqui incluem normal, lateral e avançado como os valores de contexto disponíveis. Usaremos o valor lateral para exibir a caixa meta na barra lateral da página de edição do post.

Então, resumindo, usando os parâmetros definidos acima do código que devemos adicionar em nosso my-custom-post-type.php deve ficar assim:

 function my_metabox() { add_meta_box( 'is_vegan', 'Is Vegan', 'display_vegan_meta_box', 'recipes', 'side' ); } add_action( 'admin_init', 'my_metabox' );

Como você verá, usamos o gancho admin_init que é acionado antes de qualquer outro gancho quando um usuário acessa a área de administração.

Agora, se você visitar a página de edição de uma postagem de receita, verá a caixa na barra lateral. Claro, o conteúdo está vazio no momento.

O próximo passo é preencher a caixa com o conteúdo desejado.

Passo 2 – Exiba o conteúdo básico da Meta Box

Manteremos o conteúdo desta caixa simples. Tudo o que precisamos é uma descrição e uma caixa de seleção. Conforme mencionado, o conteúdo é retornado na função display_vegan_meta_box .

Por favor, prossiga e adicione o trecho de código abaixo na função my_metabox :

 function display_vegan_meta_box( $recipe ) { ?> <span class="title">Vegan recipe?</span> <span class="content"> <label for="vegan_checkbox"> <input type="checkbox" name="vegan_checkbox" value="yes" /> </label> </span> <?php }

O que fizemos nesta função é gerar uma caixa de seleção HTML que, por enquanto, está desmarcada. Depois de introduzirmos a função save, retornaremos a esta seção de código para fazer mais algumas alterações para que, quando a página de edição de postagem for carregada, a caixa de seleção recuperará o estado da caixa de seleção salva.

Passo 3 – Salve o valor da Meta Box no banco de dados

Para salvar o valor dos campos de entrada da metabox, usamos o gancho de ação save_post que o WordPress fornece assim:

 function update_vegan_box( $post_id ) { if( !current_user_can( 'edit_post' ) ) return; if ( 'recipes' == get_post_type() ) { if ( isset( $_POST['vegan_checkbox'] ) && $_POST['vegan_checkbox'] != '' ) { update_post_meta( $post_id, 'is_vegan', $_POST['vegan_checkbox'] ); }else { update_post_meta( $post_id, 'is_vegan', "no" ); } } } add_action( 'save_post', 'update_vegan_box' );

Dentro da função update_vegan_bo x com o argumento $post_id incluímos algumas condições. Primeiro, queremos verificar se o usuário tem permissão para editar a postagem e também garantir que estamos editando um tipo de postagem de recipes .

Assim, se o post pertence ao tipo de recipes , examinamos o valor da caixa de seleção. Lembre-se de que, por padrão, quando a caixa de seleção está marcada, o valor do banco de dados armazenado é 'sim' e, caso contrário, o valor é NULL. Ajustamos um pouco isso para que o valor 'não' seja salvo quando salvamos a postagem com a metabox vegana desmarcada.

Aqui usamos a função update_post_meta do WordPress update_post_meta( $post_id, $meta_key, $meta_value, $prev_value = '' )

Em seus argumentos, definimos o post id, meta key, meta value. A função pode aceitar mais um argumento, o $prev_value
caso queiramos verificar o valor anterior antes de atualizar e somente se for igual, prossiga e atualize.

Passo 4 – Refinar o Código de Conteúdo da Meta Box

Agora vamos retornar à função anterior que gera o conteúdo da meta box e adicionar mais algumas linhas de código que recuperam os dados relacionados do banco de dados.

 function display_vegan_meta_box( $recipe ) { $is_value = esc_html( get_post_meta( $recipe->ID, 'is_vegan', true ) ); $checked; if ( $is_value == "yes" ) { $checked = "checked"; } else if ( $is_value == "no" ) { $checked = ""; } else { $checked="";} ?> <span class="title">Vegan recipe?</span> <span class="content"><label for="vegan_checkbox"> <input type="checkbox" name="vegan_checkbox" value="yes" <?php echo $checked; ?> /> </label></span> <?php }

Então, primeiro, recuperamos o valor meta is_vegan e, se apropriado, o valor checked será passado para a variável $checked e será ecoado na saída HTML.

E é isso. Agora temos uma meta box funcional que pode ser usada para definir se a receita em nosso post personalizado é vegana ou não.

Conclusão

As meta boxes oferecem um maior nível de controle e flexibilidade nas postagens e podem ser aproveitadas de várias maneiras. O que é especialmente legal sobre eles é que eles são separados do resto do conteúdo do post enquanto ao mesmo tempo residem na mesma tela de administração, o que torna o gerenciamento deles muito mais fácil do que se eles estivessem localizados em outro lugar no WordPress Admin.

Como na maioria dos códigos do WordPress, pode demorar um pouco para se familiarizar com o uso de meta boxes. Espero que as informações acima sejam suficientes para você começar. Boa codificação!