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

¿Desea crear cajas meta personalizadas para sus publicaciones, páginas y tipos de publicaciones personalizadas de WordPress? Los metaboxes 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 meta boxes personalizados en publicaciones y tipos de publicaciones de WordPress.

¿Qué es un Meta Box personalizado en WordPress?

El metabox personalizado es una interfaz más intuitiva para agregar campos personalizados (metadatos) a 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 y más. También puede agregar sus propios metadatos mediante campos personalizados.

Campos Personalizados

Sin embargo, agregar metadatos utilizando el cuadro de campos personalizados predeterminado 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 edición posterior. Así es como los plugins más populares agregan diferentes opciones en las pantallas de edición posterior.

Por ejemplo, el título de SEO y el cuadro de meta descripción dentro del plugin All in One SEO es un cuadro de meta personalizado:

Caja meta AIOSEO

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

Crear metaboxes personalizados en WordPress

Primero, lo que debe hacer es instalar y activar el archivo Campos personalizados avanzados conectar. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Tras la activación, el plugin agrega un nuevo elemento de menú llamado “Campos personalizados” a la barra de administración de WordPress. Al hacer clic en él, accederá a la página de campos personalizados.

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

Agregar nuevo grupo de campos personalizados

Se le dirigirá a la página “Agregar nuevo grupo de campo”.

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 el primer campo.

Agrega tu campo de puñetazos

Aparecerá el formulario de configuración de campo. Primero debe proporcionar una etiqueta para su campo. Esta etiqueta aparecerá en su metabox antes del campo.

Crear un nuevo campo para su metabox personalizado

A continuación, debe seleccionar el tipo de campo. El plugin Advanced Custom Fields 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 las instrucciones en el campo. Estas instrucciones le dirán a los usuarios qué agregar en el campo.

A continuación, encontrará otras opciones para su campo. Debe revisar cuidadosamente estas opciones y adaptarlas a sus necesidades.

Configuración de campo

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.

Cierre el campo y agregue otro

Después de agregar los campos, puede desplazarse hacia abajo hasta la sección de ubicación. Aquí es donde puede definir cuándo y dónde desea que aparezca su metabox.

Reglas de posición

Advanced Custom Fields viene con un puñado de reglas predefinidas para elegir. Por ejemplo, puede seleccionar tipos de publicación, categoría de publicación, taxonomía, página principal y más.

Luego viene la configuración de las opciones del cuadro meta.

Primero debe elegir el número de pedido. Si ha definido varios grupos de campos para un artículo, puede seleccionar el número de pedido para mostrar. Si no está seguro, déjelo en 0.

Opciones de metabox

A continuación, debe elegir la ubicación del metabox 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 elegir que sea como todos los demás cuadros de meta de WordPress, o puede elegir que sea transparente (sin cuadro de meta).

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 edición de publicaciones. Si desea ocultar un campo en particular en la pantalla de edición de publicaciones, puede marcarlo aquí. Si no está seguro, es mejor dejarlos sin marcar.

Una vez hecho esto, haga clic en el botón publicar para que su grupo esté activo en el campo.

Publica tu grupo de campo

Felicitaciones, ha creado con éxito su propio cuadro de meta 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 metabox personalizada en acción.

Vista previa personalizada de metabox

Puede utilizar este cuadro de metadatos personalizado para agregar metadatos a sus 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 de 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 ver los datos almacenados en esos campos en su tema de WordPress.

Primero, debe editar el grupo de campos personalizados creado anteriormente. En la página “Editar grupo de campos” verá sus campos personalizados y sus nombres.

Nombres de campo

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 verlos agregando código a sus archivos de tema de WordPress. Si nunca ha hecho esto antes, consulte 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 poner el código dentro del bucle es buscar una línea en el código que tenga este aspecto:

<?php while ( have_posts() ) : the_post(); ?>

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

<?php endwhile; // end of the loop. ?>

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

<h2 class="article-byline"><?php the_field('article_byline'); ?></h2>

Este código mostrará los datos ingresados ​​en el campo de la línea del artículo de nuestro metabox personalizado.

Observe cómo hemos envuelto 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:

<blockquote class="article-pullquote">

<?php the_field('article_pullquote'); ?>

</blockquote> 

No olvide reemplazar los nombres de los campos 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.

Campos personalizados que se muestran en un sitio web

Advanced Custom Fields es un plugin muy poderoso con muchas opciones. Este tutorial solo rasca la superficie. Si necesita más ayuda, no olvide revisar el archivo documentación del plugin sobre cómo extenderlo más.

Esperamos que este artículo le haya ayudado a aprender a 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.

¿Te ha resultado útil??

0 / 0

Deja una respuesta 0

Tu dirección de correo electrónico no será publicado. Required fields are marked *