Campos personalizados en WordPress

Los campos personalizados en WordPress son una funcionalidad que permite añadir información adicional a las entradas y páginas, proporcionando flexibilidad y personalización, y permitiendo organizar informáticamente el contenido de tu sitio web, en este artículo estudiaremos el plugin Advanced Custom Fields (ACF), un plugin que mucha gente usa y que a mí me va muy bien.

🚀 ¿Qué son los Campos Personalizados en WordPress?

Los campos personalizados son una herramienta valiosa en WordPress para almacenar información adicional asociada a entradas y páginas. Permiten mejorar la gestión y presentación del contenido, brindando flexibilidad y personalización.

➡ Definición y características principales

Los campos personalizados son metadatos que se añaden a las publicaciones de WordPress. Se componen de pares clave-valor, donde cada clave representa un atributo específico y el valor es la información correspondiente. Esta funcionalidad permite a los desarrolladores y administradores de sitios enriquecer sus contenidos de manera significativa.

Entre sus características más destacadas se encuentran:

• Posibilidad de agregar información variada, como precios, fechas o especificaciones técnicas.
• Facilidad de uso, tanto en su creación como en posterior edición.
• Compatibilidad con otros elementos de WordPress, como tipos de entradas personalizadas.

➡ Diferencias con otros tipos de contenido

Es fundamental comprender las diferencias entre campos personalizados y otros tipos de contenido en WordPress. Mientras que los campos personalizados se utilizan para añadir información adicional a entradas existentes, los tipos de entrada personalizados permiten crear nuevos formatos de contenido de manera independiente.

Por ejemplo, una tienda online podría tener un tipo de entrada personalizado para productos que, a su vez, contenga campos personalizados para detalles como dimensiones, material o precio. Esto proporciona una estructura más organizada y específica para cada tipo de contenido.

➡ Ejemplos prácticos de uso

Los campos personalizados pueden aplicarse en diversas situaciones dentro de un sitio web. Algunos ejemplos prácticos incluyen:

• E-commerce: En las páginas de productos, se pueden incluir campos para la descripción del producto, características técnicas y disponibilidad.
• Blogs de recetas: Se puede usar campos personalizados para el tiempo de cocción, ingredientes y valor nutricional, lo que facilita la búsqueda y visualización de información específica.
• Gestión de eventos: Para un sitio web que promueve eventos, se podrían añadir campos para la ubicación, fecha y detalles acerca de los oradores.

Por aquí, os dejo un ejemplo práctico que yo tengo en mi web con un Custom Pos Type personalizado donde he añadido categorías (tipos de proyectos) para tener una buena organización en todos mis proyectos web. ¡A que mola!..

🥇 Ventajas de Usar Campos Personalizados

Los campos personalizados en WordPress presentan una serie de beneficios que permiten a los desarrolladores y administradores de sitios web mejorar significativamente la gestión y presentación de contenido.

➡ Mejor organización del contenido

Una de las principales ventajas de implementar campos personalizados es la mejora en la organización del contenido. Estos campos permiten categorizar información adicional que no se puede capturar con los campos predeterminados. Esto resulta especialmente útil en sitios que manejan diferentes tipos de contenido. Por ejemplo:

• Proyectos: Se pueden añadir detalles como la fecha de inicio, el estado actual y los miembros del equipo involucrados.
• Productos: Los campos personalizados pueden contener información como dimensiones, materiales y fechas de lanzamiento, haciendo la navegación más lógica para el usuario.
• Eventos: Incorporar datos específicos como la ubicación y el precio puede mejorar la claridad de la información ofrecida al visitante.

➡ Flexibilidad y personalización

La flexibilidad es otra gran ventaja de los campos personalizados. Estos permiten adaptar el contenido a las necesidades específicas de un sitio web. Se pueden crear diferentes tipos de campos según las exigencias del proyecto, lo que incluye:

• Campos de texto: Para añadir descripciones o características específicas.
• Casillas de verificación: Útiles para opciones binarias o listas de verificación.
• Fechas: Para organizar y visualizar cronologías o fechas importantes.

Gracias a esta versatilidad, los administradores pueden crear un diseño único que resuene con la temática del sitio. La personalización de la presentación del contenido hace que la experiencia del usuario sea más rica y atractiva. Todo esto contribuye a un diseño más profesional y ajustado a las expectativas del público objetivo.

➡ Contribución al SEO

Los campos personalizados también pueden influir positivamente en el SEO de un sitio web. La organización de la información y la posibilidad de emplear metadatos específicos ayudan a los motores de búsqueda a entender mejor el contenido del sitio. Algunas formas en que estos campos contribuyen al SEO son:

• Estructura de datos: Los datos adicionales pueden ser presentados en forma de rich snippets, mejorando la visibilidad en los resultados de búsqueda.
• Optimización de palabras clave: Se pueden utilizar palabras clave relevantes dentro de los campos personalizados para mejorar el ranking de las páginas en los motores de búsqueda.
• Experiencia de usuario: Un contenido más organizado y fácil de navegar aumenta el tiempo de permanencia en la página y reduce la tasa de rebote.

