Close

Lógica Condicional em Meta-Box WordPress

Lógica Condicional em Meta-Box WordPress

Neste tutorial, explicarei como mostrar ou ocultar um campo, dependendo do valor de outro campo em uma metabox simples do WordPress.

 

Conditional meta box in WordPress
Exemplo de meta-caixa condicional em que a visibilidade de um campo depende do valor de outro campo.

Seguindo o meu tutorial de meta box , não é difícil criar um, vamos começar inserindo o código a seguir no seu tema atual functions.phpou em um plug-in personalizado.

add_action( 'add_meta_boxes', 'misha_add_product_metabox' );
 
function misha_add_product_metabox() {
 
	add_meta_box( 'misha_product_metabox', 'Meta Box', 'misha_callback', 'product', 'normal', 'default' );
 
}
 
function misha_callback( $post ) {
 
	$product_type = get_post_meta( $post->ID, 'product_type', true );
	$items_in_stock = get_post_meta( $post->ID, 'items_in_stock', true );
 
	// you can add a nonce field here as well
 
	echo '<table class="form-table"><tbody>
		<tr>
			<th>Product type</th>
			<td>
				<p><label><input type="radio" name="product_type"' . checked( $product_type, 'virtual', false) . ' value="virtual"> Virtual</label></p>
				<p><label><input type="radio" name="product_type"' . checked( $product_type, 'physical', false) . ' value="physical"> Physical</label></p>
			</td>
		</tr>
		<tr' . ( 'physical' !== $product_type ? ' style="display:none"' : '' ) . '>
			<th><label for="items_in_stock">Items in stock</label></th>
			<td>
				<input type="number" id="items_in_stock" name="items_in_stock" value="1" class="small-text">
			</td>
		</tr>
	</tbody></table>';
 
}
 
 
 
add_action( 'save_post', 'misha_save_product_meta', 10, 2 );
 
function misha_save_product_meta( $post_id, $post ) {
 
 
	// you can add nonce, permission and post type validation here
 
 
	if( isset( $_POST[ 'product_type' ] ) ) {
		update_post_meta( $post_id, 'product_type', sanitize_text_field( $_POST[ 'product_type' ] ) );
	} else {
		delete_post_meta( $post_id, 'product_type' );
	}
	if( isset( $_POST[ 'items_in_stock' ] ) ) {
		update_post_meta( $post_id, 'items_in_stock', intval( $_POST[ 'items_in_stock' ] ) );
	} else {
		delete_post_meta( $post_id, 'items_in_stock' );
	}
 
	return $post_id;
 
}
    • Para simplificar, eu não adicionei nenhuma verificação nonce, permissão de usuário e validação de tipo de post na misha_save_product_meta()função (linha 41), mas é melhor adicioná-lo. Se você não tem idéia do que estou falando, leia este tutorial .
    • Se você inserir esse código como está e não tiver um tipo de postagem personalizado productregistrado, nada acontecerá; portanto, é necessário alterar o nome do tipo de postagem na linha 5 ou registrar um tipo de postagem de produto.

    Na verdade, não é tudo. Também temos que adicionar um pouco de JavaScript, para que o campo numérico seja oculto ou mostrado, dependendo do valor dos botões de opção. Aqui está:

jQuery( function( $ ) {
 
	$( 'input[name="product_type"]' ).change( function() {
		var val = $(this).val();
		if( 'physical' == val ) {
			$( '#items_in_stock' ).parent().parent().show();
		} else {
			$( '#items_in_stock' ).parent().parent().hide();
		}
	});
 
} );

Como criar campos condicionais facilmente com meu plug-in

Tudo bem, se você decidir criar uma meta box com campos condicionais do zero, mas eu pessoalmente nunca faço isso, porque consome muito tempo.

add_filter( 'simple_register_metaboxes', 'misha_product_metabox' );
 
function misha_product_metabox( $metaboxes ) {
 
	$metaboxes[] = array(
 		'id'	=> 'my_product_metabox',
 		'name'	=> 'Meta Box',
 		'post_type' => array( 'product' ),
 		'fields' => array(
			array(
				'id' => 'product_type',
				'label' => 'Product type',
				'type' => 'radio',
				'default' => 'virtual',
				'options' => array( 
					'virtual' => 'Virtual', 
					'physical' => 'Physical' 
				),
			),
			array(
				'id' => 'items_in_stock',
				'label' => 'Items in stock',
				'type' => 'number',
				'default' => 1,
				'show_if' => array(
					'id' => 'product_type',
					'value' => 'physical',
				),
			)
 		)
 	);
 
	return $metaboxes;
 
}