Bem vindo ao
Blog da FULL.

Aprenda, crie e cresça seu negócio na internet.

Encontre conteúdos, dicas, tutoriais e novidades sobre as principais ferramentas Wordpress

Criando tipos de postagem altamente personalizados com caixas meta personalizadas

Você está em:

Criando tipos de postagem altamente personalizados com caixas meta personalizadas
Metaboxes personalizadas em ação

Nos últimos anos, o WordPress realmente evoluiu para um sistema de gerenciamento de conteúdo completo, e é quando você realmente libera algumas de suas funcionalidades que percebe que o WordPress pode ser usado para alimentar praticamente qualquer tipo de site.

Meu momento eureka veio quando um cliente me pediu para construir um sistema de rastreamento de pedidos para ele. Historicamente, ele recebia pedidos de equipamentos médicos de representantes e fazia toda a papelada manualmente. Ele então passava o dia todo no telefone, atendendo ligações de representantes para fazer novos pedidos ou verificar o status de um pedido existente.

Bem, ele procurou mudar tudo isso criando um site onde pudesse inserir todos os seus pedidos, e seus clientes pudessem verificar seu status à vontade e até receber atualizações por e-mail à medida que o pedido fosse atualizado com novas informações. A ideia era que ele teria mais tempo para realmente expandir seus negócios, em vez de passar o dia todo no telefone, fazendo trabalho administrativo.

TIPOS DE POSTAGEM PERSONALIZADOS

A resposta para seu problema estava no poder dos tipos de postagem personalizados. Os sites padrão do WordPress têm dois tipos de postagem: postagens e páginas, mas você pode adicionar quantos quiser. Você pode até ter alguns em seu site de temas ou plugins que suportam coisas como eventos, listagens de imóveis, produtos ou controles deslizantes.

Nesse caso, precisei criar um tipo de postagem personalizado para os pedidos dele. Estes, então, abrigariam as informações de cada pedido, a serem exibidas no front-end, para seus clientes visualizarem.

Não vou repassar o processo de criação de um tipo de postagem personalizado, porque já abordei isso em outro tutorial:  Registrando tipos de postagem personalizados .

O que quero discutir aqui é como organizar seus dados e exibi-los da maneira que você precisa. Por exemplo, o editor padrão do WordPress não se prestava a registrar esses pedidos, porque não possui áreas individuais para todas as pequenas informações que formaram o pedido, como nome do paciente, número do pedido e representante do pedido que precisariam ser chamado tanto no front-end do site quanto em e-mails para o representante em arquivo.

Foi aí que surgiram as Meta Boxes Personalizadas. As Meta Boxes Personalizadas permitem que você crie novas “janelas” em seu editor para armazenar informações específicas. Portanto, embora o editor de postagem tenha uma caixa enorme para o conteúdo do seu post, talvez você não precise disso para o seu tipo de postagem personalizado, como eu não precisei com meu tipo de postagem personalizado de pedidos. Como tal, desliguei o editor quando registrei o tipo de postagem personalizado, para que eu estivesse totalmente no controle da tela de entrada de dados, como você verá abaixo.

META CAIXAS PERSONALIZADAS

Custom Meta Boxes  é um script que torna o processo de criação dessas meta boxes incrivelmente fácil. Além disso, ele pegou alguns dos tipos de campo mais complexos (como seletores de cores, seletores de data e editores WYSIWYG) e fez toda a codificação para você, de modo que tudo o que você precisa fazer é ditar o tipo de cada campo, e ele aparecem magicamente.

Incluí-lo em seu tema ou plugin é um processo muito fácil. Tudo o que você precisa fazer é baixar os arquivos do  repositório GitHub  e copiá-los para o seu próprio tema ou estrutura de pastas do plugin. Recomendo colocar os arquivos em uma biblioteca ou pasta includes, para melhor organização. Nos meus plugins, eu carrego todos os arquivos em /wp-content/plugins/my-plugin/includes/metabox/.

Uma vez que todos os arquivos e pastas tenham sido carregados para o local escolhido, tudo o que você precisa fazer para “ativa-los” e disponibilizá-los para uso é incluir init.php do seu plugin. Por exemplo, no meu exemplo, a seguinte função foi incluída no arquivo de plugin principal para chamar init.php na pasta /includes/metabox/:

function be_initialize_cmb_meta_boxes() {

if ( !class_exists( ‘cmb_Meta_Box’ ) ) {

require_once( ‘includes/metabox/init.php’ );

}

}

add_action( ‘init’, ‘be_initialize_cmb_meta_boxes’, 9999 );

Agora você está em condições de realmente usar a funcionalidade que o script fornece. O example-functions.php é um ótimo lugar para começar a aprender como o script funciona. Ele fornece um exemplo da sintaxe necessária para incluir cada tipo de campo que o script permite. Os tipos de campos que você pode escolher incluem:

  • Título (para organizar suas meta caixas no painel)
  • Texto (pequeno, médio e grande)
  • Seletor de data (padrão ou carimbo de data/hora UNIX)
  • Moeda
  • Área de texto (pequena e grande)
  • Suspenso
  • Botões de rádio (inline e padrão)
  • Caixa de seleção (única e múltipla)
  • Editor WYSIWYG
  • Seletores de taxonomia (lista suspensa, caixas de seleção ou botões de opção)
  • Carregador de arquivos
  • Lista de arquivos

Você só precisa decidir quais informações você está tentando registrar e qual tipo de campo seria melhor em cada caso.

Para demonstrar esse script para você, vou usar um exemplo mais simples do que o sistema de pedidos que mencionei anteriormente, pois é mais complexo. Recentemente escrevi um plugin onde estava criando um sistema de alertas simples, onde o administrador poderia especificar o título do alerta, sua prioridade, qual era a descrição do alerta e como resolvê-lo.