Por lo tanto, con un uso adecuado de campos personalizados, se puede alcanzar un triunfo en el posicionamiento web que beneficiará la visibilidad del sitio.

⭐ Métodos para Añadir Campos Personalizados

Existen diferentes enfoques para incorporar campos personalizados en WordPress, siendo los más prevalentes el uso de plugins o la adición manual. Cada método presenta ventajas y desventajas, así como diferentes niveles de complejidad y flexibilidad.

➡ Usando Advanced Custom Fields (ACF)

Advanced Custom Fields es uno de los plugins más populares para añadir campos personalizados en WordPress. Este plugin simplifica considerablemente el proceso, permitiendo crear un entorno más amigable para el usuario.

Instalación y activación del plugin

Para comenzar, se debe acceder al área de administración de WordPress. A continuación, nos vamos al repositorio oficial de WordPress:

• Ir al menú de «Plugins».
• Clicar en «Añadir Nuevo».
• Buscar «Advanced Custom Fields» en la barra de búsqueda.
• Seleccionar «Instalar ahora» y luego activar el plugin.

Creación de grupos de campos

Una vez activo, aparece una nueva opción llamada «ACF» en el menú lateral de WordPress. Desde ahí, se puede crear un nuevo grupo de campos, donde se podrán definir varios campos relacionados bajo un mismo conjunto. Desplegamos el menú y nos vamos a «Grupos de Campos».

Bien llegamos a un paso importante, donde debemos pinchar en «Añadir nuevo» y se nos abre esta ventana. En la que debemos añadir un nombre descriptivo (por ejemplo «Proyectos»). Previamente ya debemos de tener instalado el custom post type en mi caso OK (te he dejado un enlace más arriba si no sabes de que estamos hablando).

Y donde dice reglas añadimos en este caso «Tipo de contenido», en la siguiente casilla «es igual a» y en la siguiente debemos de añadir en el desplegable el custom post type. Guardamos cambios y listo. Puedes fijarte en las fotos y adaptarlo a tu proyecto.

Configuración y publicación

Una vez tenemos el grupo de campo preparado, es la hora de añadirle los «campos». Para esto nos situamos con el ratón encima de proyecto y pinchamos en la opción «editar». Y un poco más hacia abajo se nos despliegan los campos y todas sus opciones de configuración.

• Tipo de campo: seleccionamos el tipo de campo
• Etiqueta de campo: el nombre del campo
• Nombre del campo: se podría decir el slug por ejemplo (tipo_de_web). Siempre con guiones bajos.
• Valor por defecto siempre lo dejo vacío.

👋 Tipos de Campos Personalizados Disponibles

En WordPress, se pueden utilizar diversos tipos de campos personalizados para adaptarse a diferentes necesidades de contenido. Estos campos permiten almacenar información de manera estructurada y acceder a ella fácilmente en el frontend del sitio web.

La verdad que ACF ofrece un montón de tipos de cambios en la versión gratis del plugin. Yo creo que más que suficientes para todo tipo de proyectos. Obviamente cada proyecto es un mundo y habría que verlo al detalle. Te voy a añadir unos cuantos, pero pega un buen vistazo y verás todos los que hay.

➡ Campos de texto y número

Los campos de texto y número son dos de los tipos más básicos pero esenciales en la gestión de información dentro de WordPress. Se utilizan principalmente para introducir y almacenar datos simples.

• Campos de texto: estos campos permiten la entrada de texto libre. Son ideales para añadir títulos, descripciones o cualquier otro tipo de información textual que se necesite. Se pueden definir con una longitud determinada o como campos de texto enriquecido.
• Campos de número: este tipo de campo se utiliza para almacenar valores numéricos. Es perfecto para datos como precios, cantidades o puntuaciones. Almacenando números en estos campos, se facilita la manipulación y el cálculo de datos en el frontend.

➡ Casillas de verificación y selectores

Las casillas de verificación y los selectores permiten a los usuarios realizar elecciones y seleccionar múltiples opciones de forma sencilla.

• Casillas de verificación: Las casillas de verificación son útiles para opciones binomiales, donde el usuario puede elegir entre dos estados: activado o desactivado. Pueden ser empleadas para indicar características específicas de un producto, como ‘En stock’ o ‘Requiere envío’.
• Selectores: los selectores permiten elegir entre múltiples opciones predefinidas. Son ideales para campos como categorías o etiquetas. Su uso asegura que la información se mantenga consistente y evita errores en la entrada de datos.

➡ Campos de fecha y hora

Estos campos son fundamentales para almacenar información temporal, permitiendo gestionar eventos y plazos de manera efectiva.

