Cómo agregar metaboxes personalizados en publicaciones y tipos de publicaciones de WordPress

¿Desea crear cajas meta personalizadas para sus publicaciones, páginas y tipos de publicaciones personalizadas de WordPress? Los cuadros de metadatos personalizados se utilizan comúnmente para proporcionar una mejor interfaz de usuario para agregar campos personalizados (metadatos) a su contenido. En este artículo, explicaremos qué es un metabox personalizado y cómo puede agregar fácilmente metaboxes personalizados en publicaciones y tipos de publicaciones de WordPress.

¿Qué es un Meta Box personalizado en WordPress?

Custom Meta Box es una interfaz más fácil de usar para agregar campos personalizados (metadatos) en sus publicaciones, páginas y otros tipos de publicaciones personalizadas. WordPress viene con una interfaz fácil de usar que lo ayuda a crear contenido como publicaciones y páginas, o tipos de publicaciones personalizadas. Normalmente, cada tipo de contenido consta del contenido real y sus metadatos. Los metadatos son información relacionada con ese contenido, como fecha y hora, nombre del autor, título, etc. También puede agregar sus propios metadatos mediante campos personalizados.

Sin embargo, agregar metadatos utilizando el área de campos personalizados predeterminada no es muy intuitivo. Aquí es donde entran en juego los metaboxes personalizados. WordPress permite a los desarrolladores crear y agregar sus propios metaboxes personalizados en las pantallas de publicación. Así es como los complementos más populares agregan diferentes opciones en sus pantallas de edición de publicaciones. Por ejemplo, el título de SEO y el cuadro de meta descripción dentro del complemento All in One SEO es un cuadro de meta personalizado:

Dicho esto, veamos cómo puede agregar fácilmente metacajas personalizadas en publicaciones y tipos de publicaciones de WordPress.

Crea metacajas personalizadas en WordPress

En primer lugar, debe instalar y activar el complemento Campos personalizados avanzados. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress. Tras la activación, el complemento agrega un nuevo elemento de menú titulado `` Campos personalizados '' a su barra de administración de WordPress. Al hacer clic en él, accederá a la página de campos personalizados. Esta página estará vacía porque aún no ha creado ningún campo personalizado. Continúe y haga clic en el botón "Agregar nuevo" para continuar.

Serás redirigido a la página "Agregar un nuevo grupo de controles". Aquí debe proporcionar un título para su grupo de campo. Este título se utilizará como título de su metabox. Después de eso, puede comenzar a agregar sus campos. Simplemente haga clic en el botón "+ Agregar campo" para agregar su primer campo.

Esto abrirá el formulario de configuración de campo. Primero debe proporcionar una etiqueta para su campo. Esta etiqueta se mostrará en su meta-cuadro antes del campo.

Después de eso, debe seleccionar el tipo de campo. El complemento Campos personalizados avanzados le permite elegir entre una amplia gama de opciones. Esto incluye texto, cuadro de texto, botones de radio, casillas de verificación, editor WYSIWYG completo, imágenes, etc. Luego, debe proporcionar instrucciones de campo. Estas instrucciones le dirán a los usuarios qué agregar en el campo. A continuación encontrará otras opciones para su dominio. Debe considerar cuidadosamente estas opciones y ajustarlas según sus necesidades.

Luego haga clic en el botón Cerrar campo para contraer el campo. Si necesita agregar más campos a su metabox, haga clic en el botón "+ Agregar campo" para agregar otro campo.

Una vez que haya terminado de agregar campos, puede desplazarse hacia abajo hasta la sección de ubicación. Aquí es donde puede establecer cuándo y dónde desea que se muestre su metabox.

Los campos personalizados avanzados vienen con un puñado de reglas predefinidas entre las que puede elegir. Por ejemplo, puede seleccionar tipos de publicación, categoría de publicación, taxonomía, página principal, etc. A continuación, viene la configuración de las opciones del meta-cuadro. Primero debe elegir el número de pedido. Si tiene más de un grupo de campos definido para una ubicación, puede seleccionar el número de pedido que se mostrará. Si no está seguro, deje el valor 0.

