Como criar metaboxes personalizadas com CMB2

Alguns anos atrás, eu estava procurando uma maneira de consultar postagens e mostrar o local onde uma postagem foi escrita em um mapa do Google. Em minha pesquisa, me deparei com uma postagem de blog sobre como criar um localizador de lojas usando o CMB2 e o Google Maps. Desde então, o CMB2 se tornou um dos meus plugins favoritos e é usado na maioria dos meus projetos.

Em primeiro lugar, o que é CMB2?

CMB é um acrônimo para Custom Meta Boxes e, de acordo com a descrição na página do plugin, “CMB2 é uma meta box, campos personalizados e biblioteca de formulários para WordPress que vai te surpreender.” Ele foi desenvolvido por Justin Sternberg da WebDevStudios e esteve no repositório de plugins por pouco mais de dois anos. No entanto, em fevereiro passado, o pessoal do repositório de plug-ins do WordPress reconheceu que eles enganaram e aprovaram o CMB2 como um plug-in quando não deveriam.

Veja, os plug-ins normalmente são capazes de fazer algo imediatamente; eles têm alguma funcionalidade inerente. CMB2 é na verdade uma estrutura. Como Sternberg explicou uma vez: “É uma estrutura de desenvolvedor para criar facilmente formulários e campos para seus temas e plug-ins”. Na verdade, quando você instala o CMB2, nada acontece. Você não terá uma página de administração e não há uma interface de usuário de administração. Para usar o CMB2, você deve ser capaz de escrever código e adicionar ao seu arquivo functions.php . Por esse motivo, eu o chamo de plug-in 'não-plugin'.

A boa notícia é que a equipe de aprovação do plug-in concordou em deixá-lo no repositório, para que você possa continuar baixando e atualizando a partir daí. Você pode ler tudo sobre a história aqui no site do Justin.

Como configurar o CMB2

Para começar, você precisará encontrar o arquivo example-functions.php no diretório do plugin e copiá-lo para o seu tema. Ele pode ser copiado diretamente para a pasta raiz do tema, mas para manter seu projeto bem organizado, sugiro copiá-lo para uma pasta como /lib/ ou /includes/ . Se você já sabe como gostaria de usar o CMB2, pode querer prosseguir e renomear o arquivo para algo mais apropriado. Por exemplo, se quiser usá-lo para criar campos personalizados para uma página de depoimentos, você pode nomeá-lo como testimonial-functions.php .

Em seguida, você precisará certificar-se de que o WordPress encontre o novo arquivo adicionando uma instrução require_once ao seu arquivo functions.php . Isso vai se parecer com isto:

 require_once( dirname(__FILE__) . '/lib/testimonial-functions.php');

Agora é hora de realmente se aprofundar. Abra o arquivo testimonial-functions.php (ou o que você nomeou). Você notará que Justin não apenas criou um exemplo de quase todos os tipos de campo possíveis, mas também criou funções para exibir os campos por página inicial, categoria, post id, etc.

Nota: Este artigo destina-se a apresentá-lo ao CMB2; não será um tutorial completo sobre como usar todos os aspectos dele e, como é uma estrutura e foi desenvolvido para auxiliar programadores, você deve ter um conhecimento básico de PHP e do funcionamento interno do WordPress. Se você estiver procurando por um plug-in Custom Meta Box que tenha uma interface de usuário administrador, você pode querer verificar o plug-in Advanced Custom Fields.

Portanto, vamos voltar a criar algumas metacaixas personalizadas para algo simples, como um depoimento. Primeiro, determine o número e os tipos de campos necessários. Para simplificar, digamos que precisamos de três campos. Um para o depoimento real, um para o nome da pessoa que deu o depoimento e outro para a imagem da pessoa.

Trabalhando no arquivo testimonial-functions.php , você precisará encontrar a seção para registrar e adicionar sua nova função. Esse código se parece com isso.

 add_action( 'cmb2_admin_init', 'yourprefix_register_demo_metabox' );

