WordPress

Cómo Agregar Campos Personalizados A Tu Contenido De WordPress (2 Métodos)

campos personalizados wordpress

Toda página que creas en WordPress tiene sus propios metadatos, que incluyen información importante como el título y la descripción. La plataforma utiliza campos específicos para agregar estos datos automáticamente. Sin embargo, también puedes agregar tus propios metadatos al configurar los campos personalizados de WordPress (custom fields, en inglés).

Hay dos formas principales de hacerlo, y en este artículo te guiaremos a través de ambas opciones. Puedes:

  1. Utilizar un plugin de campos personalizado de WordPress (custom fields).
  2. Agregar campos personalizados de WordPress manualmente y editar tu tema para mostrarlos.

Cuando hayamos terminado, sabrás todo lo necesario para crear y mostrar nuevos campos personalizados en tu sitio web de WordPress. ¡Así que manos a la obra!

¿Qué son los campos personalizados de WordPress?

Para empezar, hablemos de los campos en términos generales. Un campo es un elemento en una página web o en una aplicación donde se puede agregar información, como este simple cuadro:

Un cuadro de campo simple.

Los campos vienen en muchas formas y tamaños. Por ejemplo, pueden incluir cuadros de lista y casillas de verificación. También encontrarás selectores de fecha e incluso campos que solo aceptan tipos específicos de texto, como números.

En cualquier caso, la información que agregues utilizando estos campos puede tener muchos propósitos. Pero la mayoría de las veces, la información ingresada se utiliza como ‘metadatos’, que no es más que una palabra sofisticada para referirse a los datos que se refieren a otros datos (valga la redundancia).

Por ejemplo, los posts de WordPress tienen un título que describe su contenido, así que técnicamente es un tipo de metadatos:

Un ejemplo de título de un post.

Otros tipos de metadatos incluyen etiquetas, meta descripciones, categorías y más. Aunque una cosa que todas estas piezas de información tienen en común, es que WordPress (o ciertos plugins) te proporcionan campos que puedes usar para agregarlos a tu contenido.

Sin embargo, en algunos casos, querrás agregar metadatos que WordPress no incluye de forma predeterminada. Y ahí es donde entran los campos personalizados de WordPress, que ofrecen una forma de ingresar esos datos y asociarlos a tu contenido.

Con las herramientas y los conocimientos técnicos adecuados, puedes crear casi cualquier tipo de campos personalizados de WordPress que quieras. Uno de nuestros ejemplos favoritos es agregar un sistema de puntuación por estrellas a tus posts:

Un sistema de puntuación por estrellas.

Cuando configuras un campo personalizado para las puntuaciones con estrellas, puedes calificar tus propias publicaciones o incluso pedirle a tus visitantes que dejen sus opiniones (aunque eso es un poco más complicado de lograr). Esto solo sirve para mostrar lo que puedes lograr al aprender a crear y mostrar campos personalizados de WordPress.

Por último, es importante tener en cuenta que los campos personalizados de WordPress y los tipos de publicaciones personalizadas no son la misma cosa. Un tipo de publicación personalizada de WordPress es un tipo de contenido con formato especial, como reseñas o páginas de productos. En muchos casos, la gente agrega campos personalizados de WordPress a los tipos de publicaciones personalizadas, pero los dos también se pueden usar por separado.

Habiendo aclarado estos conceptos básicos entremos en materia. A continuación, te ayudaremos a crear tus propios campos personalizados de WordPress.

Cómo agregar campos personalizados de WordPress a tus posts y páginas (2 métodos)

Al igual que con la mayoría de las funciones de WordPress, puedes agregar campos personalizados a tus posts y páginas de forma manual o mediante un plugin. Vamos a empezar con este último, ya que es un poco más fácil.

1. Utilizar un plugin de campos personalizados de WordPress

Existen muchos plugins que permiten agregar campos personalizados a WordPress rápidamente. Uno de nuestros favoritos se llama Advanced Custom Fields:

El plugin Advanced Custom Fields.

Nos gusta este plugin en particular por su facilidad de uso. Además, contiene una gran cantidad de campos personalizados de WordPress listos para usar que puedes agregar en minutos a tu sitio web.

Para comenzar, tendrás que instalar y activar el plugin. Ve al panel de control y a la pestaña Plugins > Añadir nuevo. Estando allí, usa la barra de búsqueda para buscar “Advanced Custom Fields”:

Instalación del plugin Advanced Custom Fields.

Haz clic en el botón Instalar ahora junto al nombre del plugin. Espera hasta que el texto cambie a Activar, y luego haz clic en él una vez más.

Cuando el plugin esté en funcionamiento verás una nueva pestaña de Campos Personalizados que aparecerá en tu panel de control. Si haces clic allí, encontrarás una lista de grupos de campos personalizados de WordPress, que debería estar vacía:

Creando un nuevo grupo de campos personalizados.

