Cómo agregar meta cajas personalizadas en publicaciones de WordPress y tipos de publicaciones

¿Desea crear meta box personalizados para sus publicaciones de WordPress, páginas y tipos de publicaciones personalizadas? Los cuadros de meta personalizados se usan 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 meta box personalizado, y cómo puede agregar fácilmente meta box personalizados en las publicaciones de WordPress y en los tipos de publicaciones..

¿Qué es un Meta Box personalizado en WordPress??

El cuadro meta personalizado 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 te ayuda a crear contenido como publicaciones y páginas, o tipos de publicaciones personalizadas.

Normalmente, cada tipo de contenido consiste en el contenido real y sus metadatos. Los metadatos son información relacionada con ese contenido, como la fecha y la hora, el nombre del autor, el título y más. También puede agregar sus propios metadatos utilizando campos personalizados..

Sin embargo, agregar metadatos usando el cuadro de campos personalizados predeterminado no es muy intuitivo. Aquí es donde entran las cajas meta personalizadas.

WordPress permite a los desarrolladores crear y agregar sus propios meta box personalizados en las pantallas de edición posterior. Así es como los complementos más populares agregan diferentes opciones en sus pantallas de edición posterior.

Por ejemplo, el cuadro de descripción y meta de SEO dentro del plugin de Yoast SEO es un cuadro de meta personalizado:

Habiendo dicho eso, veamos cómo puedes agregar fácilmente meta cajas personalizadas en las publicaciones y tipos de publicaciones de WordPress.

Creando Meta Cajas Personalizadas en WordPress

Primero, lo que debe hacer es instalar y activar el complemento de 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ú llamado "Campos personalizados" a la barra de administración de WordPress. Al hacer clic en él, accederás a la página de campos personalizados..

Esta página estará vacía ya que aún no ha creado ningún campo personalizado. Continúe y haga clic en el botón 'Agregar nuevo' para continuar.

Accederá a la página 'Agregar nuevo grupo de campos'.

Aquí debe proporcionar un título para su grupo de campo. Este título será usado como el título de tu meta box..

Después de eso puedes comenzar a agregar tus 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 necesitas proporcionar una etiqueta para tu campo. Esta etiqueta se mostrará en su meta box antes del campo.

Después de eso necesitas seleccionar el tipo de campo. El complemento de Campos personalizados avanzados le permite elegir entre una amplia gama de opciones. Esto incluye texto, área de texto, botones de radio, casillas de verificación, editor WYSIWYG completo, imágenes y más.

A continuación, debe proporcionar instrucciones de campo. Estas instrucciones le dirán a los usuarios qué agregar en el campo.

Debajo de eso, encontrarás otras opciones para tu campo. Debe revisar cuidadosamente estas opciones y ajustarlas para que se ajusten a sus necesidades.

A continuación, 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 a la sección de ubicación. Aquí es donde puede definir cuándo y dónde desea que se muestre su meta box..

Los Campos personalizados avanzados vienen con un puñado de reglas predefinidas para que elijas. Por ejemplo, puede seleccionar tipos de publicación, categoría de publicación, taxonomía, página principal y más.

A continuación, viene la configuración de opciones de meta caja.

Primero debes elegir el número de pedido. Si tiene varios grupos de campos definidos para una ubicación, puede seleccionar el número de orden para que se muestren. Si no está seguro, déjelo como 0.

A continuación, debe elegir la posición del cuadro de meta en la página. Puede elegir mostrarlo después del contenido, antes del contenido o en la columna derecha.

Debajo de eso, deberás elegir un estilo para tu meta box. Puede elegirlo para que sea como todos los demás meta box de WordPress, o puede elegir que sea transparente (sin ningún meta box).

Si no está seguro, seleccione la opción Estándar (WP Meta box).

Por último, verá una lista de los campos que normalmente se muestran en una pantalla de edición posterior. Si desea ocultar un campo en particular en su pantalla de edición de publicaciones, puede verificarlo aquí. Si no está seguro, entonces es mejor dejarlos sin marcar.

Una vez que haya terminado, haga clic en el botón publicar para que su grupo de campo esté en vivo.

Enhorabuena, ha creado con éxito su meta box personalizado para su publicación de WordPress o tipo de publicación..

Dependiendo de su configuración, ahora puede visitar su publicación o tipo de publicación para ver su meta box personalizado en acción.

Puedes usar este meta box personalizado para agregar metadatos a tus publicaciones o tipos de publicaciones. Estos datos se almacenarán en su base de datos de WordPress cuando guarde o publique la publicación.

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

Hasta ahora, hemos creado con éxito un meta box personalizado y lo hemos mostrado en nuestra pantalla de edición posterior. El siguiente paso es mostrar los datos almacenados en esos campos en su tema de WordPress.

Primero, debe editar el grupo de campos personalizados que creó anteriormente. En la página 'Editar grupo de campos', verá sus campos personalizados y sus nombres.

Necesitará los nombres de estos campos para mostrarlos en su sitio web.

Los campos personalizados avanzados le permiten hacerlo de dos maneras diferentes.

Primero, puedes usar un shortcode para mostrar un campo personalizado en tu publicación.

[campo acf = "articulo_linea"]

También puede mostrarlos agregando código a sus archivos de tema de WordPress. Si no lo has hecho antes, mira nuestra guía para principiantes sobre cómo copiar y pegar código en WordPress.

Deberá editar el archivo de tema donde 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 sencilla de asegurarse de que está ingresando el código dentro del bucle es buscar una línea en su código que tenga este aspecto:

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 de la línea del artículo de nuestro meta box personalizado..

Observe cómo envolvimos el código en un encabezado h2 con una clase CSS. Esto nos ayudará a dar formato y estilo al campo personalizado más adelante al agregar CSS personalizado a nuestro tema.

Aquí hay otro ejemplo:

No olvide reemplazar los nombres de campo con sus propios nombres de campo.

Ahora puede visitar la publicación donde ya ha ingresado los datos en sus campos personalizados. Podrías ver tus metadatos personalizados mostrados.

Advanced Custom Fields es un complemento muy potente con muchas opciones. Este tutorial solo rasca la superficie. Si necesita más ayuda, no se olvide de consultar la documentación del complemento sobre cómo ampliarlo..

Esperamos que este artículo te haya ayudado a aprender cómo agregar meta box personalizados en las 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 ha gustado este artículo, suscríbase a nuestros tutoriales en video del Canal de YouTube para WordPress. También puedes encontrarnos en Twitter y Facebook..