campos personalizados en WordPress-18

¿Qué son y cómo añadir campos personalizados en WordPress?

Como uno de los sistemas de gestión de contenidos (CMS) más utilizados, WordPress es reconocido por sus numerosas funcionalidades y opciones de personalización.

Una de estas opciones es la ampliación de metadatos, que se refiere a la información esencial de una página o entrada, como los nombres de los autores, los títulos y las descripciones.

Los usuarios pueden añadir metadatos adicionales habilitando campos personalizados en WordPress, mejorando la funcionalidad de entradas o páginas específicas. Por ejemplo, recopilando el correo electrónico del autor, añadiendo un descargo de responsabilidad en un post patrocinado o adjuntando detalles adicionales a un producto.

Como muchas de las características de WordPress, los campos personalizados se pueden agregar a tus entradas y páginas manualmente o mediante un plugin especializado.

En esta guía, explicaremos qué son los campos personalizados y cómo integrarlos en el contenido de tu sitio web de WordPress utilizando ambos métodos.

Tabla de contenidos:

¿Cuáles son los campos personalizados en WordPress?

Cada página y entrada de WordPress que creas lleva sus propios metadatos. Los metadatos predeterminados en WordPress incluyen el nombre del autor, la fecha y la hora. Por ejemplo, en la entrada a continuación, puedes ver los metadatos sobre el título de la entrada.

Agregar campos personalizados te permite incluir información adicional y específica que no está incluida en los metadatos predeterminados. Esto puede ser extremadamente útil para personalizar y extender la funcionalidad de tu sitio web según tus necesidades.

Sin embargo, en algunos casos, necesitas añadir metadatos que WordPress no soporta de manera predeterminada: aquí es donde los campos personalizados resultan útiles. Los campos personalizados de WordPress son una función que permite agregar información adicional en una entrada o página.

Los campos personalizados te permiten incorporar esos datos y ampliar la información de tu contenido:

  • Versátiles y personalizables: Los campos personalizados consisten en fragmentos de código, lo que te permite ajustar y controlar su ubicación en el front-end de tu sitio.
  • Fáciles de añadir y actualizar: Si necesitas actualizar la información mostrada en tus entradas, simplemente modifica los campos personalizados en lugar de editar cada entrada individualmente.
  • Uniformes: Los campos personalizados garantizan que todas tus entradas presenten la misma información con el mismo formato.

Finalmente, es importante diferenciar entre campos personalizados y tipos de entrada personalizados.

Un tipo de entrada personalizada es un tipo de contenido con un formato específico, como las reseñas o las páginas de producto. En muchos casos, las personas añaden campos personalizados a sus tipos de entrada personalizados, pero también puedes utilizarlos de forma independiente.

¿Cómo agregar campos personalizados a tus entradas y páginas en WordPress?

Para agregar campos personalizados a tus entradas y páginas en WordPress, existen principalmente tres métodos:

  1. Utilizar plugins especializados: Puedes emplear plugins como Advanced Custom Fields (ACF), Custom Post Types UI o Pods, que te brindan herramientas intuitivas para crear campos personalizados de manera fácil y rápida. Estos plugins suelen tener interfaces gráficas amigables que te permiten definir los campos deseados y su ubicación en tus entradas y páginas.
  2. Crear campos personalizados manualmente: Si prefieres una solución más personalizada y tienes conocimientos de desarrollo web, puedes agregar campos personalizados directamente al código de tu tema de WordPress. Para ello, necesitarás editar el archivo functions.php de tu tema y utilizar funciones específicas de WordPress, como add_meta_box() y register_post_meta(), para registrar y mostrar los campos personalizados.
  3. Modificar tu tema de WordPress: Algunos temas de WordPress vienen con opciones integradas para agregar campos personalizados. En este caso, puedes aprovechar las características de personalización que ofrece tu tema para incluir los campos personalizados en tus entradas y páginas.

Independientemente del método que elijas, una vez que hayas añadido los campos personalizados, podrás ingresar la información deseada en ellos al editar una entrada o página en WordPress. Estos campos te permiten agregar información adicional, como datos de contacto, características del producto, etiquetas personalizadas o cualquier otra información relevante para tus necesidades específicas. Los campos personalizados ofrecen una forma flexible y poderosa de enriquecer tus contenidos y adaptar tu sitio web de WordPress según tus requisitos particulares.

