Como criar caixas meta personalizadas com CMB2

Publicados: 2016-07-25

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 no blog sobre como construir um localizador de lojas usando CMB2 e Google Maps. Desde então, o CMB2 se tornou um dos meus plugins favoritos e é usado na maioria dos meus projetos.

Primeiro, o que é CMB2?

Bem, 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 surpreender você”. Ele foi desenvolvido por Justin Sternberg da WebDevStudios e estava no repositório de plugins há pouco mais de dois anos. No entanto, em fevereiro passado, o pessoal do repositório de plugins do WordPress reconheceu que eles enganaram e aprovaram o CMB2 como um plugin quando não deveriam.

Veja, os plugins normalmente são capazes de fazer algo imediatamente; eles têm alguma funcionalidade inerente. CMB2 é na verdade um framework. Como Sternberg explicou uma vez: “É uma estrutura de desenvolvedor para criar facilmente formulários e campos para seus temas e plugins”. 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ê precisa escrever código e adicionar ao seu arquivo functions.php . Por esse motivo, eu o chamo de plugin 'não-plugin'.

A boa notícia é que a equipe de aprovação do plugin 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 em 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, então você pode querer ir em frente e renomear o arquivo para algo mais apropriado. Por exemplo, se você quiser usá-lo para criar campos personalizados para uma página de depoimentos, você pode chamá-lo 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 isso:

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

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

Como carregar JavaScript no WordPress

JavaScript é uma das linguagens de codificação mais populares ao redor. É incrivelmente útil ao criar um site ou aplicativo, e existem inúmeras bibliotecas e estruturas JavaScript para explorar, ...

Observação: este artigo tem como objetivo apresentar o CMB2; não será um tutorial completo sobre como usar cada aspecto dele, e por ser um framework e foi desenvolvido para auxiliar os programadores, você deve ter uma compreensão básica do PHP e do funcionamento interno do WordPress. Se você estiver procurando por um plugin Custom Meta Box que tenha uma interface de usuário admin, você pode querer conferir o plugin Advanced Custom Fields.

Então, vamos voltar a construir algumas meta boxes 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 está prestando o depoimento e outro para uma 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 campos diferentes para escolher. vou usar:

'type' =&amp;amp;gt; 'textarea_small' // for the author field
'type'    =&amp;amp;gt; 'wysiwyg' // for the testimonial in case we want to include html
'type' =&amp;amp;gt; 'file' // for the image of the project or author

$cmb_demo-&amp;amp;gt;add_field( array(
	'name' =&amp;amp;gt; __( 'Testimonial Author', 'cmb2' ),
	'desc' =&amp;amp;gt; __( 'Who is the testimonial from', 'cmb2' ),
	'id'   =&amp;amp;gt; $prefix . 'author', //Note, I renamed this to be more appropriate
	'type' =&amp;amp;gt; 'textarea_small',
	) );

$cmb_demo-&amp;amp;gt;add_field( array(
	'name'    =&amp;amp;gt; __( 'Testimonial', 'cmb2' ),
	'desc'    =&amp;amp;gt; __( 'add the testimonial here', 'cmb2' ),
	'id'      =&amp;amp;gt; $prefix . 'testimonial', //Note, I renamed this to be more appropriate
	'type'    =&amp;amp;gt; 'wysiwyg',
	'options' =&amp;amp;gt; array( 'textarea_rows' =&amp;amp;gt; 5, ),
	) );

	$cmb_demo-&amp;amp;gt;add_field( array(
	'name' =&amp;amp;gt; __( 'Author Image', 'cmb2' ),
	'desc' =&amp;amp;gt; __( 'Upload an image or enter a URL.', 'cmb2' ),
	'id'   =&amp;amp;gt; $prefix . 'image', //Note, I renamed this to be more appropriate
	'type' =&amp;amp;gt; '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-&amp;amp;gt;add_field( array(
	'name' =&amp;amp;gt; __( 'Testimonial Author', 'cmb2' ),
	'desc' =&amp;amp;gt; __( 'Who is the testimonial from', 'cmb2' ),
	'id'   =&amp;amp;gt; $prefix . 'author', //Note, I renamed this to be more appropriate
	'type' =&amp;amp;gt; 'textarea_small',
	) );