Para lidar com isso, usei o título do post para o título do alerta, botões de opção embutidos para definir a prioridade e editores WYSIWYG para escrever a descrição e a resolução (permitindo uma edição rica e fácil, como listas com marcadores e formatação de texto).

A função a seguir é todo o código que a realiza: você notará que ela segue o formato do arquivo example-functions.php. Vou descrever cada parte do código depois:

function twpb_alerts_metaboxes( $meta_boxes ) {

$prefix = ‘twpb_alert_’; // Prefix for all fields

$meta_boxes[] = array(

‘id’ => ‘alert_metabox’,

‘title’ => ‘Alert Information’,

‘pages’ => array(‘twpb_alerts’), // post type

‘context’ => ‘normal’,

‘priority’ => ‘high’,

‘show_names’ => true, // Show field names on the left

‘fields’ => array(

array(

‘name’    => ‘Priority’,

‘desc’    => ”,

‘id’      => $prefix . ‘priority’,

‘type’    => ‘radio_inline’,

‘options’ => array(

array( ‘name’ => ‘High’, ‘value’ => ‘high’, ),

array( ‘name’ => ‘Medium’, ‘value’ => ‘medium’, ),

array( ‘name’ => ‘Low’, ‘value’ => ‘low’, ),

),

),

array(

‘name’    => ‘Description of issue’,

‘desc’    => ‘Enter a description of what the issue is.’,

‘id’      => $prefix . ‘description’,

‘type’    => ‘wysiwyg’,

‘options’ => array( ‘textarea_rows’ => 5, ),

),

array(

‘name’    => ‘Proposed resolution’,

‘desc’    => ‘Inform users how they can resolve the issue.’,

‘id’      => $prefix . ‘resolution’,

‘type’    => ‘wysiwyg’,

‘options’ => array( ‘textarea_rows’ => 5, ),

),

),

);

return $meta_boxes;

}

add_filter( ‘cmb_meta_boxes’, ‘twpb_alerts_metaboxes’ );

Na linha 2, defini um prefixo exclusivo para os campos personalizados para evitar conflito com quaisquer outros plugins e, na linha 4, dei um id exclusivo para a metabox que aparecerá no tipo de postagem personalizada no painel. A linha 5 define o título da metabox e a linha 6 define os tipos de postagem personalizados para mostrar essas metaboxes. Como é uma matriz, você pode incluí-la em quantos tipos de postagem desejar, incluindo postagens e páginas, se desejar.

A linha 10 inicia o array dos campos que desejo criar. Neste exemplo, existem apenas três campos (linhas 11-21, 22-28 e 29-35). Cada campo inclui informações básicas sobre o que é o campo, um ID exclusivo para ele e uma descrição, bem como algumas opções quando apropriado.

Em seguida, a linha 39 faz as metaboxes serem exibidas e a linha 41 se conecta ao script que carregamos originalmente, para fazê-lo funcionar.

O RESULTADO?

Então, como isso se parece? Bem, na janela do editor, você terminará com algo assim:

Metaboxes personalizadas em ação

Então, agora estabelecemos como construir as metaboxes e usar os diferentes tipos de campo para coletar as informações necessárias. Agora precisamos exibi-lo no front-end.

EXIBINDO AS INFORMAÇÕES

As informações agora estão sendo armazenadas em cada postagem no banco de dados. Mas, a menos que o invoquemos, ele permanecerá no banco de dados e permanecerá inútil. Para exibir as informações, precisamos usar a função get_post_meta, que recupera o meta do post para um determinado post do banco de dados.

Para pegar este exemplo simples, podemos usar a função get_post_meta em três instâncias separadas para extrair cada informação que armazenamos (a prioridade, descrição e resolução).

<h2>Priority: <?php echo get_post_meta( $post->ID, ‘twpb_alert_priority’, true ); ?></h2>

<h3>Description</h3>

<?php echo get_post_meta( $post->ID, ‘twpb_alert_description’, true ); ?>

<h3>Resolution</h3>

<?php echo get_post_meta( $post->ID, ‘twpb_alert_resolution’, true ); ?>

Em cada caso, passamos o ID do post e o ID exclusivo de cada parte dos metadados que queremos recuperar (lembre-se de que definimos isso na função anterior).

Isso produzirá um resultado no front-end ao longo das linhas deste:

Exibindo Metainformações Personalizadas

LEVANDO MAIS

Este foi um exemplo muito simples, mas com um pouco de imaginação, você pode ver o quão poderoso isso pode ser. Para voltar ao meu exemplo original do sistema de rastreamento de pedidos, esse plugin foi usado para registrar informações do paciente (nome, endereço, data de nascimento) e informações do pedido (itens pedidos, preço, número do pedido, transportadora, número de rastreamento, notas do pedido e documentos de pedidos, como faturas). Juntamente com  as notificações por e-mail , pode ser uma ferramenta muito abrangente.

Uma vez que você começa a desvendar recursos poderosos como este que estão embutidos no WordPress, que podem parecer um pouco esmagadores no começo, você percebe o quão poderoso ele pode ser. Felizmente, ferramentas como  o Custom Meta Boxes  irão encorajá-lo a mergulhar e começar a desenvolver seus próprios sites altamente personalizados.

Aprenda com a FULL.

Junte-se a mais de 50 mil pessoas que recebem em primeira mão as principais ferramentas e tecnologia para desenvolvimento web

plugins premium WordPress
O meu carrinho
🎁 Faltam 300,00 para liberar o Cupom Secreto
O seu carrinho está vazio.

Parece que ainda não tomou uma decisão.