Advanced Custom Fields

campos personalizados en WordPress-1
¿Qué son y cómo añadir campos personalizados en WordPress?

Ofrece una interfaz amigable que te permite incorporar hasta 30 variedades de campos personalizados con solo unos clics. Para comenzar, es necesario, descargar (o buscar en el repositorio de plugins de WordPress), instalar y activar el plugin.

Dirígete a tu tablero y selecciona la pestaña Plugins → Añadir nuevo. Posteriormente, utiliza la herramienta de búsqueda para localizar Advanced Custom Fields.

campos personalizados en WordPress 2
¿Qué son y cómo añadir campos personalizados en WordPress?

Para establecer un conjunto de campos, simplemente selecciona el botón Crear nuevo ubicado en la parte superior de la pantalla.

Procede a hacer clic en el botón Añadir campo. Selecciona una etiqueta para tu nuevo campo, la cual también funcionará como su nombre. Además, debes elegir el tipo de campo que deseas configurar: algunas opciones disponibles incluyen texto, casilla de verificación y correo electrónico.

campos personalizados en WordPress-3
¿Qué son y cómo añadir campos personalizados en WordPress?

En este ejemplo, vamos a crear un campo de Correo electrónico.

campos personalizados en WordPress-4
¿Qué son y cómo añadir campos personalizados en WordPress?

Para redactar un conjunto de directrices, simplemente ingresa la información requerida en el campo correspondiente. Por ejemplo, podrías agregar: «Por favor, completa tu dirección de correo electrónico antes de publicar tu entrada».

Aunque este paso no es obligatorio, contribuye a que otros administradores del sitio web comprendan cómo usar el campo personalizado.

campos personalizados en WordPress-5
¿Qué son y cómo añadir campos personalizados en WordPress?

Deberás especificar si el campo es obligatorio o no.

También hay algunas otras opciones avanzadas que puedes ajustar si es necesario. Una vez rellenadas las propiedades básicas, desplázate hacia abajo para localizar el botón Cerrar campo.

campos personalizados en WordPress-6
¿Qué son y cómo añadir campos personalizados en WordPress?

Al hacer se añadirá automáticamente tu grupo de campos personalizados a la lista. Para añadir más campos personalizados, solo tienes que elegir el botón Añadir campo y así sucesivamente.

campos personalizados en WordPress-7
¿Qué son y cómo añadir campos personalizados en WordPress?

Al finalizar los grupos de campos personalizados, tendrás que configurar dónde se mostrarán estos grupos de campos personalizados personalizando la configuración de Reglas de ubicación.

Hay una opción denominada Mostrar este grupo de campos si que puedes utilizar para configurar las opciones de visualización.

Para finalizar, toca el botón Guardar cambios para guardar tu nuevo campo personalizado.

Cuando tu campo esté listo, abre el editor de entradas de WordPress. El campo personalizado aparecerá justo debajo del editor de texto.

campos personalizados en WordPress-8
¿Qué son y cómo añadir campos personalizados en WordPress?

Recuerda que Advanced Custom Fields no permite exhibir campos personalizados a los visitantes del sitio web: los campos personalizados solo se mostrarán en tu tablero de control.

Si deseas visualizar los campos personalizados en el front-end del sitio, necesitarás modificar el archivo del tema.

Otros plugins para campos personalizados

Si estás en la búsqueda de un complemento que ofrezca mayores funcionalidades que Advanced Custom Fields, hemos enumerado tres alternativas para asistirte en la selección de una herramienta que se ajuste de manera óptima a los requerimientos de tu sitio web.

1) Metabox

campos personalizados en WordPress-9
¿Qué son y cómo añadir campos personalizados en WordPress?

Con Meta Box, puedes activar campos personalizados en entradas, páginas y formularios de WordPress. Soporta hasta 40 campos personalizados, que van desde listas de texto y casillas de verificación hasta imágenes y campos de usuario.

Incluye extensiones gratuitas que te permiten agregar campos personalizados en los comentarios y en Yoast SEO para mejorar la puntuación SEO de tu contenido.