A continuación, debe elegir la posición del meta-cuadro en la página. Puede elegir mostrarlo después del contenido, antes del contenido o en la columna de la derecha. A continuación, deberá elegir un estilo para su metabox. Puede elegirlo como todos los demás cuadros de metadatos de WordPress, o puede elegir que sea transparente (sin cuadros de metadatos). Si no está seguro, seleccione la opción Estándar (cuadro WP Meta). Finalmente, verá una lista de campos que normalmente se muestran en una pantalla de publicación. Si desea ocultar un campo en particular en la pantalla de edición de su publicación, puede marcarlo aquí. Si no está seguro, es mejor dejarlos sin marcar. Una vez que haya terminado, haga clic en el botón publicar para dar vida a su grupo de campos.

Felicitaciones, ha creado con éxito su metabox personalizado para su publicación de WordPress o tipo de publicación. Dependiendo de su configuración, ahora puede ver su publicación o tipo de publicación para ver su metabox personalizada en acción.

Puede usar este meta-cuadro personalizado para agregar metadatos en sus publicaciones o tipos de publicaciones. Estos datos se almacenarán en su base de datos de WordPress cuando guarde o publique el artículo.

Visualización de los datos de su Meta Box personalizados en el tema de WordPress

Hasta ahora, hemos creado con éxito un cuadro de meta personalizado y lo mostramos en nuestra pantalla de edición de publicaciones. El siguiente paso es mostrar los datos almacenados en estos campos en su tema de WordPress. Primero, debe modificar el grupo de campos personalizados que creó anteriormente. En la página "Editar grupo de campos", verá sus campos personalizados y sus nombres.

Necesitará estos nombres de campo para mostrarlos en su sitio web. Los campos personalizados avanzados le permiten hacer esto de dos formas diferentes. Primero, puede usar un código corto para mostrar un campo personalizado en su publicación.
[acf field="article_byline"] También puede mostrarlos agregando código en sus archivos de tema de WordPress. Si no lo ha hecho antes, eche un vistazo a nuestra guía para principiantes sobre cómo copiar y pegar código en WordPress. Deberá editar el archivo de tema en el que desea mostrar los datos de estos campos. Por ejemplo, single.php, content.php, page.php, etc. Deberá asegurarse de agregar el código dentro del bucle de WordPress. La forma más fácil de asegurarse de que está ingresando el código dentro del ciclo es encontrar una línea en su código que se vea así:

Puede pegar su código después de esta línea y antes de la línea que termina el ciclo:

Su código de campo personalizado se vería así:

Este código mostrará los datos ingresados ​​en el campo del artículo de línea de nuestro meta-cuadro personalizado. Observe cómo envolvimos el código en un encabezado h2 con una clase CSS. Esto nos ayudará a formatear y diseñar el campo personalizado más adelante agregando CSS personalizado en nuestro tema. Aquí hay otro ejemplo:

Recuerde reemplazar los nombres de campo con sus propios nombres de campo. Ahora puede visitar la publicación donde ya ingresó los datos en sus campos personalizados. Podrá ver sus metadatos personalizados mostrados.

Advanced Custom Fields es un complemento muy poderoso con muchas opciones. Este tutorial solo rasca la superficie. Si necesita más ayuda, asegúrese de consultar la documentación del complemento para saber cómo extenderlo más. Esperamos que este artículo le haya ayudado a aprender cómo agregar metacajas personalizadas en publicaciones y tipos de publicaciones de WordPress. También puede consultar nuestra guía paso a paso sobre cómo aumentar la velocidad y el rendimiento de WordPress para principiantes. Si le gustó este artículo, suscríbase a nuestro canal de YouTube para ver tutoriales en video de WordPress. También puede encontrarnos en Twitter y Facebook.