Criando Meta Box para o seu tema WordPress

Você já precisou de um campo e não encontrou no WordPress? Teve que utilizar dos campos personalizados? Ou então instalou um plugin? É meu amigo, seus problemas acabaram, a solução é utilizar Meta Box.

Meta boxes são campos, que ficam no dashboard do WordPress, em posts, páginas e custom posts. De uma maneira mais amigável para o usuário. Meta boxes são altamente configuráveis, podem ser utilizadas para alterar a aparência, guardar informações, criar listas dinâmicas, galerias de imagens, em fim serve para atender a suas necessidades.

Diferente de usar plugins para adicionar, um Meta box, o seu código vai ficar mais limpo, pois você vai estar fazendo com que sua aplicações solucione apenas o necessários. Ficará confiável e ‘visível’ ao usuário, melhor que utilizar dos campos personalizados.

Bom então algo tão variável de utilizar, deve necessitar de um código monstruoso? Errado, para adicionar Meta box ao nosso tema, utilizamos de uma função nativa do WordPress, add_meta_box( ) . Vamos ver como funciona.

Imaginando que temos o seguinte problema, precisamos ter no nosso post, um campo para adicionar, uma cor ao título, mas cada post deve ter um título com uma cor diferente.

Vamos primeiro ver quais os parâmetros, nossa função add_meta_box recebe:

add_meta_box( $id, $title, $callback, $post_type, $context, $priority, $callback_args );
  • $id: Este é um ID único atribuído à sua caixa de meta. Ela deve ter um prefixo único e ser HTML válido. [String – Obrigatório]
  • $title: O título da caixa do meta box. [String – Obrigatório]
  • $callback: A função de retorno de chamada que exibe a saída da sua caixa de meta. Já vamos ver ela melhor. [String – Obrigatório]
  • $post_type: Onde será exibido o Meta Boxes. Exemplos (‘post’, ‘page’, ‘link’, ou ‘custom_post ).  [String ou Array – Opcional, por padrão fica null]
  • $contexto: Onde na página o Meta box deve ser mostrado. As opções disponíveis são  ‘normal’, ‘side’ e ‘advanced’. [String – Opcional, padrão ‘advanced’]
  • $priority:  Prioridade de inserção da caixa em relação as demais, opções ‘high’ ou ‘low’. [String]
  • $callback_args: Determina a passagem de parâmetros a função callback [Matriz – Opcional]

Depois de conhecer os parâmetros que nossa função recebe, podemos iniciar nossa aplicação. Vamos utilizar nosso arquivo ‘function.php’, nele vamos iniciar criando uma função.

add_action( 'add_meta_boxes', 'init_meta_box_color' );
function init_meta_box_color(){
 
}

Está função servirá como uma chamada para nosso Meta box, conhecida no WordPress como ‘actions’. Pois não podemos sair criando Meta box a qualquer momento, precisamos respeitar a ordem do WordPress, por isso vamos utilizar essa função de chamada.

add_action( 'add_meta_boxes', 'init_meta_box_color' );
function init_meta_box_color(){
    add_meta_box( $id, $title, $callback, $post_type, $context, $priority, $callback_args );
}

Agora sim podemos adicionar o nosso Meta box, vamos ajustar os parâmetros conforme nossa necessidade.

add_action( 'add_meta_boxes', 'init_meta_box_color' );
function init_meta_box_color(){
    add_meta_box( 'id_meta_color', 'Escolha uma cor para o título', 'meta_color', 'post', , 'normal', null );
}

O Meta box já foi criado, e está em exibição no nosso tema, agora vamos colocar um conteúdo para ele. Vamos criar uma função, com o nome que colocamos no parâmetro de callback, que no nosso caso foi ‘meta_color’.