Además, se integra con creadores de páginas de WordPress como Elementor y Beaver Builder.

Meta Box ofrece tanto versiones gratuitas como premium.

Con su versión premium, disponible a partir de 99 dólares al año, obtendrás acceso a su constructor de cajas de meta. Esta característica te permite añadir campos personalizados de WordPress mediante una interfaz de arrastrar y soltar fácil de usar.

2) Custom Fields Suite

campos personalizados en WordPress-10
¿Qué son y cómo añadir campos personalizados en WordPress?

Custom Fields Suite ofrece una solución ágil y sencilla para implementar campos personalizados en sitios web WordPress.

Este complemento gratuito es compatible con 14 tipos de campos, incluyendo pestañas, editores WYSIWYG, fechas y booleanos. Puedes integrar campos personalizados en tus entradas, páginas y tipos de entradas personalizadas de WordPress.

Emplea el complemento para crear conjuntos de campos personalizados y mostrarlos en el editor de entradas. Con el cuadro de colocación de reglas, también puedes determinar dónde aparecerá el conjunto de campos. Por ejemplo, es posible ubicarlo encima o debajo del editor de texto.

El único inconveniente de Custom Fields Suite es que carece de un equipo de soporte al cliente. No obstante, ofrece documentación a la que puedes acceder para obtener más detalles sobre el funcionamiento del complemento.

3) Pods

campos personalizados en WordPress-11
¿Qué son y cómo añadir campos personalizados en WordPress?

Pods administra todo el contenido personalizado en una interfaz fácil de usar y clara. Esto hace que añadir campos personalizados a tus entradas, páginas o cualquier tipo de contenido personalizado sea sencillo.

Utiliza los shortcodes, widgets o plantillas del complemento para mostrar los campos en cualquier parte del sitio. Pods también incluye tipos de campos personalizados predefinidos, pero tienes la opción de crear nuevos tipos según tus necesidades.

Pods se integra sin problemas con otros plugins de WordPress como Polylang, Beaver Builder y Gravity Forms. Además, está respaldado por una extensa documentación y soporte por chat en vivo para orientar a los usuarios y resolver cualquier inconveniente.

Agrega manualmente campos personalizados en WordPress y modifica tu tema para mostrarlos

Por omisión, la función de campos personalizados está oculta en WordPress. Para habilitar esta función, dirígete a tu editor de páginas o entradas.

Si estás utilizando el editor de bloques Gutenberg, selecciona el menú de «Opciones» en la esquina superior derecha del editor y elige la opción «Preferencias».

campos personalizados en WordPress-12
¿Qué son y cómo añadir campos personalizados en WordPress?

Haz clic en la opción de Paneles y desplázate hacia abajo hasta encontrar Campos personalizados y actívalo.

campos personalizados en WordPress-13
¿Qué son y cómo añadir campos personalizados en WordPress?

Una vez realizado, aparecerá un cuadro de Campos personalizados en la parte inferior de la pantalla, que se observará así:

campos personalizados en WordPress-14
¿Qué son y cómo añadir campos personalizados en WordPress?

Puedes introducir los datos del campo personalizado utilizando pares de clave/valor. La clave se refiere al nombre de tu campo personalizado, mientras que el valor es la información que quieres mostrar.

A modo de ejemplo, si queremos añadir un descargo de responsabilidad a una publicación patrocinada, establecemos Sponsored o Patrocinado como nombre y rellenamos  o No en la casilla de valor para mostrar si la publicación estaba patrocinada o no.

campos personalizados en WordPress-15
¿Qué son y cómo añadir campos personalizados en WordPress?

Haz clic en el botón Agregar campo personalizado en la parte inferior del cuadro para guardarlo.

Si estás utilizando el editor tradicional, encuentra el botón Opciones de pantalla en la esquina derecha de tu pantalla y marca la casilla Campos personalizados, luego sigue los pasos explicados anteriormente.

campos personalizados en WordPress-16
¿Qué son y cómo añadir campos personalizados en WordPress?

El proceso de crear campos personalizados no termina ahí. WordPress solo guarda los valores de los campos personalizados en el back-end. Para mostrar la información en el front-end del sitio, necesitas editar los archivos del tema o plantilla.

Hay varias opciones para editar los archivos de tu tema: a través de tu panel de administración, conectándote a un FTP o utilizando el Administrador de Archivos.

Te recomendamos utilizar un tema hijo para experimentar libremente sin dañar el tema durante el proceso.

campos personalizados en WordPress-17
¿Qué son y cómo añadir campos personalizados en WordPress?

A continuación se muestra un ejemplo de código utilizado habitualmente para mostrar campos personalizados:

<?php echo get_post_meta($post->ID, 'key', true); ?>

Recuerda que el código exacto que usarás puede variar dependiendo de la acción o la información que desees mostrar. Sin embargo, asegúrate de reemplazar el marcador de posición «key» por el nombre de tu campo personalizado.

En este ejemplo, deseamos mostrar un mensaje de exención de responsabilidad para las publicaciones patrocinadas o «sponsored posts». Por lo tanto, el código debería lucir así:

<?php
$meta = get_post_meta( get_the_ID(), 'Sponsored Post' );
if( $meta[0] == 'Si' ) {
?>
<center>This post contains affiliate links. We might earn a commission if you make a purchase using these links.</center>>
<?php } ?>

Lo que necesitas hacer es integrar tu código dentro del bucle de WordPress, que es una función que instruye a WordPress sobre qué datos extraer y mostrar cuando alguien visualiza contenido en tu sitio.

El código de un bucle puede variar según el tema que estés utilizando. Sin embargo, aquí tienes un ejemplo del bucle predeterminado de WordPress:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php endwhile; else: ?>
<?php endif; ?>

Al añadir un campo personalizado, puedes controlar su ubicación en el sitio. Por ejemplo, para colocarlo en la parte superior de una entrada, añade el código antes de la siguiente línea:

while ( have_posts() ) : the_post();

Una vez que hayas incorporado correctamente el código en el editor de temas, haz clic en el botón Actualizar archivo para guardar los cambios.

El código que hemos aplicado instruye a WordPress a buscar entradas con campos personalizados de tipo «Sponsored Post» (publicación patrocinada) y verificar su valor.

Si el valor es «Sí», WordPress mostrará el mensaje de exención de responsabilidad, ya que la entrada está marcada como patrocinada. En caso contrario, no se mostrará información adicional ni metadatos.

Es importante tener en cuenta que el ejemplo anterior representa una de las funciones básicas de los campos personalizados de WordPress. Si deseas aplicar acciones más complejas, deberás realizar algo de codificación adicional.

A continuación, se presentan varias etiquetas de plantilla que puedes utilizar para personalizar la funcionalidad de los campos personalizados en tu sitio web:

  • the_meta(): También conocida como post-meta, esta etiqueta muestra una lista de los campos personalizados de la entrada.
  • get_post_custom() y get_post_meta(): Estas funciones recuperan uno o varios metadatos de una entrada.
  • get_post_custom_values(): Esta función obtiene los valores de un campo personalizado de la entrada.

Resumen:

WordPress cuenta con funciones avanzadas, como los campos personalizados, que permiten a los usuarios agregar información adicional a una entrada o página, desde exenciones de responsabilidad hasta imágenes y casillas de verificación.

La funcionalidad de campos personalizados integrada en WordPress está oculta por defecto, por lo que hemos proporcionado los pasos para activarla.

Además, también hemos cubierto los pasos para crear y utilizar campos personalizados en WordPress:

  • Instalando el plugin Advanced Custom Fields o cualquiera de los otros tres plugins sugeridos en el sitio web.
  • Editando manualmente el archivo single.php de tu tema.

La función nativa de campos personalizados de WordPress puede no ser la opción más fácil de usar. Por esta razón, hemos incluido la opción de utilizar plugins de campos personalizados para simplificar el proceso.

Si estás profundizando tus conocimientos en el mundo WordPress y necesitas un servicio de hosting que se adapte a tus necesidades, te invitamos a conocer los planes de WordPress Hosting que DonWeb tiene para ofrecerte.

Santiago Molina
Santiago Molina

Ingeniero Industrial / Especialista en marketing / Programador web