Por alguna razón tal vez has querido agregar un elemento html en las páginas de edición de los post o page. Algo como por ejemplo un checkbox para mostrar el título de la entrada o página, tal vez guardar algún valor para después utilizarlo. Recientemente cree una plantilla WordPress y por una extraña razón el cliente quería que en algunas páginas se  mostrara el título y en otras no, por lo que para ello me fue necesario construir un metabox. En este artículo encontrará todo sobre los mataboxes en WordPress.

 

¿Qué es un metabox en WordPress?

Si tratas de editar un post verás pequeñas cajas html como Categorías, Tags, Featured Image e incluso más. Pues sí esos elementos visuales son metaboxes y tienen la función de guardar información relacionada con el post que estás editando. A continuación les muestro una imagen para que entiendan mejor el concepto. Todos los recuadros rojos son metaboxes.

Todo acerca de metaboxes/ejemplos de metaboxes

 

 

¿Para qué son útiles los metaboxes?

Como dije anteriormente los metaboxes son muy útiles, ya que guardan la información del post que se está editando, y por supuesto después se utiliza esa información y se le brinda al usuario.  Estos elementos visuales pueden ser ocultados de la pantalla fácilmente e incluso ordenados en posiciones mas visibles, hablando en otras palabras el usuario puedes personalizar su entorno de edición como les guste.

¿Cómo crear un metabox en WordPress?

Un metabox se crea fácilmente con la función add_meta_box(). En el siguiente ejemplo se crea una función para ser enlazada posteriormente con un hook especial para esto.

function page_options_meta_box_add(){
    add_meta_box( 'page_options_meta_box', 'Page Options', 'page_options_meta_box_content', 'page', 'side', 'high' );
}

add_meta_box recibe 6 argumentos:

1er argumento page_option_metabox: Es el id del metabox.

2do argumento Page option: Es el texto que aparecerá como título del metabox.

3ro argumento page_option_meta_box_content: Es el nombre de la función que contendrá el html del metabox.

4to argumento page: Aquí se define donde quieres quieres que aparezca el metabox en este caso es en page, pudiera ser cualquier Custom Post Type, si no sabes de que hablo lee este artículo Custom Post Type en WordPress (CPT).

5to argumento side: Donde se posicionará el metabox, puede ser side, advance o normal. En este caso definimos side por lo que el metabox estará en la parte izquierda de la pantalla.

6to argumento high: Este argumento es la prioridad y como su nombre lo indica es el orden con el cual los metaboxes se ordenarán. Puede ser high o low.

function page_options_meta_box_content(){
    // $post is already set, and contains an object: the WordPress post
    global $post;
    $values = get_post_custom( $post->ID );
    $page_title_check = isset($values['page_title_meta_box_check']) ? esc_attr($values['page_title_meta_box_check'][0]) : 'on';

    ?>
     <p>
        <input type="checkbox" id="page_title_meta_box_check" name="page_title_meta_box_check" <?php checked( $page_title_check, 'on' ); ?> />
        <label for="page_title_meta_box_check">Show Page Title</label>
    </p>
    <?php

    wp_nonce_field( 'page_options_meta_box', 'page_options_meta_box_nonce' );
}

Está función como dije anteriormente define la estructura html del metabox.

¿Cómo salvar la información del metabox en la base de datos de WordPress?

function page_options_meta_box_save($post_id)
{
    
    if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
     
   
    if( !isset( $_POST['page_options_meta_box_nonce'] ) || !wp_verify_nonce( $_POST['page_options_meta_box_nonce'], 'page_options_meta_box' ) ) return;
     

    if ( !current_user_can( 'edit_post', $post_id ) ) return;

    $page_title_chk = isset($_POST['page_title_meta_box_check']) ? 'on' : 'off';
    update_post_meta( $post_id, 'page_title_meta_box_check', $page_title_chk );
}

add_action( 'save_post', 'page_options_meta_box_save' );

Se crea una función llamada page_option_meta_box_save para encapsular toda la lógica de como salvar los datos del metabox en la base de datos de WordPress. Está función después es utilizada en el hook save_post, el cual es el encargado de este proceso de almacenamiento, por cierto esto valores se almacenarán en la tabla postmeta  de la base de datos de WordPress.

 

¿Cómo recuperar valores de los metaboxes?

Para recuperar el valor de un metabox de cierto post es sumamente fácil solo hace falta el id del post y el id del metabox. Todo esto se hace con la función get_post_meta().

get_post_meta( $page_id, 'page_title_meta_box_check');

Este código lo utilice hace unos días para darle la opción al usuario de elegir si quería mostrar el título o no de las páginas en WordPress. Es fácil deducir que podríamos utilizar esta condicional en page.php (plantilla por defecto de WordPress para mostrar las páginas) para decidir si mostraremos o no el título en ella.

 

Conclusiones

Este tema de los metaboxes en WordPress no es tan díficil, pero si es sumamente importante si quieres llevar a tu sitio a lo mas alto. En mi caso especial lo he utilizado mucho en la creación de plantillas y plugin en WordPress, y sin duda ha sido un aliado maravilloso. Esto será todo, si tiene alguna duda o algo no le quedo claro pues deje un mensaje debajo y pronto le responderé.

 

 

Acerca de mi

Yariel Gordillo

Desarrollador Web amante a las tecnologías y a como se ve el código en un browser. Me gusta los días lluviosos donde suelo tirarme en la cama y ver Netflix...bueno cuando no estoy delante de sublime...

Síguenos en nuestras redes

Contenido

Post Recientes