fbpx

La mayoría de los tipos de publicaciones personalizadas en WordPress necesitarán (o podrían beneficiarse de) un conjunto único de metaboxes para ingresar información.

Por ejemplo, un tipo de publicación de «fotografía» podría necesitar campos para «ubicación de la foto», «tipo de cámara», etc. Y un tipo de publicación de «evento» probablemente necesitaría una «ubicación» y una «fecha de evento».

Los metaboxes no son los más fáciles de configurar, así que escribí este tutorial que muestra cómo agregar un campo de una línea para «ubicación» a un tipo de publicación de «evento».

Con suerte, podrá utilizar esta guía para agregar cualquier tipo de metaboxes que necesite.

Configurar el tipo de publicación

Si no está familiarizado con cómo configurar tipos de publicaciones personalizadas, consulte el excelente tutorial de Justin Tadlock . Para este ejemplo, voy a usar un tipo de publicación llamado «Evento», que va en mi archivo functions.php:

/**
 * Registers the event post type.
 */
function wpt_event_post_type() {

    $labels = array(
        'name'               => __( 'Events' ),
        'singular_name'      => __( 'Event' ),
        'add_new'            => __( 'Add New Event' ),
        'add_new_item'       => __( 'Add New Event' ),
        'edit_item'          => __( 'Edit Event' ),
        'new_item'           => __( 'Add New Event' ),
        'view_item'          => __( 'View Event' ),
        'search_items'       => __( 'Search Event' ),
        'not_found'          => __( 'No events found' ),
        'not_found_in_trash' => __( 'No events found in trash' )
    );

    $supports = array(
        'title',
        'editor',
        'thumbnail',
        'comments',
        'revisions',
    );

    $args = array(
        'labels'               => $labels,
        'supports'             => $supports,
        'public'               => true,
        'capability_type'      => 'post',
        'rewrite'              => array( 'slug' => 'events' ),
        'has_archive'          => true,
        'menu_position'        => 30,
        'menu_icon'            => 'dashicons-calendar-alt',
        'register_meta_box_cb' => 'wpt_add_event_metaboxes',
    );

    register_post_type( 'events', $args );

}
add_action( 'init', 'wpt_event_post_type' );

Es posible que tenga su propio tipo de publicación personalizada configurado completamente diferente, pero está bien. La línea de código importante para las metaboxes es ‘register_meta_box_cb’ => ‘add_events_metaboxes’ – que llama a la función para construir las metaboxes.

Puede cambiar el nombre de la función a lo que quiera, por ejemplo, ‘register_meta_box_cb’ => ‘add_photography_metaboxes’ podría ser mejor para un tipo de publicación de fotografía.

Si el tipo de publicación se registra a través de un complemento o es uno de los tipos de publicación nativos, también puede usar:

add_action( 'add_meta_boxes', 'add_events_metaboxes' );

Agregar Meta Box

El siguiente código agrega un metabox al lado derecho de la pantalla debajo del cuadro «Publicar»:

/**
 * Adds a metabox to the right side of the screen under the "Publish" box
 */
function wpt_add_event_metaboxes() {
    add_meta_box(
        'wpt_events_location',
        'Event Location',
        'wpt_events_location',
        'events',
        'side',
        'default'
    );
}

Puede leer los parámetros completos de add_meta_box en wp codex . También los enumeré aquí:

add_meta_box( $id, $title, $callback, $page, $context, $priority, $callback_args );

Para el ejemplo anterior:

  • $ id es «wpt_events_location» – o la identificación html que se aplicará a este metabox.
  • $ title es «Ubicación del evento». Esto aparece en la parte superior del nuevo metabox cuando se muestra.
  • $ callback es la función «wpt_events_location» que cargará el html en el metabox.
  • $ page es «eventos», el nombre de nuestro tipo de publicación personalizada.
  • $ context es «lateral». Si desea que se cargue debajo del área de contenido, puede poner «normal».
  • $ controles de prioridad donde se mostrará el metabox en relación con los otros metaboxes. Puede poner «alto», «bajo» o «predeterminado».

Generando el HTML para Metabox

Continuando con el primer ejemplo anterior, ahora tendremos que generar el código que va dentro de nuestro metabox «Ubicación del evento». Para que esto sea lo más simple posible, solo crearemos un campo:

/**
 * Output the HTML for the metabox.
 */
function wpt_events_location() {
    global $post;

    // Nonce field to validate form request came from current site
    wp_nonce_field( basename( __FILE__ ), 'event_fields' );

    // Get the location data if it's already been entered
    $location = get_post_meta( $post->ID, 'location', true );

    // Output the field
    echo '<input type="text" name="location" value="' . esc_textarea( $location )  . '" class="widefat">';

}

n este punto, debería aparecer un metabox en su publicación. Si verifica el tipo de publicación de «eventos», debería cargarse en el lado derecho como en la captura de pantalla que publiqué. Esto generará cualquier html que elija, por lo tanto, puede poner tantos campos de entrada aquí como desee, o descripciones html.

Para clasificar las entradas y descripciones correctamente, consulte el código fuente de otros paneles de escritura en WordPress. Vea cómo hacen áreas de texto y seleccionan cuadros. Incluso puede agregar iconos y texto generado en estos lugares.

Ahorro

Si hubiera intentado guardar los datos de su metabox antes de este punto, simplemente habrían desaparecido en la actualización porque no se estaban guardando. Aquí está el código que actualiza el metabox cuando hace clic en «Actualizar»:

/**
 * Save the metabox data
 */
function wpt_save_events_meta( $post_id, $post ) {

    // Return if the user doesn't have edit permissions.
    if ( ! current_user_can( 'edit_post', $post_id ) ) {
        return $post_id;
    }

    // Verify this came from the our screen and with proper authorization,
    // because save_post can be triggered at other times.
    if ( ! isset( $_POST['location'] ) || ! wp_verify_nonce( $_POST['event_fields'], basename(__FILE__) ) ) {
        return $post_id;
    }

    // Now that we're authenticated, time to save the data.
    // This sanitizes the data from the field and saves it into an array $events_meta.
    $events_meta['location'] = esc_textarea( $_POST['location'] );

    // Cycle through the $events_meta array.
    // Note, in this example we just have one item, but this is helpful if you have multiple.
    foreach ( $events_meta as $key => $value ) :

        // Don't store custom data twice
        if ( 'revision' === $post->post_type ) {
            return;
        }

        if ( get_post_meta( $post_id, $key, false ) ) {
            // If the custom field already has a value, update it.
            update_post_meta( $post_id, $key, $value );
        } else {
            // If the custom field doesn't have a value, add it.
            add_post_meta( $post_id, $key, $value);
        }

        if ( ! $value ) {
            // Delete the meta key if there's no value
            delete_post_meta( $post_id, $key );
        }

    endforeach;

}
add_action( 'save_post', 'wpt_save_events_meta', 1, 2 );

Este código verifica para asegurarse de que el usuario tenga privilegios para actualizar la publicación y luego guarda los datos que están en el campo event_location.

Otros recursos

Si necesita agregar una gran cantidad de metacampos personalizados (especialmente los más complejos como selectores de fechas, cargadores de archivos, etc.), puede considerar usar una biblioteca como CMB2 Advanced Custom Fields.

Todo el código de esta publicación esta acá. Comparte y ayuda.