• Campos de fecha: los campos de fecha permiten seleccionar una fecha específica. Se pueden usar para establecer fechas de lanzamiento de productos, fechas de eventos, entre otros. Su formato puede ser modificado según las preferencias del usuario.
• Campos de hora: estos campos son ideales para registrar horas específicas, complementando así la información de los campos de fecha. Esto resulta útil en la organización de eventos que se desarrollan a lo largo de un día.

➡ Tipos avanzados de campos personalizados

Los tipos avanzados de campos personalizados ofrecen funcionalidades adicionales que permiten una mayor personalización. Este tipo de campos incluye opciones que mejoran la interacción con el usuario y la experiencia general en el sitio web.

• Galerías de imágenes: este tipo de campo permite a los usuarios subir múltiples imágenes y organizarlas de manera efectiva. Se utiliza frecuentemente en portfolios y tiendas online para mostrar productos de diferentes ángulos.
• Campos de relación: los campos de relación permiten vincular diferentes entradas o tipos de contenido dentro de WordPress, creando conexiones entre ellos que enriquecen la experiencia del usuario al navegar.
• Campos de archivo: estos campos permiten cargar y gestionar archivos de diferentes formatos, facilitando el acceso a documentos o imágenes que se necesiten mostrar en una entrada o página.

🙌 Cómo Mostrar Campos Personalizados en el Frontend de manera manual

La visualización de los campos personalizados en el frontend es un paso esencial para aprovechar al máximo la funcionalidad que aportan al contenido de un sitio web. Esta sección detalla los procesos necesarios para implementar correctamente estos campos en la interfaz pública.

➡ Edición de archivos del tema

Para mostrar los campos personalizados en el frontend, es necesario realizar cambios en los archivos del tema de WordPress. Generalmente, se trabaja sobre archivos como single.php para entradas individuales y page.php para páginas. Estos archivos controlan la estructura y diseño de cómo se presenta el contenido al usuario final.

Antes de realizar cualquier modificación, se recomienda hacer una copia de seguridad del tema o utilizar un tema hijo. Esto garantiza que los cambios no se pierdan tras una actualización del tema original.

➡ Uso de etiquetas y funciones de ACF

Advanced Custom Fields proporciona varias funciones que facilitan la recuperación y visualización de los campos personalizados. Algunas de las más utilizadas incluyen:

• the_field('nombre_del_campo'): Esta función recupera y muestra el valor del campo personalizado en el frontend.
• get_field('nombre_del_campo'): Similar a la anterior, pero devuelve el valor sin mostrarlo automáticamente, permitiendo una manipulación adicional si es necesario.

La implementación de estas funciones se realiza dentro del código PHP del tema. Por ejemplo, si se ha creado un campo llamado ‘precio’, se puede mostrar insertando el siguiente código en el lugar adecuado:

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

➡ Ejemplos de código para mostrar información

A continuación, se presentan ejemplos que ilustran cómo se pueden mostrar diferentes tipos de campos personalizados en el frontend:

• Campo de texto:

  <h2><?php the_field('titulo_pelicula'); ?></h2>
  

• Campo de selección:

  <p>Género: <?php the_field('genero'); ?></p>
  

• Campo de fecha:

  <p>Fecha de estreno: <?php the_field('fecha_estreno'); ?></p>
  

Estos ejemplos pueden adaptarse y combinarse según las necesidades específicas del contenido. Es crucial identificar correctamente el nombre del campo al emplear la función, ya que cualquier error en la nomenclatura resultará en la no visualización de la información deseada.

🙌 Cómo Mostrar Campos Personalizados en el Frontend automática con Bricks

Como yo trabajo con Bricks un builder que le está plantando cara a Elementor. Se pueden introducir estos campos de manera dinámica y hacer que el constructor los saque de manera dinámica. Vamos a ver el ejemplo que tengo yo en la plantilla de proyectos individuales.

Lo que hago habitualmente es maquetar el diseño y luego en las opciones cambio y añado el campo personalizado. El constructor renderiza los datos que previamente hemos añadido. Lo vemos mejor con una foto. Para entendernos mejor pincho en título y luego en rallo. Se despliegan las opciones que nos ofrece Bricks, nos vamos a buscar ACF y allí nos aparecen los campos personalizados que hemos creado. Y lo seleccionamos.

El resultado es que cuando guardamos, Bricks nos extrae la información que hemos añadido en los campos personalizados. (Fíjate en la primera imagen de arriba del todo por si te pierdes).

Y es tan sencillo como esto, ya te puedes imaginar la potencia que tiene esto cuando entiendes el funcionamiento. Prácticamente puedes crear de todo lo que te venga en mente y hacerlo de una manera fácil

Bueno y hasta aquí esta pequeña guía acerca de los campos personalizados en WordPress. Si buscas apoyo profesional para WordPress para tu empresa, puedes acceder a mi página principal para ver más detalles sobre mis servicios.

Nos vemos en próximos post….