Metaboxes de WordPress: una guía rápida

Los metaboxes de WordPress son cuadros arrastrables que se muestran en la pantalla de edición y se utilizan para manejar datos adicionales, como términos de taxonomía. En este artículo vamos a echar un vistazo a los metaboxes de WordPress y a ver cómo podemos crear nuestros propios cuadros personalizados, averiguar cómo guardar los cambios que hacemos y cómo podemos mostrar su contenido en la parte frontal de nuestro sitio web.

¡Empecemos!

Campos personalizados, metacuadros y metadatos

Existe mucha confusión sobre la diferencia entre estos tres términos. Echemos un vistazo a los tres para obtener una mejor comprensión de lo que son y cómo funcionan.

Metadatos

Los metadatos de una publicación son la información adicional sobre una publicación que se almacena en la tabla de metadatos de la base de datos.

Cada par clave/valor se considera un 'campo de publicación'. No hay límites sobre la cantidad de metaentradas que puede tener esta tabla.

Campos Personalizados

Hay campos que están predefinidos por WordPress, como la imagen de la función, que técnicamente son campos personalizados. Se pueden agregar otros mediante un complemento o código personalizado y definidos por el usuario administrador. Puede obtener más información sobre los campos personalizados leyendo nuestro artículo 'Primeros pasos con los campos personalizados de WordPress'.

Metaboxes

Cuando abre una publicación de WordPress para editarla, verá que la página se divide en diferentes secciones (muchas de las cuales se encuentran en la barra lateral del lado derecho).

Todas estas secciones son técnicamente 'cajas meta'. Por lo tanto, el editor de publicaciones principal, los contenedores para elegir categorías, publicar la publicación, agregar etiquetas, agregar una imagen destacada son metacuadros que contienen elementos HTML que interactúan con los metadatos de la publicación. Dependiendo de cómo el sitio web maneje los metadatos, estos cuadros aparecerán en diferentes ubicaciones en su pantalla.

A modo de ejemplo adicional, veamos el cuadro de metadatos Imagen destacada. Esto normalmente se encuentra en la barra lateral derecha de la pantalla de administración de una publicación. Allí, puedes cambiar fácilmente la imagen. Cuando haces esto, en realidad estás actualizando el _thumbnail_id de los metadatos de esa publicación.

Un meta cuadro de campo personalizado, como la 'fuente' (que agregamos en nuestro tutorial sobre Campos personalizados), generalmente se puede encontrar debajo del editor de publicaciones principal.

Creando un Meta Box para nuestro Tipo de Publicación Personalizada

Ahora que tenemos una idea más clara de qué son exactamente los metaboxes, podemos continuar y crear nuestro propio metabox personalizado para nuestro sitio web. Este tutorial es una continuación de nuestro tutorial sobre Tipos de publicaciones personalizadas... si desea seguir paso a paso, deberá consultar ese artículo y crear un tipo de publicación personalizado llamado "recetas" y luego configurar un par de "recetas". ' Publicaciones de prueba con una imagen destacada seleccionada.

En este tutorial, ampliaremos nuestro tipo de publicación personalizada agregando un nuevo cuadro meta que se usará para definir si la receta es vegana o no al marcar una casilla de verificación.

Paso 1: registre el Meta Box

Para agregar un cuadro meta en nuestro tipo de publicación personalizada, usamos la función add_meta_box proporcionada por WordPress. Aquí está la estructura de la función con los argumentos que usaremos:

 add_meta_box( $id, $title, $callback, $screen, $context )

Para la identificación única usaremos is_vegan y para el título del cuadro meta la cadena Is Vegan .

La función de devolución de llamada para mostrar el contenido de la caja será display_vegan_meta_box . El atributo $screen se refiere a la pantalla de administración en la que se mostrará el cuadro meta. En nuestro caso, esta es el área de edición de publicaciones de la receta, por lo que será el nombre único del tipo de publicación que, como se mencionó anteriormente, es recipes . El parámetro $context varía según la pantalla de administración.

Los contextos de la pantalla de edición posterior que usaremos aquí incluyen normal, lateral y avanzado como los valores de contexto disponibles. Usaremos el valor lateral para mostrar el cuadro meta en la barra lateral de la página de edición de publicaciones.

Entonces, en resumen, usando los parámetros definidos anteriormente, el código que debemos agregar en my-custom-post-type.php debería verse así:

 function my_metabox() { add_meta_box( 'is_vegan', 'Is Vegan', 'display_vegan_meta_box', 'recipes', 'side' ); } add_action( 'admin_init', 'my_metabox' );

