Como criar uma metabox personalizada do WordPress
Publicados: 2015-06-09O que é uma caixa meta personalizada do WordPress?
Caixas meta personalizadas permitem que informações adicionais sejam adicionadas a postagens, páginas e tipos de postagem personalizados, além das caixas meta padrão que estão automaticamente disponíveis para uso imediato no WordPress, que estão incluídas no núcleo do WordPress.
Esteja você ciente disso ou não, você já usa meta boxes há algum tempo. Coisas como widgets de painel, editor, campos personalizados, imagem em destaque, categorias e tags são exemplos de meta caixas.
Como criar uma metabox personalizada do WordPress
O que acontece quando você precisa criar uma meta box adicional, talvez algo um pouco mais personalizado para o seu projeto? Existem plugins existentes por aí que ajudam a criar meta boxes personalizadas, que podem ser ótimas opções. Mesmo que você decida que este é o caminho que vai seguir, ainda é importante entender os conceitos básicos do que está acontecendo sob o capô das meta caixas personalizadas.
Use CSS Sprites para tornar seu logotipo responsivo
Lembra dos sprites CSS? Eles são um grupo de gráficos diferentes combinados em um arquivo, e nós os usaremos para criar um logotipo responsivo. É uma técnica usada para otimizar o desempenho do navegador porque...
Estaremos analisando conceitos em um nível muito alto quando criarmos esta caixa meta muito simples. Quando terminarmos, teremos uma meta box personalizada que nos permitirá inserir um título de produto.
Apesar de começarmos de forma simples, tenha em mente que essa ideia pode ser expandida para necessidades mais complexas. Existem muitas opções e recursos adicionais que podem ser incluídos em uma meta box personalizada. Coisas como caixas de seleção, upload de arquivos, etc. são todos os recursos possíveis de uma meta box personalizada. Este tutorial pressupõe que você esteja familiarizado com CSS, que é necessário para estilizar os campos. Não entraremos em grandes detalhes para discutir o estilo, mas isso é algo que pode ser feito facilmente depois que sua meta box estiver funcionando.
Desenvolvendo a meta box personalizada
O código personalizado para meta boxes pode ser incluído em functions.php ou em um plugin. Este exemplo incluirá o código necessário na forma de um plugin. Isso pode ser copiado passo a passo para fazer um arquivo completo que está pronto para uso.
O Codex é o seu guia
O Codex será seu melhor amigo, se já não for. Argumentos diferentes têm opções diferentes, e o Codex explicará isso em detalhes. Vale ressaltar que o Codex é algo que você deve conhecer bem.
Teste localmente primeiro
Aqui está o único aviso legal para este tutorial. Tente isso primeiro em um ambiente de desenvolvimento local. Embora todos nós apreciemos um pouco de aventura em nossas vidas, ninguém gosta da tela branca da morte, especialmente em um site ao vivo. Vamos seguir passo a passo neste tutorial, e existem dependências que ocorrem à medida que avançamos nele. Por causa disso, há uma boa chance de que salvar no meio do caminho possa causar um erro.
Primeiro passo: crie e coloque o título no plugin
Criar um plugin pode parecer complexo, mas nem todos os plugins precisam ter centenas de linhas. Os plugins podem ser muito simples, e este é um ótimo exemplo disso. Se você for para a pasta wp-content , verá uma pasta de plugins . Crie uma nova pasta chamada custom-post-meta-box com um arquivo custom-post-meta-box.php nela. Este é o arquivo do qual você irá trabalhar.
Ao criar um plug-in, certifique-se de que essas informações apareçam antes de qualquer código personalizado:
<?php /* Plugin Name: Custom Meta Box Plugin URI: www.yourwebsite.com Description: Creates a meta box in WordPress Version: 1.0.0 Author: Your Name Author URI: www.yourwebsite.com License: GPL2 */
Ative o plug-in
Mesmo que não tenhamos colocado nenhum código lá ainda, podemos ativar o plugin indo em Plugins e procurando por Custom Meta Box e escolhendo Ativar. Por favor, tenha em mente que nada vai mudar ainda.
CSS opcional
Isso é opcional, mas se você planeja adicionar algum CSS personalizado, copie-o em seu arquivo de plugin. Certifique-se de que o arquivo .css seja encontrado na pasta css do seu plugin.
function cmb_add_admin_styles() {
wp_enqueue_style('cmb-admin', plugins_url( 'custom-post-meta-box/css/admin.css' ) );
}
add_action( 'admin_enqueue_scripts', 'cmb_add_admin_styles' );
Etapa dois: adicionar a caixa meta
A função add_meta_box é usada para criar meta caixas personalizadas. Esta função é responsável apenas por registrar e exibir caixas meta personalizadas.
function cmb_add_meta_box() {
add_meta_box(
'custom_post_metabox',
'Our Products',
'cmb_display_meta_box',
'post',
'normal',
'high'
);
}
add_action( 'add_meta_boxes', 'cmb_add_meta_box' );
Dê uma olhada no painel, o título “Nossos Produtos” está aparecendo, mas não há um campo de texto para inserirmos nosso texto.
Etapa três: adicionar o campo meta box no admin
Precisamos ter certeza de que há um rótulo e um campo para as informações. Usando html, isso é possível.
function cmb_display_meta_box( $post ) {
wp_nonce_field( plugin_basename(__FILE__), 'cmb_nonce_field' );
$html = '<label id="product-title" for="product-title">';
$html .= 'Product Title';
$html .= '</label>';
$html .= '<input type="text" id="product-title" name="product-title" value="' . get_post_meta( $post->ID, 'product-title', true ) . '" placeholder="What is the Product Title?" />';
echo $html;
}
// this echoes a single stream of html
Veja como as coisas estão envolvidas no <label> ? Chegamos a ver o texto descritivo “Título do Produto” que ajuda o usuário a entender qual é o campo e que tipo de informação deve ser inserida. Observe também que há um texto de espaço reservado, que também adiciona informações úteis.
Sua entrada pode não ser tão ampla. Alguns CSS customizados foram feitos para que todo o texto do placeholder pudesse ser mostrado; a etiqueta tem uma largura de 100%.
Etapa quatro: Salvando os dados e a importância de usar um nonce
Você pode ter digitado texto na Etapa Três e percebido que ele não está realmente sendo salvo ou exibido na página. Esta etapa é realmente onde toda a mágica acontece.
function cmb_save_meta_box_data( $post_id ) {
if ( cmb_user_can_save( $post_id, 'cmb_nonce_field' ) ) {
if ( isset( $_POST['product-title'] ) && 0 < count( strlen( trim( $_POST['product-title'] ) ) ) ) {
$product_title = stripslashes( strip_tags( $_POST['product-title'] ) );
update_post_meta( $post_id, 'product-title', $product_title );
}
}
}
add_action( 'save_post', 'cmb_save_meta_box_data' );
function cmb_display_product( $content ) {
if ( is_single () ){
$html = 'The Product Title is: ' . get_post_meta( get_the_ID(), 'product-title', true );
$content .= $html;
}
return $content;
}
add_action('the_content', 'cmb_display_product');
function cmb_user_can_save( $post_id, $nonce ) {
$is_autosave = wp_is_post_autosave( $post_id );
$is_revision = wp_is_post_revision( $post_id );
$is_valid_nonce = ( isset( $_POST[ $nonce ] ) && wp_verify_nonce( $_POST [ $nonce ], plugin_basename( __FILE__ ) ) );
return ! ( $is_autosave || $is_revision ) && $is_valid_nonce;
}
Tem algumas coisas acontecendo aqui. Basicamente, a função cmb_save_meta_box_data é o que precisamos para que todo o salvamento ocorra. Estaremos focando na segurança com um valor nonce. Esta é uma medida de segurança que garante que os dados a serem salvos venham da fonte correta. Além disso, queremos ter certeza de que a postagem não é um salvamento automático ou uma revisão. Em seguida, o nonce será validado e o usuário poderá salvar.
Agora que podemos salvar com segurança, é assim que as metainformações aparecem na página. Como você pode ver, ele pode ser facilmente estilizado, mas funciona e os dados são salvos.
Leitura adicional e trabalhos de casa
Como você pode ver, em apenas alguns passos, você pode ter uma meta box personalizada. Como a maioria dos projetos de desenvolvimento, existem várias maneiras de alcançar a mesma coisa, então você pode encontrar outras abordagens para essa mesma tarefa.
Demos uma olhada nas meta caixas personalizadas em um nível muito alto, então você pode querer dar uma olhada mais profunda nesses conceitos. Se você tiver uma necessidade maior de meta boxes personalizadas, aqui estão algumas ótimas fontes para mais descobertas:
- Mais informações sobre nonces
- Plugin Meta Box
- Opções para a função add_meta_box