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.php
ou 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
product
registrado, 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; }