Los campos personalizados de WordPress son una parte importante de lo que hace de WordPress un sistema de gestión de contenido flexible, en lugar de «solo una plataforma de blogs».

Cuando se trata de campos personalizados de WordPress, el plugin freemium Advanced Custom Fields es uno de los nombres más conocidos. Hace que sea más fácil trabajar con campos personalizados en todos los aspectos, y también es el tema de nuestra publicación de hoy.

Específicamente, explicaremos por qué los campos personalizados avanzados son tan valiosos y luego le mostraremos paso a paso cómo puede aplicarlos a su sitio de WordPress.

Aquí está todo lo que encontrarás en esta publicación:
Hay mucho que cubrir, así que vamos a bucear en

¿Qué Son los Campos Personalizados de WordPress? ¿Qué Te Dejan Hacer?

Los campos personalizados de WordPress te permiten agregar, almacenar y mostrar información adicional sobre un contenido en WordPress. En un nivel más técnico, los campos personalizados le ayudan a almacenar metadatos.

Incluso si no está familiarizado con este término, los campos personalizados potencian gran parte de la funcionalidad de sus complementos y temas favoritos.

Por ejemplo, WooCommerce, la forma más popular de crear una tienda de comercio electrónico, utiliza campos personalizados para almacenar información adicional sobre un producto como:

• Precio
• Peso
• Color

O, si tiene un complemento de calendario de eventos de WordPress, ese complemento usará campos personalizados para almacenar información adicional sobre un evento como:

• Ubicación
• Hora de inicio/finalización
• Precio

También puede crear sus propios campos personalizados para almacenar información que sea relevante para sus necesidades únicas, que es de lo que trata todo este artículo.

¿Qué tan geniales son los campos personalizados en WordPress? Learn ¡Aprende a aprovecharlos con el increíble @ wp_acf en nuestra última guía! Click Haga Clic para Twittear

¿Cuándo Debe Usar Campos Personalizados?

Ahora, es posible que se pregunte por qué necesita campos personalizados en primer lugar.

Por ejemplo, si desea publicar un evento en su sitio de WordPress, ¿no podría simplemente poner toda esa información como texto normal en el editor de WordPress?

Bueno, sí, podría. Pero usar campos personalizados es un mejor enfoque por algunas razones:

• Entrada más fácil: en lugar de escribir cosas desde cero, un grupo de campos personalizados bien diseñado hará que sea mucho más fácil ingresar datos. Por ejemplo, en lugar de escribir una fecha, puede seleccionar la fecha de un selector de fecha.Consistencia
• : la información que ingreses en tus campos personalizados siempre se mostrará de acuerdo con tu configuración, lo que significa que será consistente en todo tu sitio.
• Actualizaciones y mantenimiento fáciles: si desea cambiar algo sobre cómo se mostrará esa información en el futuro, puede actualizar una cosa en lugar de tener que editar cada publicación individualmente.

WordPress Incluye Funcionalidad de campos personalizados incorporada

WordPress en realidad incluye funcionalidad incorporada para agregar campos personalizados a su contenido. En el editor TinyMCE clásico, puede activarlo desde el área de Opciones de pantalla. O bien, en el nuevo editor de bloques, puede habilitarlo desde el área de opciones:

A continuación, puede introducir los datos de campos personalizados utilizando pares clave / valor:

Esta funcionalidad nativa de campos personalizados es totalmente funcional, pero no es la forma más fácil de hacer las cosas, por lo que muchas personas recurren al complemento Avanzado de Campos personalizados en su lugar.

Los campos personalizados avanzados Lo hacen Mucho más fácil

En pocas palabras, los Campos Personalizados Avanzados hacen que sea mucho más fácil trabajar con campos personalizados en WordPress en casi todos los aspectos.

Simplifica la interfaz para agregar y administrar campos personalizados en su panel de WordPress y también simplifica el proceso para mostrar información de campos personalizados en la interfaz de su sitio. Ese hecho solo ayuda a explicar por qué está activo en más de 1 millón de sitios web con una calificación de 4.9 estrellas en más de 1,000 reseñas.

En el backend, le permitirá crear meta cajas fáciles de usar que incluyen tipos de campos preseleccionados. Por lo tanto, en lugar de esa interfaz genérica de par clave-valor (como las que vio anteriormente), podrá usar selectores de fecha, casillas de verificación y más como este:

