Boxes y campos personalizados en WP
Una de las cosas que acaban sucediendo más tarde o más temprano es la necesidad de crear Boxes y campos personalizados en WP, esto es debido a la flexibilidad que nos ofrecen a la hora de trabajar y de manejar los datos.
Aunque hay algunos plugins de pago para hacer esto (alrededor de 200$) puede resultar interesante el ahorrarnos ese dinero si no creemos que pueda resultar rentable a corto plazo.
Bueno para empezar trabajaremos con con un ejemplo real en el que he estado trabajando; consiste en un club de campo que quiere mostrar los próximos eventos y torneos de golf que van a tener lugar, de modo que hay que añadirles una fecha y es lo que vamos a intentar en este tutorial.
Para realizar esto hay que utilizar la función add_meta_box(), como aparece a continuación:
add_meta_box( $id, $title, $callback, $post_type, $context, $priority, $callback_args );
Que como vemos recibe los siguientes parámetros:
- $id: (requerido) se trata de la id de pantalla de edición que mostrará el meta box
- $title: (requerido) es el titulo que va a tener nuestro meta box
- $callback: (requerido) es la función encargada de mostrar el código html que irá dentro del meta box
- $post_type: (requerido) es el nombre del tipo de post que se mostrará en el meta box, ya sean personalizados (custom-post), página (page) o entradas del blog (post), si se quiere añadir el meta box a más de un tipo de entrada se debe de añadir add_meta_box() por cada tipo de función
- $context: indica el lugar donde queremos que se muestre el metabox y puede tener varios valores:
- normal o avanced: si se quiere poner bajo el contenido del post
- side: si se quiere colocar en la columna lateral
- $priority: aquí se puede escoger la prioridad de nuestra caja aunque no es algo 100% fiable ya que puede haber plugins que enfrenten las prioridades o que el usuario las mueva para ponerlas de la forma más cómoda para él.
- $callback_args: se trata de un array donde podemos definir argumentos para enviarlos a la función call_back que recibe el objeto $post y este array.
Una vez que sabemos como funciona podemos realizar un primer ejemplo muy sencillo donde vemos un resultado inmediato.
Para ello nos vamos a nuestro archivo functions del tema (o creamos un plugin como veremos más adelante) y copiamos este trozo de código:
add_action('add_meta_boxes', 'fechas'); function fechas() { add_meta_box( 'fecha', __('Escoge una fecha para el evento'), 'fecha_callback', 'post', 'side', 'high', array( 'arg' => 'value') ); } function fecha_callback( $post, $args = array() ) { echo "Aqui aparece lo que queramos!!!"; }
Si ahora nos vamos a crear un nueva entrada veremos que aparece lo siguiente
Una vez que tenemos esto hecho es bastante sencillo imaginar como introducir código html en el callback como vamos aquí:
add_action('add_meta_boxes', 'fechas'); function fechas() { add_meta_box( 'fecha', __('Escoge una fecha para el evento'), 'fecha_callback', 'post', 'side', 'high', array( 'key' => 'value') ); } function fecha_callback( $post, $args = array() ) { //para saber más sobre nonce mira en http://codex.wordpress.org/Function_Reference/wp_nonce_field wp_nonce_field( 'fechas', 'fechas_noncename' ); //toma los metavalores del post en el que nos encontramos $post_meta = get_post_custom($post->ID); //The input text $current_value = ''; if( isset( $post_meta['text_meta_field'][0] ) ) { $current_value = $post_meta['text_meta_field'][0]; } ?> //El input text ?> <p> <label class="label" for="text_meta_field">Introduce la fecha</label> <input name="text_meta_field" id="text_meta_field" type="text" value=""> </p> <?php } ?>
Lo cual nos da como resultado:
Pero esto solo es una caja donde poner texto que no va a ninguna parte, para hacer que esta información se grave necesitamos introducir una nueva función que grave las fechas y que nos sirva para recoger los datos del formulario.
add_action('save_post', 'grabar_fechas', 10, 2); function grabar_fechas( $post_id, $post ){ // Primero comprobamos el tipo de post y que el usuario tenga permiso para editarlo // Esto puede cambio según el post_type y las capabilities definidas para el if ( 'post' != $post->post_type || ! current_user_can( 'edit_post', $post_id ) ) { return; } // Segundo, comprobamos el nonce como medida de seguridad if ( !isset( $_POST['fechas_noncename'] ) || ! wp_verify_nonce( $_POST['fechas_noncename'], 'fechas' ) ) { return; } //Tercero, validamos y almacenamos el valor del custom field o lo borramos si es necesario //El text input if( isset($_POST['text_meta_field']) && $_POST['text_meta_field'] != "" ) { update_post_meta( $post_id, 'text_meta_field', sanitize_text_field( $_POST['text_meta_field'] ) ); } else { //$_POST['text_meta_field'] no tiene valor establecido, eliminar el meta field de la base de datos if ( isset( $post_id ) ) { delete_post_meta($post_id, 'text_meta_field'); } } }
Perfecto, ahora ya podemos hacer boxes y campos personalizados en WP, pero aun nos falta algo, ponerlos en el front-end, para ello es tan sencillo como irnos a nuestros bucles, ya sean de una entrada sola, de una colección de las mismas… e introducir el siguiente código que como podrás observar es totalmente personalizable
$custom_fields = get_post_custom(); ?> <ul> <?php if( isset($custom_fields['text_meta_field']) ) { ?> <li>Fecha: <?php echo $custom_fields['text_meta_field'][0]; ?></li> <?php } ?> </ul>
Naturalmente esto son solo unas ideas, se puede avanzar mucho más e introducir prácticamente cualquier cosa que necesitemos, para luego capturarla y editarla o mostrarla a nuestro gusto.
There is One Comment.