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.
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á:
- Para simplificar, eu não adicionei nenhuma verificação nonce, permissão de usuário e validação de tipo de post na
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;
}