$cmb_demo-&amp;amp;gt;add_field( array(
	'name'    =&amp;amp;gt; __( 'Testimonial', 'cmb2' ),
	'desc'    =&amp;amp;gt; __( 'add the testimonial here', 'cmb2' ),
	'id'      =&amp;amp;gt; $prefix . 'testimonial', //Note, I renamed this to be more appropriate
	'type'    =&amp;amp;gt; 'wysiwyg',
	'options' =&amp;amp;gt; array( 'textarea_rows' =&amp;amp;gt; 5, ),
	) );

	$cmb_demo-&amp;amp;gt;add_field( array(
	'name' =&amp;amp;gt; __( 'Author Image', 'cmb2' ),
	'desc' =&amp;amp;gt; __( 'Upload an image or enter a URL.', 'cmb2' ),
	'id'   =&amp;amp;gt; $prefix . 'image', //Note, I renamed this to be more appropriate
	'type' =&amp;amp;gt; 'file',
	) );
}

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

&amp;amp;lt;?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'            =&amp;amp;gt; $prefix . 'metabox',
		'title'         =&amp;amp;gt; __( 'Homepage Custom Fields', 'cmb2' ),
		'object_types'  =&amp;amp;gt; array( 'page', ), // Post type
		'show_on'      =&amp;amp;gt; array( 'id' =&amp;amp;gt; array( 10, ) ), // Specific post IDs to display this metabox
		) );

$cmb_demo-&amp;amp;gt;add_field( array(
	'name' =&amp;amp;gt; __( 'Testimonial Author', 'cmb2' ),
	'desc' =&amp;amp;gt; __( 'Who is the testimonial from', 'cmb2' ),
	'id'   =&amp;amp;gt; $prefix . 'author', //Note, I renamed this to be more appropriate
	'type' =&amp;amp;gt; 'textarea_small',
	) );

$cmb_demo-&amp;amp;gt;add_field( array(
	'name'    =&amp;amp;gt; __( 'Testimonial', 'cmb2' ),
	'desc'    =&amp;amp;gt; __( 'add the testimonial here', 'cmb2' ),
	'id'      =&amp;amp;gt; $prefix . 'testimonial', //Note, I renamed this to be more appropriate
	'type'    =&amp;amp;gt; 'wysiwyg',
	'options' =&amp;amp;gt; array( 'textarea_rows' =&amp;amp;gt; 5, ),
	) );

	$cmb_demo-&amp;amp;gt;add_field( array(
	'name' =&amp;amp;gt; __( 'Author Image', 'cmb2' ),
	'desc' =&amp;amp;gt; __( 'Upload an image or enter a URL.', 'cmb2' ),
	'id'   =&amp;amp;gt; $prefix . 'image', //Note, I renamed this to be more appropriate
	'type' =&amp;amp;gt; 'file',
	) );
}

Quando terminar, você deverá 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 realmente infinitas. Por exemplo, o CMB2 pode ser usado para criar uma página de opções de tema com meta caixas para logotipos, URLs para sites de mídia social ou vídeos. No caso de construir 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 uma vez que os dados são inseridos, você pode exibir o conteúdo com todo o estilo já implementado 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, 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ê.

O que vem a seguir: Plug-ins!

Encontrar o plugin WordPress perfeito que acelera o desenvolvimento do site é um pouco como tentar encontrar o único erro de digitação em uma sequência de código – pode levar algum tempo. E hoje em dia, existem tantos plugins para tarefas diferentes que pode ser difícil identificar exatamente qual funcionalidade um site precisa (ou não) e quais plugins fornecem isso de maneira eficiente.

Baixe este e-book para obter uma lista dos nossos plugins mais recomendados para desenvolvedores!