Como verá, usamos el admin_init que se activa antes que cualquier otro enlace cuando un usuario accede al área de administración.

Ahora, si visita la página de edición de una publicación de receta, debería ver el cuadro en la barra lateral. Por supuesto, el contenido está actualmente vacío.

El siguiente paso es llenar la caja con el contenido deseado.

Paso 2: mostrar el contenido básico de Meta Box

Mantendremos el contenido de este cuadro simple. Todo lo que necesitamos es una descripción y una casilla de verificación. Como se mencionó, el contenido se devuelve en la función display_vegan_meta_box .

Continúe y agregue el código a continuación en la función my_metabox :

 function display_vegan_meta_box( $recipe ) { ?> <span class="title">Vegan recipe?</span> <span class="content"> <label for="vegan_checkbox"> <input type="checkbox" name="vegan_checkbox" value="yes" /> </label> </span> <?php }

Lo que hicimos en esta función fue generar una casilla de verificación HTML que por ahora no está marcada. Después de introducir la función de guardar, volveremos a esta sección del código para hacer algunos cambios más, de modo que cuando se cargue la página de edición posterior, la casilla de verificación recupere el estado guardado de la casilla de verificación.

Paso 3: guarde el valor de Meta Box en la base de datos

Para guardar el valor de los campos de entrada del metabox, usamos el enlace de acción save_post que WordPress proporciona de esta manera:

 function update_vegan_box( $post_id ) { if( !current_user_can( 'edit_post' ) ) return; if ( 'recipes' == get_post_type() ) { if ( isset( $_POST['vegan_checkbox'] ) && $_POST['vegan_checkbox'] != '' ) { update_post_meta( $post_id, 'is_vegan', $_POST['vegan_checkbox'] ); }else { update_post_meta( $post_id, 'is_vegan', "no" ); } } } add_action( 'save_post', 'update_vegan_box' );

Dentro de la función update_vegan_bo con el argumento $post_id incluimos algunas condiciones. Primero queremos verificar si el usuario tiene permiso para editar la publicación y también asegurarnos de que estamos editando un tipo de publicación de recipes .

Entonces, si la publicación pertenece al tipo de recipes , examinamos el valor de la casilla de verificación. Recuerde que, de forma predeterminada, cuando la casilla de verificación está marcada, el valor de la base de datos que se almacena es 'sí' y, si no, el valor es NULL. Modificamos esto un poco para que el valor 'no' se guarde cuando guardamos la publicación con el metabox vegano sin marcar.

Aquí usamos la función de WordPress update_post_meta( $post_id, $meta_key, $meta_value, $prev_value = '' )

En sus argumentos, definimos la identificación de la publicación, la clave meta, el valor meta. Sin embargo, la función puede aceptar un argumento más, el $prev_value
en caso de que queramos comprobar el valor anterior antes de actualizar y solo si es igual, proceder y actualizar.

Paso 4: refine el código de contenido de Meta Box

Ahora volvamos a la función anterior que genera el contenido del metabox y agreguemos algunas líneas más de código que recuperan los datos relacionados de la base de datos.

 function display_vegan_meta_box( $recipe ) { $is_value = esc_html( get_post_meta( $recipe->ID, 'is_vegan', true ) ); $checked; if ( $is_value == "yes" ) { $checked = "checked"; } else if ( $is_value == "no" ) { $checked = ""; } else { $checked="";} ?> <span class="title">Vegan recipe?</span> <span class="content"><label for="vegan_checkbox"> <input type="checkbox" name="vegan_checkbox" value="yes" <?php echo $checked; ?> /> </label></span> <?php }

Entonces, primero, recuperamos el valor meta is_vegan y luego, si corresponde, el valor checked se pasará a la variable $checked y se repetirá en la salida HTML.

Y eso es. Ahora tenemos un meta cuadro de trabajo que se puede usar para definir si la receta en nuestra publicación personalizada es vegana o no.

Conclusión

Los metaboxes ofrecen un mayor nivel de control y flexibilidad en las publicaciones y se pueden aprovechar de varias maneras. Lo que es especialmente bueno de ellos es que están separados del resto del contenido de la publicación y, al mismo tiempo, residen en la misma pantalla de administración, lo que hace que administrarlos sea mucho más fácil que si estuvieran ubicados en otro lugar del administrador de WordPress.

Al igual que con la mayoría de la codificación de WordPress, puede llevar un tiempo familiarizarse con el uso de metaboxes. Con suerte, la información anterior es suficiente para comenzar. ¡Feliz codificación!