Em seguida, sugiro que você renomeie sua função para algo relevante para seu tema e projeto.

 add_action( 'cmb2_admin_init', 'register_testimonial_metabox' ); /** * Hook in and add a testimonial metabox. Can only happen on the 'cmb2_admin_init' or 'cmb2_init' hook. */ function register_testimonial_metabox() {

Também sugiro que você renomeie o prefixo.

 // Start with an underscore to hide fields from custom fields list $prefix = '_yourprefix_'; //note, you can use anything you'd like here, but you need to remember what you use, because you will be using it again later.

Existem vários tipos de campo diferentes para escolher. vou usar:

 'type' => 'textarea_small' // for the author field 'type' => 'wysiwyg' // for the testimonial in case we want to include html 'type' => 'file' // for the image of the project or author $cmb_demo->add_field( array( 'name' => __( 'Testimonial Author', 'cmb2' ), 'desc' => __( 'Who is the testimonial from', 'cmb2' ), 'id' => $prefix . 'author', //Note, I renamed this to be more appropriate 'type' => 'textarea_small', ) ); $cmb_demo->add_field( array( 'name' => __( 'Testimonial', 'cmb2' ), 'desc' => __( 'add the testimonial here', 'cmb2' ), 'id' => $prefix . 'testimonial', //Note, I renamed this to be more appropriate 'type' => 'wysiwyg', 'options' => array( 'textarea_rows' => 5, ), ) ); $cmb_demo->add_field( array( 'name' => __( 'Author Image', 'cmb2' ), 'desc' => __( 'Upload an image or enter a URL.', 'cmb2' ), 'id' => $prefix . 'image', //Note, I renamed this to be more appropriate 'type' => 'file', ) );

Esses três novos campos precisam ser adicionados à nova função, para que se pareça com o seguinte:

 add_action( 'cmb2_admin_init', 'register_testimonial_metabox' ); /** * Hook in and add a testimonial metabox. Can only happen on the 'cmb2_admin_init' or 'cmb2_init' hook. */ function register_testimonial_metabox() { // Start with an underscore to hide fields from custom fields list $prefix = '_yourprefix_'; //note, you can use anything you'd like here /** * Start field groups here */ $cmb_demo->add_field( array( 'name' => __( 'Testimonial Author', 'cmb2' ), 'desc' => __( 'Who is the testimonial from', 'cmb2' ), 'id' => $prefix . 'author', //Note, I renamed this to be more appropriate 'type' => 'textarea_small', ) ); $cmb_demo->add_field( array( 'name' => __( 'Testimonial', 'cmb2' ), 'desc' => __( 'add the testimonial here', 'cmb2' ), 'id' => $prefix . 'testimonial', //Note, I renamed this to be more appropriate 'type' => 'wysiwyg', 'options' => array( 'textarea_rows' => 5, ), ) ); $cmb_demo->add_field( array( 'name' => __( 'Author Image', 'cmb2' ), 'desc' => __( 'Upload an image or enter a URL.', 'cmb2' ), 'id' => $prefix . 'image', //Note, I renamed this to be more appropriate 'type' => 'file', ) ); }

E é isso! Seu código final deve ficar assim:

 <?php /** * Include and set up custom metaboxes and fields. (Make sure you copy this file outside the CMB2 directory) * * Be sure to replace all instances of 'yourprefix_' with your project's prefix. * http://nacin.com/2010/05/11/in-wordpress-prefix-everything/ * * @category YourThemeOrPlugin * @package Demo_CMB2 * @license http://www.opensource.org/licenses/gpl-license.php GPL v2.0 (or later) * @link https://github.com/WebDevStudios/CMB2 */ /** * Get the bootstrap! If using the plugin from wordpress.org, REMOVE THIS! */ if ( file_exists( dirname( __FILE__ ) . '/CMB2/init.php' ) ) { require_once dirname( __FILE__ ) . '/CMB2/init.php'; } elseif ( file_exists( dirname( __FILE__ ) . '/CMB2/init.php' ) ) { require_once dirname( __FILE__ ) . '/CMB2/init.php'; } add_action( 'cmb2_admin_init', 'register_testimonial_metabox' ); /** * Hook in and add a testimonial metabox. Can only happen on the 'cmb2_admin_init' or 'cmb2_init' hook. */ function register_testimonial_metabox() { // Start with an underscore to hide fields from custom fields list $prefix = '_yourprefix_'; //note, you can use anything you'd like here /** * Start field groups here */ // This first field group tells WordPress where to put the fields. In the example below, it is set to show up only on Post_ID=10 $cmb_demo = new_cmb2_box( array( 'id' => $prefix . 'metabox', 'title' => __( 'Homepage Custom Fields', 'cmb2' ), 'object_types' => array( 'page', ), // Post type 'show_on' => array( 'id' => array( 10, ) ), // Specific post IDs to display this metabox ) ); $cmb_demo->add_field( array( 'name' => __( 'Testimonial Author', 'cmb2' ), 'desc' => __( 'Who is the testimonial from', 'cmb2' ), 'id' => $prefix . 'author', //Note, I renamed this to be more appropriate 'type' => 'textarea_small', ) ); $cmb_demo->add_field( array( 'name' => __( 'Testimonial', 'cmb2' ), 'desc' => __( 'add the testimonial here', 'cmb2' ), 'id' => $prefix . 'testimonial', //Note, I renamed this to be more appropriate 'type' => 'wysiwyg', 'options' => array( 'textarea_rows' => 5, ), ) ); $cmb_demo->add_field( array( 'name' => __( 'Author Image', 'cmb2' ), 'desc' => __( 'Upload an image or enter a URL.', 'cmb2' ), 'id' => $prefix . 'image', //Note, I renamed this to be more appropriate 'type' => 'file', ) ); }

Ao concluir, você deve ter uma página parecida com a seguinte:

Usar o CMB2 é uma ótima maneira de fornecer ao seu site exatamente o que você precisa, pois as opções são infinitas. Por exemplo, o CMB2 pode ser usado para criar uma página de opções de tema com caixas meta para logotipos, URLs para sites de mídia social ou vídeos. No caso de criar um site para um cliente, o CMB2 é perfeito para personalizar o administrador para que o cliente não precise formatar o conteúdo para corresponder aos estilos do seu tema. E assim que os dados forem inseridos, você poderá exibir o conteúdo com todo o estilo já existente em seu HTML e CSS.

Depois de dominar a adição de campos básicos com o CMB2, tente adicionar os Grupos de campos repetíveis. Com eles, você poderá adicionar quantos tipos de conteúdo desejar e, em seguida, usando um loop for-each, poderá começar a criar apresentações de slides ou carrosséis.

O CMB2 me permitiu levar meus sites WordPress para o próximo nível e espero que faça o mesmo por você.