En total, los campos personalizados avanzados ofrecen más de 30 tipos de campos diferentes que puede agregar a cualquier área de su panel, incluidas publicaciones, usuarios, taxonomías, medios, comentarios e incluso páginas de opciones personalizadas.

Puede ver información detallada sobre cada tipo de campo aquí.

Los campos personalizados avanzados también facilitan mucho la visualización de esa información, con funciones bien documentadas, códigos cortos, bloques de Gutenberg y más.

O bien, puedes encontrar integraciones con otras herramientas, como algunos creadores de páginas de WordPress de arrastrar y soltar.

Campos Personalizados Avanzados Gratis vs Pro: ¿Cuál Necesitas?

Los campos personalizados avanzados vienen tanto en una versión gratuita como en una versión premium asequible.

Para la mayoría de los usos básicos, la versión gratuita está completamente bien. Le da acceso a casi todos los tipos de campos, así como a todas las funciones fáciles de usar y que ahorran tiempo descritas anteriormente.

Si solo quieres almacenar información adicional sobre tu contenido, la versión gratuita es todo lo que necesitas.

Dicho esto, la versión Pro agrega algunas características bastante convenientes que lo ayudan a usar Campos personalizados avanzados de maneras más interesantes: Campos repetidores

• : estos le permiten repetir ciertos campos/grupos de campos post a post. Por ejemplo, si agregara información sobre un altavoz a un evento, un campo de repetidor lo ayudaría a manejar la situación en la que hay más de un altavoz (podría «repetir» los campos para el altavoz tantas veces como sea necesario, lo que le permite manejar casos extremos donde hay varios altavoces).
• Bloques ACF-muestra tus campos como un bloque Gutenberg, en lugar de una caja meta. Esto es especialmente conveniente si está creando un sitio para un cliente y desea darles una forma fácil de ingresar y visualizar datos de campo personalizados.
• Campo de contenido flexible: cree diseños a partir de otros campos. Es como un constructor de página ligero basado en información de campo personalizada.
• Campo de galería: cargue varias imágenes en un solo campo.

También hay algunas otras diferencias, como páginas de opciones, la capacidad de clonar campos, mejoras en los campos de relación y otros ajustes más pequeños.

Puedes ver todas las funciones de ACF PRO aquí.

ACF PRO comienza en 2 25 para uso de por vida en un solo sitio. O bien, puede pagar $100 por uso de por vida en sitios ilimitados.

En caso de duda, comience con la versión gratuita hasta que descubra exactamente qué funcionalidad necesita. Siempre puede actualizar más tarde si es necesario.

Tutorial Avanzado de Campos personalizados: Cómo agregar sus Campos

Ahora profundicemos en el tutorial de Campos Personalizados Avanzados reales y le mostraré cómo crear y mostrar su primer conjunto de campos personalizados.

Para este ejemplo, digamos que tienes un blog sobre correr. Realmente te gusta correr y quieres compartir tus entrenamientos diarios con tus lectores. Específicamente, con cada publicación de blog, quieres compartir el propósito de una carrera:

• – digamos que tienes dos tipos diferentes de carrera: «trabajo rápido» y «acondicionamiento».
• Distancia: cuánto tiempo duró tu carrera.
• Hora de inicio: cuando iniciaste la carrera.
• Hora de finalización: cuando terminaste la carrera.
• Ubicación: donde se llevó a cabo la carrera.

Para recopilar esa información, deberás agregar cinco campos personalizados.

Es importante tener en cuenta que los principios que aprenderá en este tutorial Avanzado de Campos personalizados se aplican a cualquier caso de uso. Solo estamos escogiendo un ejemplo específico porque ayuda tener un ejemplo tangible con el que conectarnos.

vamos a romper este tutorial en dos partes:

1. ¿Cómo agregar y administrar sus campos personalizados en el backend.
2. Cómo mostrar información de campos personalizados en el frontend de su sitio.

Crea un Nuevo Grupo de campos

Una vez que hayas instalado y activado la versión gratuita de Campos Personalizados Avanzados desde WordPress.org, vaya a Campos personalizados > Agregar nuevo para crear su primer Grupo de campos.

