As meta boxes são um recurso útil para o WordPress que permite adicionar dados totalmente personalizados a um post ou página no WordPress.

Digamos, por exemplo, que você crie um site para um cliente que precisa exibir informações nutricionais ao lado de produtos em uma loja. Você pode adicionar um número ilimitado de meta boxes personalizadas à tela de edição para postagens e páginas no WordPress e até mesmo para formatos de postagem personalizados.

Normalmente, as meta caixas personalizadas contêm dados e campos de formulário, que permite aos administradores adicionar/modificar/ou remover metadados.

Neste tutorial, mostrarei como adicionar suas próprias metacaixas personalizadas a uma tela de edição de um formato de postagem. Exploraremos como adicionar e gerenciar campos de texto, como adicionar botões de opção e caixas de seleção que darão aos usuários um controle mais avançado sobre os metadados de formato de postagem.

O que é uma Meta Box ou Meta Box?

Uma metacaixa é uma seção de arrastar e soltar exibida na tela de edição de conteúdo do WordPress. Os usuários podem selecionar ou inserir informações adicionais nas metacaixas, além do conteúdo do artigo.

Existem dois tipos de dados que você pode inserir nas metacaixas: metadados (ou seja, campos personalizados) e termos de taxonomia.

Como adicionar uma metazona

WordPress tem uma função chamada  add_meta_box com o propósito específico de adicionar uma nova metacaixa.  Add_meta_box deve ser chamado dentro de uma função de retorno de chamada que deve ser executada quando as metacaixas estão sendo carregadas. Esta tarefa pode ser realizada pelo "gancho" add_meta_box_{format de publication}como sugerido em Códice .

Dito isto, adicionaremos o seguinte código no arquivo principal de um plugin ou um tema no arquivo function.php (tendo em mente que é sempre melhor criar um tema filho em vez de modificar o arquivo functions.php de um tema):

<?php
/**
 * Adicionar metacaixa
 *
* Post param $post O objeto post
* link Https://codex.wordpress.org/Plugin_API/Action_Reference/add_meta_boxes
 */
função food_add_meta_boxes ($post) {
    add_meta_box('food_meta_box', __('valor nutricional', 'food_example_plugin'), 'food_build_meta_box', 'food', 'side', 'low');
}
add_action('add_meta_boxes_food', 'food_add_meta_boxes');

Esta é a nossa primeira caixa meta personalizada. No código acima, passamos seis argumentos para a função add_meta_box : um documento de identidade para a caixa-meta, um título, uma função de retorno de chamada, o slug do tipo de anúncio personalizado ( food), A contexto ( lado ) e a prioridade ( low).

A função de retorno de chamada imprime a marcação HTML na metacaixa e vamos defini-la da seguinte maneira:

<? PHP
/**
 * Crie uma caixa de metacampo personalizada
 *
* param $post post O objeto post
 */
função food_build_meta_box ($post) {
 // Nosso código aqui
}

Nenhum conteúdo HTML foi impresso ainda, mas a caixa-meta já está no lugar. Então, vamos entrar em mais detalhes.

empty_custom_meta_box

Primeiro, devemos considerar manter as coisas seguras. Precisamos chamar a função wp_nonce_field, que produz um campo nonce, cujo objetivo é fazer a solicitação do formulário vem do site atual. Então, vamos adicionar a seguinte linha de código à função callback:


wp_nonce_field (basename (__FILE__), 'food_meta_box_nonce');

Aqui, passamos para a função apenas dois dos quatro argumentos permitidos. O primeiro é o nome da ação, aqui definido como o nome da pasta base do arquivo atual, enquanto o segundo argumento é o nome do atributo do campo oculto. Mesmo que o campo nonce não garanta proteção absoluta, é recomendado sempre incluir em qualquer caixa de meta personalizada (marque o WordPress Codex para uma explicação mais detalhada).

Assim que terminarmos com a segurança, precisamos extrair os valores dos campos personalizados do banco de dados e gerenciar os campos da caixa-meta. É aqui que funciona get_post_meta  torna-se muito prático.

No nosso exemplo (ou arquivo "Funções", dependendo de como você deseja implementar o exemplo neste tutorial), usamos três campos personalizados simples, duas strings e um array. O código abaixo mostra como inserir seus valores no banco de dados:

ID, '_food_cholesterol', true); // recuperar o valor atual de _food_carbohydrates $ current_carbohydrates = get_post_meta ($ post-> ID, '_food_carbohydrates', true); // armazena o array _food_vitamins $ current_vitamins = (get_post_meta ($ post-> ID, '_food_vitamins', true))? get_post_meta ($ post-> ID, '_food_vitamins', true): array ();

Neste exemplo, campos personalizados são precedidos por sublinhados, o que significa que estamos lidando com campos personalizados ocultos. Dessa forma, eles não serão exibidos para o administrador nos campos embutidos dos campos personalizados da metacaixa.

Finalmente, é hora de imprimir a marcação.

Imprimindo campos do formulário

Agora temos que produzir a saída. Vamos começar adicionando um campo de texto simples, que permitirá ao usuário armazenar o valor de um único campo personalizado, neste caso, carboidratos:

?> " />

No código anterior, o próprio campo personalizado forneceu o valor do campo atual. O próximo campo personalizado terá dois botões de opção:

/> Sim /> Não