function meta_color(){6
    ?>
    <input name="field_color" type="color" />
    <!--?php } &lt;/pre&gt; &lt;p&gt;No exemplo estamos utilizando um input, do tipo color, mas lembre, como dito no inicio, Meta box são livres, poderíamos colocar qualquer outro tipo de campo, ou informação.&lt;/p&gt; &lt;p&gt;Feito isso, já notamos que no nosso painel administrativo já aparece nossa caixa de cor, mas o nosso valor ainda não está salvando. Para isso vamos criar uma função de salvar.&lt;/p&gt; &lt;pre lang="php"&gt;add_action( 'save_post', 'save_meta_color' ); function save_meta_color( $post_id ){ } &lt;/pre&gt; &lt;p&gt;Da mesma forma que utilizamos uma ‘action’ para adicionar o nosso Meta box ao tema, precisamos de uma chamada. Então nossa função ‘save_meta_color’ , vai ser iniciada quando os outros campos do post forem salvos, isso será na hora que você ou usuário clicar no botão de salvar.&lt;/p&gt; &lt;pre lang="php"&gt;add_action( 'save_post', 'save_meta_color' ); function save_meta_color( $post_id ){ if(isset( $_POST['field_color'] ) ){ update_post_meta( $post_id , 'field_color', $_POST['field_color'] ); } } &lt;/pre&gt; &lt;p&gt;Essa condição adicionada na nossa função serve para verificar se o campo com o name ‘field_color’ existe, caso ele existir, usamos a função &lt;u&gt;update_post_meta,&lt;/u&gt; para salvar ou atualizar nosso dado. A função update_post_meta, funciona com os parâmetros na seguinte ordem:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;&lt;strong&gt;$post_id&lt;/strong&gt;O ID do post, nesse caso é quase sempre padrão, pois já recebemos ele da da action ‘save post’.&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;&lt;strong&gt;[&lt;/strong&gt;colocar uma linha de exemplo&lt;strong&gt;]&lt;/strong&gt;&lt;/p&gt; &lt;ul&gt; &lt;li&gt;&lt;strong&gt;$meta_key &lt;/strong&gt;– O nome do campo, no nosso caso é ‘color’.&lt;/li&gt; &lt;li&gt;&lt;strong&gt;$meta_value &lt;/strong&gt;– Este é o valor para o nosso meta_key, que no nosso caso será $_POST[‘field_color’].&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;&lt;strong&gt;                            &lt;/strong&gt;&lt;/p&gt; &lt;p&gt;Para fechar essa parte de salvar os dados do Meta box, utilizamos sempre campos com o atributo ‘name’ (input, select, textarea), assim passamos as informações para o Wordpress, através do método POST. &lt;u&gt;Mais informações&lt;/u&gt;.&lt;/p&gt; &lt;h2&gt;Opa, ainda meu post não está funcionando.&lt;/h2&gt; &lt;p&gt;Já conseguimos exibir o Meta box, colocar um campo, e salvar este dado. O que falta agora, é exibir o valor no campo, para isso vamos usar a função &lt;u&gt;get_post_meta&lt;/u&gt;.&lt;/p&gt; &lt;pre lang="php"&gt; get_post_meta ( $post_id, $key, $single ); &lt;/pre&gt; &lt;p&gt;A função get_post_meta, recebe três parâmetros:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;&lt;strong&gt;$post_id&lt;/strong&gt; – O ID do post, este valor o Wordpress nos da en uma variavel global, $post, para utilizar, vamos como no exemplo $post-&amp;gt;ID.&lt;/li&gt; &lt;li&gt;&lt;strong&gt;$meta_key &lt;/strong&gt;– O nome do nosso Meta box. (‘Ex: color’).&lt;/li&gt; &lt;li&gt;&lt;strong&gt;$single&lt;/strong&gt;Se deve retorna um único valor, por padrão a nossa função vai trazer o dado do nosso Meta box dentro de um Array, para não precisar ficar percorredo este Array, utilizamos true, para trazer o valor único.&lt;/li&gt; &lt;/ul&gt; &lt;pre lang="php"&gt; function meta_color(){ global $post; $color = get_post_meta($post-&gt;ID, 'field_color', true); wp_nonce_field( 'my_meta_box_nonce', 'meta_box_nonce' ); ?-->
    <input name="field_color" type="color" />
    <!--?php } &lt;/pre&gt; &lt;blockquote&gt;&lt;p&gt;wp_nonce_field  - O campo nonce é usado para validar que o conteúdo do formulário de solicitação veio do site atual e não em outro lugar. Um nonce não oferece proteção absoluta, mas deve proteger contra a maioria dos casos. É muito importante o uso de campos nonce em formulários.&lt;/p&gt;&lt;/blockquote&gt; &lt;h2&gt;Finalizando&lt;/h2&gt; &lt;p&gt;Agora vamos finalizar, damos ao nosso campo input, o valor do nosso Meta box.&lt;/p&gt; &lt;pre lang="php"&gt; function meta_color(){ global $post; $color = get_post_meta($post-&gt;ID, 'field_color', true); wp_nonce_field( 'my_meta_box_nonce', 'meta_box_nonce' ); ?-->
    <input name="field_color" type="color" value="&lt;?php echo $color; ?&gt;" />
    <!--?php } &lt;/pre&gt; &lt;p&gt;Pronto, agora nosso Meta box está funcionando corretamente, lembre para buscar este dados no front-end, ou em outro lugar no dashboard, é só utilizar a função get_post_meta.&lt;/p&gt; &lt;p&gt;Aqui o Meta box completo:&lt;/p&gt; &lt;pre lang="php"&gt; function init_meta_box_color(){ add_meta_box( 'id_meta_color', 'Escolha uma cor para o título', 'meta_color', 'post', , 'normal', null ); } function meta_color(){ global $post; $color = get_post_meta($post-&gt;ID, 'field_color', true); wp_nonce_field( 'my_meta_box_nonce', 'meta_box_nonce' ); ?-->
    <input name="field_color" type="color" value="&lt;?php echo $color; ?&gt;" />
    &lt;?php
}
 
add_action( 'save_post', 'save_meta_color' );
function save_meta_color( $post_id  ){    
    if(isset( $_POST['field_color'] ) ){
	   update_post_meta( $post_id , 'field_color', $_POST['field_color'] );
    }
}

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *