Close

Meta Boxes

Meta Boxes

  1. Remover meta boxes
  2. Adicionar uma meta box

Na primeira parte deste tutorial, mostrarei a você como remover as meta boxes padrão do WordPress, na segunda parte nós criar uma meta box personalizada com vários campos do zero. Como isso:

WordPress meta box for Pages custom post type with multiple fields
A simple meta box with multiple fields for “Pages” post type.
Uma meta-caixa simples com vários campos para o tipo de postagem “Páginas”.

Remover as meta-caixas padrão

Em todas as páginas de edição de tipo de post, o WordPress já possui meta boxes predefinidas, você pode até ver algumas delas na captura de tela acima, quero dizer “Atributos da página” e “Imagem em destaque”, é claro.

Existem duas maneiras de remover um metabox padrão – usando a  remove_meta_box() função ou com a ajuda de  remove_post_type_support().

remove_meta_box ()

Direto para o exemplo. Vamos supor que precisamos remover os dois metaboxes que eu já mencionei – “Atributos da página” e “Imagem em destaque”. O código será:

add_action( 'admin_menu', 'misha_remove_meta_box' );
 
function misha_remove_meta_box(){
	// Imagem em destaque
remove_meta_box( 'postimagediv', 'page', 'normal' ); 
//Atributos da página
remove_meta_box( 'pageparentdiv', 'page', 'normal' ); }

O primeiro parâmetro da função é um ID de meta box, a maneira mais fácil de descobrir isso é inspecionar o código no seu navegador, mas apenas em um caso, aqui está a lista dos IDs de meta boxes padrão.

  • commentstatusdiv – Discussão,
  • slugdiv – Lesma,
  • commentsdiv – Comentários,
  • postexcerpt – Excerto,
  • authordiv – Autor,
  • revisionsdiv – revisões,
  • postcustom – Os campos personalizados,
  • trackbacksdiv – Enviar Trackbacks,
  • categorydiv – categorias,
  • tagsdiv-post_tag – Tags,
  • {Taxonomy name}div – qualquer taxonomia
  • submitdiv – Publique.

O segundo parâmetro da  remove_meta_box() função é um tipo de postagem do qual você deseja removê-lo.

remove_post_type_support ()

Vamos tentar fazer o mesmo que fizemos com remove_meta_box () função agora.

add_action( 'init', 'misha_remove_meta_box_2' );
 
function misha_remove_meta_box_2() {
	// Imagem em destaque
remove_post_type_support( 'page', 'thumbnail' ); 
// Atributos da página
remove_post_type_support( 'page', 'page-attributes' ); }

Como você pode ver, o código é semelhante, mas ao mesmo tempo é diferente. Eu acho que a maneira mais correta de remover as meta boxes padrão do WordPress é com a  remove_post_type_support() função, porque na verdade desativa um recurso específico para um tipo de postagem específico, e a  remove_meta_box() função apenas remove uma meta box.

Recursos / Meta-caixas:

  • thumbnail – Imagem em destaque metabox
  • author – Autor metabox
  • excerpt – Metabox de trecho
  • trackbacks – Enviar trackbacks metabox
  • custom-fields – Metabox de campos personalizados
  • comments – Comentários metabox
  • revisions – Revisões metabox
  • page-attributes – Atributos da página metabox

Você também pode remover áreas como o título ou o editor de conteúdo:

  • title
  • editor

Adicionar Meta Box Personalizada

Finalmente chegamos à parte do tutorial em que vou mostrar como criar uma meta box no WordPress, aqui está uma captura de tela, apenas para lembrá-lo:

WordPress meta box for Pages custom post type with multiple fields
Uma meta-caixa simples com vários campos para o tipo de postagem “Páginas”.

Existem 2 maneiras de fazer isso – totalmente do zero ou com a ajuda de meu plugin de meta boxes.

Etapa 1. add_meta_box ()

Vamos começar com a  add_meta_box() função dentro do  admin_menu gancho de ação, mas o  add_meta_boxes gancho de ação também está ok.

add_action( 'admin_menu', 'misha_add_metabox' );
 