Vamos a remediar esa situación haciendo clic en el botón Añadir nuevo en la parte superior de la pantalla. A continuación, el plugin te ayudará a configurar un grupo, el cual puede contener varios campos personalizados de WordPress:

Creando un nuevo campo personalizado.

Primero, haz clic en el botón Añadir Campo cerca de la parte superior de la pantalla. Luego, elige una etiqueta para tu nuevo campo, que también actuará como su nombre. En este punto, también querrás elegir cuál es el tipo de campo que quieres configurar.

Para este ejemplo, vamos a crear un campo de Email:

Configuración de un campo de Email.

En seguida, quizás quieras escribir instrucciones para que otros usuarios de tu sitio sepan qué hacer con tu campo personalizado. Este paso no es necesario, pero es una buena práctica:

Configurando las instrucciones de tu campo personalizado.

También deberás indicar si este es un campo obligatorio o no. Si lo es, los usuarios no podrán guardar posts o páginas sin antes haber llenado dicho campo:

Configurando un campo requerido.

Hay otras configuraciones avanzadas con las que puedes jugar, pero vamos a avanzar. Cierra el editor y tu nuevo campo aparecerá en la lista de grupos:

Tu grupo de campos personalizados actualizado.

Luego, deberás configurar cuándo y dónde se mostrará este grupo de campos personalizados. Puedes hacerlo usando la configuración de Ubicación. Hay una opción llamada Mostrar este grupo de campos si, que puedes usar para configurar las opciones de visualización.

En este ejemplo, configuramos el campo personalizado para que aparezca en los posts normales:

Configuración de los requisitos de visualización de tu campo personalizado.

Si quieres, puedes agregar más de una ubicación para mostrar tus nuevos campos personalizados de WordPress, usando el botón Agregar grupo de reglas.

Aquí hay una última sección de configuración que permite configurar dónde se mostrará el campo en la página del editor de WordPress. De manera predeterminada, aparecerá justo debajo del editor de texto, que te mostraremos en un momento. Por ahora, recuerda hacer clic en el botón Publicar para guardar tu nuevo campo personalizado.

En este punto, tu campo ya está listo. Abre el editor de WordPress para uno de tus posts, y debería aparecer en la parte inferior de la pantalla:

Tu nuevo campo personalizado debajo del editor de WordPress.

Ten en cuenta que puedes usar el plugin Advanced Custom Fields para crear un campo, pero no para mostrarlo en tu sitio web. De forma predeterminada, el campo solo se mostrará en tu panel de control, y WordPress almacenará su valor en la base de datos.

Si quieres mostrar los metadatos que agregas con los campos personalizados de WordPress en el front end de tu sitio, tendrás que editar los archivos del tema. Veamos ahora cómo hacerlo.

2. Añadir manualmente los campos personalizados de WordPress y editar el tema para mostrarlos

Añadir campos personalizados de WordPress manualmente es más fácil de lo que te imaginas. Lo difícil es configurar tu tema para que muestre los metadatos que agregues usando estos campos. Por ahora, vamos a ver el proceso desde el inicio.

Para agregar un campo personalizado a una de tus páginas o posts, tendrás que abrir el editor de WordPress. Una vez allí, busca la pestaña Opciones de pantalla en la parte superior de la pantalla y haz clic en ella. Dentro de esta, puedes elegir qué campos de WordPress se mostrarán por defecto:

Opciones de pantalla del editor de WordPress.

Notarás que hay una opción llamada Campos personalizados; esta es la que debes marcar. Luego de hacerlo, aparecerá un cuadro de Campos personalizados en la parte inferior de la pantalla, que se ve así:

La sección de campos personalizados.

Agregar un nuevo campo personalizado es fácil. Solo debes crear un nombre para el campo, y luego agregar un valor correspondiente en el campo a la derecha:

Un ejemplo de un nuevo campo personalizado.

Después de ingresar ambos valores, presiona el botón Añadir un campo personalizado en la parte inferior del cuadro, esto los guardará y te permitirá crear más campos personalizados de WordPress (si lo deseas).

Al igual que con el método del plugin, los metadatos que ingreses aquí se guardarán junto con tu post. Sin embargo, aún no aparecerá cuando alguien mire tu contenido en tu sitio publicado. Para que esto suceda, debes decirle a tu tema: “Quiero que busques el campo personalizado del email y muestres su contenido en esta ubicación”.

Puedes lograrlo editando una función llamada el ‘bucle’ de WordPress. Este bucle le dice a WordPress qué datos necesita recoger y mostrar cuando alguien mira contenido en tu sitio. En la mayoría de los casos, esa información incluye el título del post o de la página, su contenido y cualquier metadato asociado.

Es importante tener en cuenta que el código de bucle en sí puede variar según la página en la que estés trabajando y el tema que uses. No obstante, así es como se ve el bucle de WordPress predeterminado, escrito en PHP:

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