Como su nombre indica, un «Grupo de campos» es un grupo de uno o más campos personalizados que se muestran juntos en el panel de WordPress.

Para este ejemplo, creará un grupo de campos que contenga cinco campos personalizados.

Asigne un nombre a su grupo de campos y, a continuación, elija su ubicación. Para este ejemplo, queremos mostrar estos campos personalizados para publicaciones regulares de blog de WordPress, para que pueda dejarlo como la publicación predeterminada.

Sin embargo, si desea mostrar sus campos personalizados en otro lugar, como junto a un tipo de publicación personalizado o con una taxonomía, querrá cambiar esto. También puede configurar varias reglas para mostrar los campos en varias ubicaciones:

Agregar campos personalizados

A continuación, haga clic en el botón + Añadir campo para agregar su primer campo personalizado:

Esto abrirá muchas opciones, pero no necesariamente necesita completar todo.

Las dos opciones más importantes son: Etiqueta de campo

• : esto es lo que aparecerá en el editor. También se usará para generar el Nombre del campo, que es lo que usarás en el código. No es necesario cambiar el nombre del campo (aunque puede hacerlo si es necesario).Tipo de campo
• : este es el tipo de información que desea recopilar. Por ejemplo, querrías un campo de número para recopilar información numérica o un campo de correo electrónico para recopilar una dirección de correo electrónico.

Para este primer campo, querrá un tipo de campo de botón de opción:

Más abajo, puede ingresar las opciones de selección del botón de opción en el cuadro de opciones:

También hay una serie de otras opciones que puede hacer, como si se requiere o no un campo y un valor predeterminado. Siéntase libre de configurarlos según sus necesidades.

Veamos otro ejemplo: un campo personalizado para recopilar la distancia de la carrera. Esta vez, querrá un tipo de campo numérico:

También podría hacer las cosas un poco más fáciles de usar al optar por Anexar la unidad de distancia. Y si lo desea, también puede agregar validación con un Valor Mínimo y un Valor Máximo. Por ejemplo, es probable que no vayas a carreras de 1,000 millas (y si lo haces OM ¡Dios mío, eres el último Forrest Gump)!

Simplemente repita el proceso para todos los demás campos personalizados que desee recopilar. Cuando termine, debería verse algo como esto:

Configurar ajustes y Publicar

Para terminar, desplácese hacia abajo hasta el cuadro de Configuración. Aquí, puede controlar cómo se muestran sus campos en el editor de WordPress.

La mayoría de las veces, puede dejarlos como valores predeterminados. Pero siéntete libre de cambiar las cosas si quieres. Por ejemplo, puede optar por mostrar sus campos personalizados encima del editor de WordPress normal:

Una vez que haya elegido, Publique su grupo de campos para que esté activo.

Hay varias formas diferentes de mostrar datos de campos personalizados avanzados en el frontend de tu sitio. El método exacto que elija dependerá de sus necesidades y nivel de conocimiento. Aquí hay tres maneras diferentes de lograrlo:

1. Los archivos de plantilla de tu tema: esto requiere un poco de conocimiento técnico, pero es el mejor enfoque la mayor parte del tiempo, especialmente si te sientes cómodo trabajando en los archivos de plantilla de tu tema.
2. Con un código corto: esto es súper simple y una buena opción si solo desea insertar datos de campo personalizados caso por caso. Sin embargo, requiere mucho más trabajo manual porque necesitarás agregar códigos cortos a cada publicación.
3. Con Elementor Pro – esto es genial porque elimina por completo la necesidad de trabajar con PHP, pero es un producto premium y también significa que necesitará usar Elementor Pro para sus plantillas.

Puede hacer clic arriba para ir directamente a un método específico o puede leer todos ellos. Depende de ti.

Cómo Agregar Campos Personalizados Avanzados en Archivos de Plantilla de Tema

La primera forma de mostrar la información de su campo personalizado es agregar funciones PHP de Campos Personalizados Avanzados directamente a los archivos de plantilla de su tema hijo.

Esto es un poco avanzado porque requiere que profundices en los archivos de plantilla de tu tema, pero asegura que tus campos personalizados se mostrarán automáticamente en el mismo lugar cada vez.

Específicamente, necesitarás editar la plantilla única para el tipo de publicación en cuestión.