function misha_add_metabox() {
 
	add_meta_box(
		'misha_metabox', // metabox ID
		'Meta Box', // title
		'misha_metabox_callback', // callback function
		'page', // post type or post types in array
		'normal', // position (normal, side, advanced)
		'default' // priority (default, low, high, core)
	);
 
}
 
function misha_metabox_callback( $post ) {
 
	echo 'hey';
 
}

Depois de inserir esse código no  functions.php tema do seu filho ou em um plug-in personalizado, essa caixa meta deve aparecer:

add_meta_box function example
Exemplo simples de uso da  add_meta_box() função.

Como você pode ver, tudo o que imprimimos dentro da função de retorno de chamada agora é exibido dentro da caixa meta.

Vamos mergulhar nele e preencher nosso metabox com campos.

Etapa 2. Função de retorno de chamada com meta box HTML

No código abaixo, preenchi nossa meta box com vários campos.

function misha_metabox_callback( $post ) {
 
	$seo_title = get_post_meta( $post->ID, 'seo_title', true );
	$seo_robots = get_post_meta( $post->ID, 'seo_robots', true );
 
	// nonce, actually I think it is not necessary here
	wp_nonce_field( 'somerandomstr', '_mishanonce' );
 
	echo '<table class="form-table">
		<tbody>
			<tr>
				<th><label for="seo_title">SEO title</label></th>
				<td><input type="text" id="seo_title" name="seo_title" value="' . esc_attr( $seo_title ) . '" class="regular-text"></td>
			</tr>
			<tr>
				<th><label for="seo_tobots">SEO robots</label></th>
				<td>
					<select id="seo_robots" name="seo_robots">
						<option value="">Select...</option>
						<option value="index,follow"' . selected( 'index,follow', $seo_robots, false ) . '>Show for search engines</option>
						<option value="noindex,nofollow"' . selected( 'noindex,nofollow', $seo_robots, false ) . '>Hide for search engines</option>
					</select>
				</td>
			</tr>
		</tbody>
	</table>';
 
}

Nossa meta box:

WordPress meta box with multiple fields
Agora, imprimimos vários campos na função de retorno de chamada.

Etapa 3. Salve os dados da meta box

Se você estiver usando esse metabox na tela de edição da página ou para um tipo de postagem personalizado, não se esqueça de redefinir os tipos de publicação suportados na linha 23, caso contrário, os dados da metabox não serão salvos.

As funções  update_post_meta() e  delete_post_meta() (linhas 27 a 36) devem ser chamadas para cada campo de entrada na sua meta box.

Functions update_post_meta() and delete_post_meta() (lines 27-36) should be called for each input field in your meta box.

add_action( 'save_post', 'misha_save_meta', 10, 2 );
 
function misha_save_meta( $post_id, $post ) {
 
	// nonce check
	if ( ! isset( $_POST[ '_mishanonce' ] ) || ! wp_verify_nonce( $_POST[ '_mishanonce' ], 'somerandomstr' ) ) {
		return $post_id;
	}
 
	// check current use permissions
	$post_type = get_post_type_object( $post->post_type );
 
	if ( ! current_user_can( $post_type->cap->edit_post, $post_id ) ) {
		return $post_id;
	}
 
	// Do not save the data if autosave
	if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE ) {
		return $post_id;
	}
 
	// define your own post type here
	if( $post->post_type != 'page' ) {
		return $post_id;
	}
 
	if( isset( $_POST[ 'seo_title' ] ) ) {
		update_post_meta( $post_id, 'seo_title', sanitize_text_field( $_POST[ 'seo_title' ] ) );
	} else {
		delete_post_meta( $post_id, 'seo_title' );
	}
	if( isset( $_POST[ 'seo_robots' ] ) ) {
		update_post_meta( $post_id, 'seo_robots', sanitize_text_field( $_POST[ 'seo_robots' ] ) );
	} else {
		delete_post_meta( $post_id, 'seo_robots' );
	}
 
	return $post_id;
 
}

Lembre-se de que, dependendo do seu tipo de campo, você deve usar a higienização. Portanto, no exemplo acima, estou usando a  sanitize_text_field() função, mas também existem outras, como  sanitize_textarea() para campos de área de texto,  sanitize_email() etc.