Aquí hay otro ejemplo del bucle que es un poco más personalizado, tomado del tema Divi:

<?php
if ( et_builder_is_product_tour_enabled() ):
while ( have_posts() ): the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="entry-content">
<?php
the_content();
?>
</div> <!-- .entry-content -->
</article> <!-- .et_pb_post -->
<?php endwhile;
else:
?>

En ambos casos, este código le dice a WordPress que extraiga posts de los archivos del sitio y muestre su contenido en la página. Sin embargo, el segundo ejemplo agrega algunos detalles específicos del tema, que es exactamente lo que vamos a hacer a continuación.

Para editar el bucle de tu tema, deberás acceder a los archivos de tu sitio directamente mediante el Protocolo de transferencia de archivos (FTP). Recomendamos FileZilla si aún no tienes configurado un cliente FTP.

Cuando ya estés conectado a través de FTP, ve al directorio public_html/wp-content/themes. En el interior, busca la carpeta que corresponde a tu tema activo:

Tus directorio de temas de WordPress.

Abre esa carpeta y ubica el archivo single.php. Este archivo rige sobre la forma en que se ven tus publicaciones individuales y contiene su propio bucle de WordPress. Para modificarlo, haz clic con el botón derecho en el archivo y seleccione la opción Ver/Editar, que lo abrirá con tu editor de texto predeterminado.

En seguida, busca el bucle dentro de ese archivo, el cual deberías poder identificar utilizando los dos ejemplos mostrados anteriormente. Cuando lo encuentres, preste atención a donde termina el código, que está marcado por estas líneas:

<?php endwhile; else: ?>
<?php endif; ?>

Lo que debes hacer ahora es insertar unas líneas de código para recoger tus metadatos. Aquí hay un ejemplo rápido de cómo hacer eso:

<div class="author-email">
    <p>Puedes contactar a este autor en: <?php echo get_post_meta($post->ID, 'email', true); ?> </p>
</div>

En este caso, estamos incluyendo una breve cuña que se mostrará en el post justo antes de una dirección de email que se guarda con el campo personalizado. El resultado será un texto que se verá así:

Puedes contactar a este autor en: juanperez@mail.com

Para este ejemplo, tiene sentido pegar el nuevo código al final del bucle. De esta manera, se mostrará después del final de tu artículo, pero antes de la sección de comentarios. Sin embargo, puedes incluir el código en varias ubicaciones, dependiendo de dónde quieres que aparezcan los metadatos.

Si usaste el tema Divi, así es como podría verse tu bucle actualizado:

<?php
if ( et_builder_is_product_tour_enabled() ):
while ( have_posts() ): the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="entry-content">
<?php
the_content();
?>
</div> <!-- .entry-content -->
</article> <!-- .et_pb_post -->
                    <div class="author-email">
                  <p>Puedes contactar a este autor en: <?php echo get_post_meta($post->ID, 'email', true); ?> </p>
</div>
<?php endwhile; else: ?>
<?php endif; ?>

Y eso es todo lo que hay que hacer. Ahora puedes guardar los cambios en tu archivo single.php y volver a subirlos a través de FTP.

Ten en cuenta que este es un ejemplo muy simple de lo que puedes lograr utilizando los campos personalizados de WordPress y el bucle. Para campos personalizados más avanzados, probablemente debas aprender algunos conceptos básicos de PHP, o al menos sentirte cómodo manipulando archivos de temas hasta lograr los ajustes deseados.

Con esto en mente, recomendamos que utilices un child theme (tema secundario) para mostrar tus campos personalizados siempre que sea posible. Esto te permitirá experimentar libremente, sin preocuparte de que puedas estropear el tema en el proceso.

Conclusión

Los campos personalizados de WordPress te permiten añadirle todo tipo de metadatos a tus posts y páginas. Por ejemplo, podrías agregar un campo personalizado que muestre una puntuación para cada post, casillas de verificación o incluso mapas. Hay muy pocas cosas que no puedas hacer con los campos personalizados de WordPress, y agregarlos es relativamente fácil. Puede usar un plugin, como Advanced Custom Fields, o crearlos manualmente y modificar tus archivos de temas para que muestren la nueva información.

¿Tienes alguna pregunta sobre cómo usar los campos personalizados de WordPress? ¡Escríbela en la sección de comentarios a continuación!

Gustavo B.

Gustavo es un apasionado por la creación de sitios web. Se enfoca en la aplicación de estrategias SEO en Hostinger para España y Latinoamérica, así como la creación de contenidos de alto nivel. Cuando no está aplicando nuevos trucos en WordPress lo puedes encontrar tocando la guitarra, viajando o tomando un curso online.

Agrega un Comentario

Dale clic aquí para dejar un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

¡Comienza a ahorrar hoy mismo!

Alojamientos con todo incluido y nombre de dominio por

MX$45
00
/mes