Para una publicación de blog regular, esta es única.php. O bien, algunos temas dividen las cosas en partes de plantilla. Por ejemplo, para el tema TwentyNineteen, en realidad necesitas editar el contenido-single.parte de plantilla php.

Si te sientes perdido aquí, es posible que quieras usar un método diferente.

Una vez que hayas encontrado el archivo de plantilla de tema para tu publicación única, puedes usar la función the_field() de Campos personalizados Avanzados para mostrar la información de un campo. Por ejemplo,

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

Obtenga más información aquí.

Por ejemplo, para mostrar el campo «Propósito», usarías

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

Puedes encontrar el nombre del campo cuando editas un grupo de campos:

Entonces, combinando un poco de marcado HTML con PHP, puede obtener algo como esto para mostrar todos los campos:

<div class="run-information"><ul><li><strong>Purpose:</strong> <?php the_field('purpose'); ?></li><li><strong>Distance:</strong> <?php the_field('distance'); ?></li><li><strong>Start Time:</strong> <?php the_field('start_time'); ?></li><li><strong>End Time:</strong> <?php the_field('finish_time'); ?></li><li><strong>Location:</strong> <?php the_field('location'); ?></li></ul></div>

Para agregar esto por encima del contenido de la publicación normal, agregarías esto a tu archivo de plantilla de tema por encima de the_content():

Y ahora, después de actualizar la publicación del blog, puede ver los datos de campo personalizados sobre el contenido regular de WordPress:

Para obtener más información, consulte la documentación completa de Campos personalizados avanzados.

Cómo mostrar Datos de Campos personalizados Avanzados con un código corto

Para una forma mucho más sencilla de mostrar los datos de tus campos personalizados, también puedes usar códigos cortos. La desventaja aquí, sin embargo, es que deberá agregar el código corto cada vez que desee mostrar un campo personalizado. No hay una manera fácil de automatizar esta tarea.

El código corto es el siguiente:

Por ejemplo, si lo ha introducido en el editor de WordPress:

Entonces, la interfaz de su sitio se vería exactamente igual que el método de plantilla de tema anterior:

Cómo mostrar campos personalizados avanzados con Elementor Pro

Elementor es uno de los creadores de páginas de WordPress más populares. Te permite crear tus diseños mediante la edición visual de arrastrar y soltar. En una nota lateral, Elementor es uno de los socios oficiales de Kinsta.

Con Elementor Pro, el complemento de pago, también puedes crear archivos de plantilla de tu tema, incluida una opción para insertar datos de campos personalizados dinámicos de Campos personalizados Avanzados en tus diseños.

Esta es una gran opción si quieres la flexibilidad de incluir automáticamente datos de campo personalizados en tus plantillas, pero no te sientes cómodo haciendo ediciones directas de código a los archivos de plantilla de tu tema.

Para comenzar, debes ir a Plantillas > Creador de temas y crear una nueva plantilla Elementor para tu post Single:

Puedes agregar los widgets Elementor regulares para el Título y el Contenido de tu Publicación. Luego, para mostrar los datos de campo personalizados, agregaría widgets regulares del editor de texto. La única diferencia aquí, en lugar de editar el texto, seleccionaría la opción Dinámica:

Después de esto, puede seleccionar el campo ACF del menú desplegable:

Desde allí, puede seleccionar el campo específico que agregó con Campos Personalizados Avanzados:

Y también se puede utilizar la Avanzada acordeón ficha anteponer o anexar la información, que permite añadir etiquetas y unidades:

Fácil, derecho? ¡Ahora solo repita para otros campos personalizados!

Resumen

Con campos personalizados avanzados, puede enriquecer sus páginas y publicaciones de blog con más datos e información con una solución fácil de usar. Más: puede comenzar a recopilar información adicional para cualquier contenido de su sitio y luego mostrarla en el frontend para sus visitantes.

Para hacer eso, tienes 3 opciones:

• Los archivos de plantilla de tu tema
• Con un código corto
• Con Elementor Pro

El conocimiento que has adquirido en esta publicación te permitirá desbloquear el profundo potencial de WordPress para crear sitios 100% personalizados que van mucho más allá de las raíces de blog de WordPress.

La única pregunta que queda es la siguiente:

¿Qué crearás con los Campos Personalizados Avanzados? Compártelo con nosotros en los comentarios a continuación