Então é aqui que as coisas ficam um pouco mais difíceis. Função verificado compare as duas strings passadas como argumentos. Se houver uma correspondência, o campo será ativado "marcado".

Por fim, adicionaremos grupos de caixas de seleção à meta box:

/> Vitamina A /> Tiamina (B3)

O valor do atributo "name" corresponde ao elemento de uma matriz e, posteriormente, nos permitirá salvar os dados de forma mais eficiente.

Agora considere o primeiro argumento da função "marcada".

<?php
( in_array( 'Tiamina (B1)', $current_vitamins ) ) ? 'Tiamina (B1)': ''

é uma operação ternária que verifica se o valor atual da caixa de seleção é idêntico ao da variável " $ current_vitamins" Se a condição for verdadeira, ele retornará o mesmo valor; caso contrário, retornará uma string vazia.

Agora que a lógica deve estar clara, podemos encurtar o código com uma matriz em um loop "foreach":

ID, '_food_vitamins', true))? get_post_meta ($ post-> ID, '_food_vitamins', true): array (); ?> " />

Agora vamos colocar tudo junto:

ID, '_food_cholesterol', true); // recuperar o valor atual de _food_carbohydrates $ current_carbohydrates = get_post_meta ($ post-> ID, '_food_carbohydrates', true); $ vitaminas = array ('Vitamina A', 'Tiamina (B1)', 'Riboflavina (B2)', 'Niacina (B3)', 'Ácido pantotênico (B5)', 'Vitamina B6', 'Vitamina B12', ' Vitamina C ',' Vitamina D ',' Vitamina E ',' Vitamina K '); // armazena o array _food_vitamins $ current_vitamins = (get_post_meta ($ post-> ID, '_food_vitamins', true))? get_post_meta ($ post-> ID, '_food_vitamins', true): array (); ?> /> Sim /> Não " />" />

E é isso que a metacaixa finalizada coletará na interface de edição.

food_meta_box

Como salvar dados

Agora que a metacaixa está pronta, não é possível salvar os dados. Para fazer isso, precisaremos definir uma função de retorno de chamada que será chamada quando a postagem / página for salva:

<?php
/**
 * Armazene dados de meta box de campo personalizado
 *
 * @param int $post_id O ID da postagem.
 */
função food_save_meta_boxes_data( $post_id ){
 //codifique aqui
}
add_action('save_post_food', 'food_save_meta_boxes_data', 10, 2);

O gancho "save _ {$ post_type}" é executado quando o tipo de postagem personalizado é salvo ou atualizado.

Agora vamos ver como fazer as coisas dentro dessa função. A primeira coisa que temos que fazer é verificar o valor do campo "nonce".

<?php
// verifica a meta box nonce
if ( !isset( $_POST['food_meta_box_nonce'] ) || !wp_verify_nonce( $_POST['food_meta_box_nonce'], basename( __FILE__ ) ) ){
 retornar;
}

Se o campo nonce não for definido ou se seu valor estiver incorreto ou tiver expirado, a execução é interrompida por mais de detalhes aqui.

Se você quiser pular a função em caso de salvamento automático, podemos adicionar a seguinte condição:


Em seguida, precisamos verificar a função do usuário:

<?php
//Verifica as permissões do usuário.
if ( ! current_user_can( 'edit_post', $post_id ) ){
 retornar;
}

e finalmente salvamos os dados:

<?php
// armazena valores de campos personalizados
// string de colesterol
if ( isset( $_REQUEST['colesterol'] ) ) {
 update_post_meta( $post_id, '_food_cholesterol', sanitize_text_field( $_POST['colesterol'] ) );
}
// armazena valores de campos personalizados
// string de carboidratos
if ( isset( $_REQUEST['carboidratos'] ) ) {
 update_post_meta( $post_id, '_food_carboidratos', sanitize_text_field( $_POST['carboidratos'] ) );
}
// armazena valores de campos personalizados
//matriz de vitaminas
if( isset( $_POST['vitaminas'] ) ){
 $vitaminas = (matriz) $_POST['vitaminas'];
 //sinitiza array
 $vitaminas = array_map('sanitize_text_field', $vitaminas);
 // guardar dados
 update_post_meta($post_id, '_food_vitamins', $vitaminas);
}outro{
 //exclui dados
 delete_post_meta($post_id, '_food_vitamins');
}

Se houver pelo menos um elemento na matriz, a variável $ vitaminas será salva com o valor correspondente. Posteriormente, a função array_map do PHP aplicará a função sanitize_text_field a cada elemento do array. Se nenhuma caixa marcada foi definida para uma opção, então o array $ _POST ['vitaminas'] não existirá, então podemos excluí-lo chamando a função "delete_post_meta".

Aqui está o código completo:


Este é um código reunido em um plugin que você pode baixar de Github.

Resumo

Agora que sabemos como criar uma meta box, você pode continuar praticando criando formas no seu painel. O HTML5 trouxe novos campos e você pode experimentá-los usando um campo de data ou cor.

Você terá muito mais possibilidades usando jQuery UI ou outra biblioteca disponível. Este tutorial apenas arranha a superfície e oferece uma visão geral das possibilidades. O resto do trabalho dependerá da sua vontade de aprender.

É isso para este tutorial. Fique à vontade para compartilhar com seus amigos, ou deixar sugestões nos comentários.