WPLake > Blog > Advanced Custom Fields: Guía completa
  • English
  • Deutsch
  • Français
  • Italiano

Advanced Custom Fields: Guía completa

Hora de leer: 16 minutos

-

ACF Plugins Tutoriales

-

Actualizado 06.10.23

Guía completa: características, instalación paso a paso y descripción general de la interfaz de usuario. Aprenda términos básicos y tipos de campos, y descubra potentes complementos.

Índice

El plugin Advanced Custom Fields (ACF) es una potente herramienta diseñada para simplificar el trabajo con los metadatos incorporados en las entradas de WordPress. Con su rica historia y una gran base de usuarios, ACF se ha convertido en el plugin de referencia para los desarrolladores que buscan una forma eficaz de personalizar y mejorar sus sitios web. En este artículo, exploraremos las características, el proceso de instalación, la interfaz de usuario, los tipos de campo disponibles, las reglas de ubicación, las características adicionales, las opciones de visualización y los complementos del plugin ACF, equipando a los principiantes con los conocimientos necesarios para aprovechar su potencial.

Introducción

#enlace copiado

ACF amplía la funcionalidad postmeta incorporada en WordPress, permitiéndole gestionar y personalizar sin esfuerzo cualquier tipo de dato dentro de su sitio web. Con ACF, ya no estará limitado a los campos predeterminados de WordPress. En su lugar, puede crear fácilmente campos personalizados y añadirlos a sus entradas, páginas, tipos de entrada personalizados y mucho más. Tanto si necesita almacenar información adicional sobre productos, eventos o perfiles de usuario, ACF le ofrece una forma sencilla e intuitiva de gestionar y organizar sus datos personalizados, proporcionándole la flexibilidad necesaria para adaptar su sitio web a sus necesidades específicas.

Larga historia

#enlace copiado

ACF tiene una larga historia dentro de la comunidad de WordPress y se publicó hace mucho tiempo, en el año 2011. Los desarrolladores y creadores de sitios web llevan años confiando en él para mejorar la funcionalidad de sus sitios de WordPress. Gracias a su rendimiento fiable y a su desarrollo continuo, ACF ha conseguido una gran base de usuarios, lo que lo convierte en uno de los plugins más populares disponibles en la actualidad.

Ventajas sobre la competencia

#enlace copiado

Aunque existen otros plugins en el mercado, como Pods, Meta Box y Custom Field Suite, ACF brilla por sus claras ventajas. Una de las principales ventajas de ACF es su amplia base de usuarios (más de 2 millones), que se traduce en un mejor soporte y una próspera comunidad. Más usuarios significa más ideas, correcciones de errores y mejoras de los plugins.

ACF también ofrece una gama más amplia de funciones en comparación con sus competidores, proporcionando a los desarrolladores un completo conjunto de herramientas para personalizar sus sitios web. Tanto si necesita campos de texto sencillos como galerías de imágenes o estructuras de datos complejas, ACF es la solución. La interfaz intuitiva y fácil de usar del plugin garantiza que incluso los principiantes puedan navegar por el proceso de personalización con facilidad.

Amplia documentación

#enlace copiado

Además, la documentación de ACF goza de gran prestigio en la comunidad de WordPress. La documentación, clara y completa, actúa como un valioso recurso que guía a los usuarios a través de las funciones del plugin y les ayuda a aprovechar todo su potencial.

En resumen, las ventajas de ACF frente a sus competidores residen en su gran base de usuarios, que se traduce en un mejor soporte y una mejora continua, su amplia gama de funciones, su interfaz de fácil manejo y su completa documentación.

Capacidades del ACF

#enlace copiado

El complemento Advanced Custom Fields (ACF) se ha convertido en una herramienta potente y repleta de funciones. Con sus amplias capacidades, ACF se ha convertido en un recurso de referencia para los desarrolladores, proporcionándoles oportunidades ilimitadas para personalizar y mejorar sus sitios web. Los puntos principales son;

1. Campos personalizados

#enlace copiado

Uno de los puntos fuertes de ACF reside en su capacidad para manejar datos personalizados sin problemas. Con más de 30 tipos de campos a su disposición, puede capturar y mostrar cualquier información que necesite. Por ejemplo, puede crear campos para recoger testimonios de clientes, especificaciones de productos, detalles de eventos o incluso estructuras de datos complejas. ACF le permite construir galerías para mostrar una colección de imágenes, y el campo "repetidor" le permite crear listas dinámicas o datos pormenorizados con facilidad. Las posibilidades son realmente infinitas.

2. Gestión de CPT y taxonomía

#enlace copiado

Desde la versión ACF 6.1, ACF le permite registrar sin esfuerzo Custom Post Types (CPT) y Taxonomías. Esto significa que puede definir y gestionar diferentes tipos de contenido más allá de las entradas y páginas tradicionales. Por ejemplo, puede crear un CPT "Portafolio" para mostrar sus proyectos o un CPT "Recetas" para compartir sus creaciones culinarias. Con ACF, dispondrá de la flexibilidad necesaria para adaptar la estructura de su sitio web a sus necesidades específicas.

3. Páginas de opciones

#enlace copiado

ACF va más allá de la personalización de entradas y páginas. Le permite crear páginas de opciones, que actúan como nodos centralizados para gestionar la configuración de todo el sitio. Esta función resulta especialmente útil cuando es necesario configurar parámetros globales, como los colores del sitio, el logotipo, los enlaces a redes sociales o los scripts personalizados. Con las páginas de opciones de ACF, puede agilizar la gestión de estos ajustes, facilitando el mantenimiento de la coherencia en todo su sitio web.

4. Bloques Gutenberg

#enlace copiado

Con el auge del editor Gutenberg, ACF ofrece una integración perfecta a través de su función ACF Blocks. Los Bloques ACF le permiten crear y añadir bloques Gutenberg personalizados sin esfuerzo. Piensa en estos bloques como bloques de construcción para el contenido de tu sitio web. Por ejemplo, puedes crear un bloque personalizado para mostrar un deslizador de testimonios, una sección de llamada a la acción o una característica destacada. Los Bloques ACF proporcionan una forma sencilla e intuitiva de ampliar las capacidades del editor Gutenberg, dándote más control sobre el proceso de creación de contenido.

Además de las características mencionadas, el plugin Advanced Custom Fields ofrece otras numerosas funcionalidades, cada una de las cuales constituye una valiosa herramienta en el arsenal de los desarrolladores web. Desde la lógica condicional hasta los diseños flexibles de grupos de campos, ACF le permite crear sitios web personalizados y dinámicos.

En conclusión, el plugin Advanced Custom Fields es un tesoro de posibilidades para los desarrolladores que se embarcan en la creación de sitios web. Con su amplia gama de funciones, ACF es una herramienta fiable y versátil que simplifica la personalización y abre las puertas a un sinfín de oportunidades creativas.

Básico frente a Pro

#enlace copiado

Es importante saber que hay dos versiones disponibles: Basic y Pro. La versión Básica tiene todas las funciones esenciales que necesita y es adecuada para la mayoría de los sitios web. En cambio, la versión Pro ofrece funciones adicionales y asistencia personalizada.

Recomendamos empezar con la versión Básica, que ofrece una amplia funcionalidad para muchos sitios web. Si más adelante necesita funciones más avanzadas, puede actualizar fácilmente a la versión Pro.

La buena noticia es que la migración de Basic a Pro es indolora y sin problemas. Todos los datos que ya hayas creado con la versión Básica permanecerán intactos, lo que garantiza una transición fluida sin pérdidas ni inconvenientes.

Así pues, la versión Pro de Campos personalizados avanzados ofrece varias ventajas sobre la versión Básica. Entre ellas se incluyen:

1. Tipos de campo adicionales

#enlace copiado

La versión Pro introduce tipos de campo adicionales como galería, repetidor y contenido flexible.

  • Campo Galería
    El campo Galería le permite crear galerías de imágenes dentro de su contenido. Puede cargar fácilmente múltiples imágenes o seleccionarlas de su biblioteca multimedia, proporcionando una forma visualmente atractiva de mostrar galerías de fotos, portafolios o cualquier colección de imágenes.
  • Campo Repetidor
    El campo Repetidor permite crear conjuntos de campos que se repiten. Es como tener un mini formulario dentro de tu formulario. Esto es especialmente útil cuando necesita recoger y mostrar múltiples instancias del mismo tipo de datos. Por ejemplo, puede crear un campo repetidor para una sección de miembros del equipo, donde puede añadir varios miembros del equipo con su información respectiva, como nombre, foto y función. El campo repetidor ACF le ofrece la flexibilidad necesaria para manejar estructuras de datos repetitivas con facilidad.
  • Campo de contenido flexible
    El campo de contenido flexible es una función versátil que permite crear diseños flexibles y personalizables. Le permite definir diferentes conjuntos de campos, llamados diseños, y luego elegir y organizar estos diseños dentro de su contenido. Esta flexibilidad le permite crear estructuras de página dinámicas con secciones variables, como banners de héroes, bloques de texto, galerías de imágenes o cualquier otro módulo de contenido que necesite. El campo de contenido flexible del ACF le permite crear diseños de contenido altamente personalizables y reutilizables sin limitaciones.

2. Bloques ACF

#enlace copiado

Bloques ACF es una potente función del plugin Advanced Custom Fields que permite crear bloques Gutenberg personalizados sin esfuerzo. Gutenberg es el editor predeterminado de WordPress, y los bloques son los elementos de construcción del contenido.

Con ACF Blocks, puede diseñar y añadir bloques únicos adaptados a las necesidades de su sitio web. Estos bloques pueden utilizarse para diversos fines, como testimonios, perfiles de miembros del equipo o secciones de llamada a la acción. Los Bloques ACF se integran a la perfección con el editor Gutenberg, y puedes añadirlos, personalizarlos y reorganizarlos fácilmente.

Lo mejor de los bloques ACF es que puedes utilizar los campos personalizados avanzados para definir y controlar los campos de cada bloque. Esto le permite recopilar datos específicos para cada bloque utilizando campos personalizados como entradas de texto, cargas de imágenes o desplegables de selección. Los bloques ACF proporcionan flexibilidad y una experiencia de edición fácil de usar.

3. Páginas de opciones

#enlace copiado

La función de páginas de opciones es muy útil cuando necesita configurar parámetros globales, como los colores del sitio, el logotipo, los enlaces a redes sociales o los scripts personalizados. Con las páginas de opciones de ACF, puede agilizar la gestión de estos ajustes, lo que facilita mantener la coherencia en todo el sitio web.

Desde la versión 6.2, puede crear páginas de opciones utilizando la interfaz de usuario del plugin.

4. Apoyo personal

#enlace copiado

Con la versión Pro, tendrá acceso a la asistencia prioritaria del equipo de ACF. Este equipo es conocido por su asistencia rápida y útil, lo que garantiza que reciba soluciones oportunas a cualquier problema o consulta que pueda tener.

Instalación

#enlace copiado

La versión básica

#enlace copiado
  1. Acceda al directorio de plugins de WordPress: Visite la sección "Plugins" dentro de su panel de administración de WordPress.
  2. Busque "Campos personalizados avanzados": Escriba "Campos personalizados avanzados" en la barra de búsqueda.
  3. Haga clic en "Instalar ahora": Localice el plugin ACF en los resultados de la búsqueda y haga clic en el botón "Instalar ahora".
  4. Active el plugin: Una vez finalizada la instalación, haga clic en el botón "Activar" para activar el plugin ACF.

¡Enhorabuena! Ya dispone de la versión básica de Campos personalizados avanzados en su sitio web.

La versión Pro

#enlace copiado

Para instalar la versión Pro, siga estos pasos:

  1. Comprar y descargar la versión Pro: Visite el sitio web oficial de ACF y adquiera la versión Pro. Descargue el archivo del plugin (normalmente un archivo ZIP) en su ordenador.
  2. Acceda al directorio de plugins de WordPress: En el panel de administración de WordPress, vaya a la sección "Plugins".
  3. Haga clic en "Añadir nuevo" y luego en "Subir plugin": Haga clic en "Añadir nuevo" y seleccione el botón "Cargar plugin".
  4. Cargar la versión Pro: Haga clic en el botón "Elegir archivo" y seleccione el archivo ZIP del plugin que ha descargado. A continuación, haz clic en "Instalar ahora".
  5. Activar el plugin: Una vez finalizada la instalación, haga clic en el botón "Activar" para activar el plugin ACF Pro.

Busque el nuevo elemento "ACF" en el menú de administración y haga clic en el subelemento "Actualizaciones". En la página Actualizaciones, introduzca su clave de licencia para desbloquear las actualizaciones automáticas.

Interfaz de usuario

#enlace copiado

Términos básicos

#enlace copiado

Al empezar a utilizar el plugin Advanced Custom Fields, es importante familiarizarse con algunos términos básicos que le ayudarán a navegar y aprovechar al máximo sus funciones. Echemos un vistazo a estos términos:

  1. Grupo ACF
    Un grupo ACF es un contenedor que contiene una colección de campos relacionados. Permite organizar y agrupar campos con una finalidad específica. Piense en él como una carpeta que contiene varios archivos relacionados con un proyecto específico. Por ejemplo, puede crear un grupo ACF llamado "Detalles del producto" que contenga campos como "Nombre del producto", "Precio" y "Descripción".
  2. Campo ACF
    Un campo ACF representa un elemento específico de entrada o salida que captura o muestra datos. Define el tipo de datos que se pueden introducir o recuperar. Puede pensar en un campo ACF como un campo de formulario que encuentra en un sitio web, como una entrada de texto, un desplegable de selección o una carga de imagen. Cada campo tiene sus propios ajustes y configuraciones, lo que le permite personalizar su comportamiento y apariencia.
  3. Reglas de ubicación de grupos
    Las reglas de ubicación en ACF determinan dónde se muestran sus campos dentro del área de administración de WordPress. Estas reglas definen el contexto o las condiciones bajo las cuales sus campos serán visibles. Por ejemplo, puede establecer reglas de ubicación para mostrar determinados campos sólo en determinadas páginas, entradas o tipos de entradas personalizados. Esto garantiza que sus campos aparezcan exactamente donde los necesita, proporcionando una experiencia de edición personalizada.

Capturas de pantalla

#enlace copiado
Interfaz del Grupo ACF. Contiene la lista de campos del grupo y los ajustes del grupo, como las reglas de localización.
Configuración del campo ACF. La primera pestaña "General" contiene los ajustes principales del campo, como el tipo, la etiqueta y el nombre. Otras, como la pestaña 'Validación', le dan un control flexible sobre el campo.
Herramienta de registro y gestión de CPT de ACF. Desde la versión ACF 6.1, puede gestionar sus CPT sin salir del plugin.
Herramienta de registro y gestión de la taxonomía ACF. Desde la versión ACF 6.1, puede gestionar sus Taxonomías sin salir del plugin.

Así, los grupos ACF le ayudan a agrupar campos relacionados, los campos ACF representan los elementos individuales de entrada o salida, y las reglas de ubicación garantizan que sus campos aparezcan en el lugar correcto en el momento adecuado. Juntos, estos términos sientan las bases para crear y gestionar estructuras de datos personalizadas con facilidad y eficacia.

Tipos de campo

#enlace copiado

Como hemos mencionado antes, ACF tiene más de 30 tipos de campo, lo que le da una flexibilidad total sobre los formatos de contenido.

A continuación encontrará una lista de los principales tipos de campo, que probablemente utilizará con más frecuencia;

Básico

#enlace copiado
  • Texto
    El tipo de campo Texto permite a los usuarios introducir y almacenar texto simple o caracteres alfanuméricos.
  • Número
    El tipo de campo Número permite a los usuarios introducir y almacenar valores numéricos, incluidos números enteros o decimales.

Contenido

#enlace copiado
  • Imagen
    El tipo de campo Imagen permite a los usuarios cargar y almacenar archivos de imagen, proporcionando una forma cómoda de gestionar y mostrar imágenes dentro de los campos personalizados.
  • oEmbed
    El campo oEmbed proporciona un componente interactivo para incrustar vídeos, imágenes, tweets, audio y otros contenidos. Este campo hace uso de la funcionalidad oEmbed nativa de WordPress.
  • Galería
    El tipo de campo Galería permite a los usuarios crear y gestionar galerías de imágenes cargando varias imágenes y disponiéndolas en un orden específico.
  • Enlace
    El tipo de campo Enlace permite a los usuarios introducir y almacenar enlaces URL, incluidas direcciones de sitios web o enlaces internos/externos.
  • Archivo
    El tipo de campo Archivo permite a los usuarios cargar y almacenar varios tipos de archivos, como documentos, PDF o archivos multimedia.

Elección

#enlace copiado
  • Verdadero/falso
    El tipo de campo Verdadero/Falso proporciona una casilla de verificación o una opción de alternancia que permite a los usuarios seleccionar un valor verdadero o falso.
  • Seleccionar
    El tipo de campo Seleccionar ofrece un menú desplegable o una lista de opciones predefinidas, lo que permite a los usuarios elegir un único valor entre las opciones proporcionadas.

Avanzado

#enlace copiado
  • Google Map
    El tipo de campo Google Map se integra con la API de Google Maps, lo que permite a los usuarios seleccionar y almacenar ubicaciones geográficas en un mapa.
  • Objeto de entrada
    El tipo de campo Objeto de entrada proporciona un desplegable o un campo autocompletable que permite a los usuarios seleccionar y enlazar a otras entradas o páginas dentro del sitio de WordPress.
  • Repetidor
    El tipo de campo Repetidor permite a los usuarios crear conjuntos de campos repetibles, haciendo posible añadir múltiples instancias de un grupo de campos para la entrada estructurada de datos o la visualización flexible de contenidos.

Puede encontrar la lista completa de los tipos de campo soportados en la documentación oficial.

Normas de localización

#enlace copiado
Las reglas de ubicación en la configuración del grupo le permiten 'adjuntar' este grupo a diferentes pantallas de administración.

Hemos revisado los términos básicos, y ahora vamos a profundizar un poco más en las reglas de localización. A través de este ajuste, podremos entender mejor las capacidades del ACF.

Así pues, las reglas de localización determinan dónde se mostrarán sus campos ACF. Exploremos las distintas opciones de reglas de localización disponibles en ACF:

Ubicaciones primarias

#enlace copiado
  1. Página
    Puede adjuntar campos ACF a páginas específicas de su sitio web WordPress. Esto significa que puede crear campos personalizados que sean visibles y editables sólo al editar determinadas páginas. Por ejemplo, puede tener un campo Archivo "Historia de la empresa" que sólo aparezca en la página "Inicio", lo que le permitirá adjuntar un archivo único para la página de inicio.
  2. Post:
    De forma similar a las páginas, los campos ACF pueden adjuntarse a posts individuales. Esto le permite personalizar los datos asociados a cada entrada por separado. Por ejemplo, puede tener un campo "Valoración" que sólo aparezca al editar una entrada de "Crítica de cine", permitiéndole asignar una valoración a esa película en concreto.
  3. Tipo de entrada personalizada:
    Además de páginas y entradas, los campos ACF pueden asociarse a tipos de entrada personalizados. Los tipos de entrada personalizados son una forma de crear estructuras de contenido adaptadas a sus necesidades específicas. Por ejemplo, si tienes una tienda WooCommerce y utilizas el tipo de post personalizado "WooProducts", puedes asociar campos ACF a este tipo de post para capturar información adicional del producto como SKU, precio o especificaciones.

Ubicaciones adicionales

#enlace copiado

Además de las pantallas de administración de puestos y CPT, puede "adjuntar" su grupo a las siguientes pantallas:

  1. Usuario:
    Los campos ACF también pueden adjuntarse a los perfiles de usuario, lo que permite recopilar información adicional sobre los usuarios más allá de los campos de usuario estándar de WordPress. Por ejemplo, puede crear campos para capturar detalles del usuario, como su designación.
  2. Opciones (para todo el sitio):
    Los campos ACF pueden adjuntarse a opciones para todo el sitio, lo que significa que serán accesibles y editables desde cualquier parte de su sitio WordPress. Estos campos almacenan datos que se aplican globalmente a todo el sitio web. Un ejemplo podría ser un campo "Logotipo del sitio" que le permite cambiar fácilmente el logotipo mostrado en todo su sitio.
  3. Taxonomía:
    Los campos ACF pueden asociarse a taxonomías, que se utilizan para categorizar y organizar contenidos. Por ejemplo, si tiene una taxonomía "Categoría de producto", puede añadir campos ACF a esta taxonomía para capturar información adicional específica de cada categoría, como una descripción de la categoría o una imagen.

Tanto si se trata de personalizar páginas, entradas, tipos de entrada personalizados, perfiles de usuario, opciones para todo el sitio o taxonomías, ACF cubre todos los aspectos principales de WordPress, permitiéndole crear contenidos a medida y estructurados con facilidad.

Funciones adicionales

#enlace copiado

Además de su funcionalidad básica, el complemento Advanced Custom Fields ofrece varias funciones adicionales que mejoran sus capacidades y lo hacen aún más versátil. Exploremos estas funciones en detalle;

  1. Gestión de CPT y Taxonomías
    ACF simplifica el proceso de creación de tipos de entrada personalizados (CPT) y taxonomías en WordPress. Los CPT permiten definir nuevos tipos de contenido con su propio conjunto de campos y características. Con ACF, puede registrar sin esfuerzo tipos de entrada personalizados y asociarlos a grupos de campos específicos, lo que le permite adaptar la experiencia de edición a cada tipo de contenido. Por ejemplo, puede crear un CPT llamado "Testimonios" y añadir campos como "Nombre del cliente", "Texto del testimonio" y "Valoración".
  2. Bloques ACF
    Los bloques ACF proporcionan una integración perfecta entre ACF y el editor Gutenberg de WordPress. Permiten crear bloques personalizados con campos ACF, lo que hace que sea increíblemente fácil agregar contenido dinámico y personalizado a sus páginas y publicaciones impulsadas por Gutenberg. Los bloques ACF te dan la posibilidad de construir componentes reutilizables que se pueden añadir y editar fácilmente utilizando el editor de bloques. Por ejemplo, puedes crear un bloque personalizado para una sección de "Llamada a la acción" que incluya campos como "Título", "Descripción" y "Texto del botón."
  3. Páginas de Opciones
    Las Páginas de Opciones de ACF le permiten crear páginas de configuración global para su sitio WordPress. Estas páginas de opciones actúan como una ubicación centralizada para gestionar los ajustes o configuraciones de todo el sitio. Le permiten añadir campos que controlan varios aspectos de su sitio web, como el logotipo del sitio, enlaces a redes sociales o scripts personalizados. Las Páginas de Opciones ACF ofrecen una forma sencilla de gestionar estos ajustes sin necesidad de codificación. Es como tener un panel de control donde puede ajustar el comportamiento y la apariencia del sitio.

Visión general de las funciones CPT y Taxonomía

#enlace copiado

Con estas funciones, puede adaptar la estructura, el contenido y el comportamiento de su sitio web exactamente a sus necesidades, lo que lo convierte en una potente herramienta tanto para desarrolladores como para creadores de contenidos.

A continuación puede ver el vídeo sobre las nuevas funciones de gestión de CPT y taxonomía.

Cómo visualizar los campos

#enlace copiado

Cuando se trata de mostrar campos creados con el complemento Campos personalizados avanzados, existen varios métodos.

Uno de los métodos más básicos es utilizar la función get_field(), que es una forma universal y flexible de recuperar y mostrar valores de campo. Sin embargo, requiere conocer los nombres de los campos y manejar correctamente los tipos de retorno consultando la documentación del ACF.

Para simplificar el proceso, podemos utilizar un addon llamado Advanced Views. Este complemento es gratuito y ofrece plantillas inteligentes para mostrar contenido fácilmente. Lo utilizaremos para mostrar campos ACF, y también es compatible con campos de entrada y mucho más. Este complemento ahorra tiempo, ya que genera automáticamente el marcado HTML necesario en función de los campos seleccionados. Puede obtener más información sobre las ventajas de este plugin aquí.

A) Uso de plantillas inteligentes

#enlace copiado

Aclaremos primero lo que entendemos por "plantillas" en el contexto de este plugin: Las plantillas de Advanced Views se basan en el motor Twig. Puede que estés pensando: "No está mal, pero sigue siendo necesario obtener los campos mediante PHP y escribir el marcado desde cero, por no hablar de leer la documentación de Twig".

Aquí es donde el plugin brilla: "Plantillas inteligentes". Esto significa que no tenemos que buscar campos o crear código manualmente desde cero. El plugin proporciona una base sólida que cubre la mayoría de los casos de uso. Si necesitamos algo específico, podemos personalizarlo fácilmente. ¿No es estupendo?

Para seguir adelante; instale el plugin Advanced Views en su sitio WordPress y recuerde activarlo. También necesitará el plugin ACF (gratuito) instalado y activo.

Ahora, echemos un vistazo básico a cómo funciona.

El plugin introduce dos nuevos Custom Post Types (CPTs): ACF View y ACF Card.

  • Vista para datos de entrada y Advanced Custom Fields
    Creamos una Vista y le asignamos uno o más campos de entrada, el plugin genera un shortcode que usaremos para mostrar los valores de los campos a los usuarios. Podemos dar estilo a la salida con el campo CSS incluido en cada Vista.
  • Tarjeta para la selección de entradas
    Creamos una Card y asignamos posts (o items CPT), elegimos una View (que se usará para mostrar cada item) y el plugin genera un shortcode que usaremos para mostrar el conjunto de posts. La lista de posts se puede asignar manualmente o dinámicamente con filtros.

El plugin nos ofrece la comodidad de trabajar con los conocidos CPTs de WordPress a la vez que se encarga de consultar y generar automáticamente plantillas de marcado Twig.

Todo lo que tenemos que hacer es especificar nuestros requisitos, y recibiremos un shortcode listo para ser colocado en cualquier lugar. En la versión Pro, en lugar del uso del shortcode, podemos crear y utilizar un bloque de Gutenberg (con un simple interruptor de casilla de verificación). Esta característica es muy valiosa si utilizas un tema basado en bloques.

Veamos un ejemplo práctico para ver el plugin en acción.

Paso 1. Creación de una vista

#enlace copiado

Cuando haya activado el plugin Advanced Views, verá un nuevo elemento en su menú de administración, llamado "Advanced Views".

En el submenú, hay varios elementos, pero sólo necesitaremos utilizar el llamado "Advanced Views".

ACF Views provides list management via the familiar interface.
Su lista tendrá el mismo aspecto pero sin ningún Elemento de vista.

Visite la pestaña Vistas ACF, haga clic en el botón 'Añadir nuevo' para crear una Vista.

Nota: El término "Vista" es el nombre dado al Post Type especial que proporciona el plugin. Cada Vistaes una lista de campos ACF a mostrar, por lo que puede tener muchas Vistasdiferentes para mostrar diferentes campos (o conjuntos de campos) para diferentes entradas/páginas.

Dé un nombre a su Vista. Puede ser cualquier cosa que describa la Vista, este es el nombre que se mostrará en la lista de Vistashaciéndola más fácil de encontrar. He llamado a mi Vista "Imagen lateral de la página".

Asignar campos

#enlace copiado
ACF Views allow to assign multiple fields within your View.
Asignación de campos a la vista

Ahora necesitas asignar un nuevo campo a tu Vista. Haz clic en el botón "Añadir campo" y selecciona tu "Grupo" en el desplegable. En nuestro caso, el grupo se llama "Campos de página". A continuación, seleccione el campo de destino de la lista. En nuestro caso, el campo se llama "Imagen lateral". (Nota: El tipo de campo se muestra entre paréntesis para facilitar su identificación). En este caso, debería ver que el tipo es una "imagen", continúe eligiendo un "Tamaño de imagen" de la lista de tamaños disponibles, en nuestro caso hemos elegido "Completo".

Cada Vistaadmite una cantidad ilimitada de campos ACF, pero en nuestro caso, utilizaremos sólo uno.

Haga clic en el botón 'Publicar' para guardar y publicar su Vista. Una vez publicada su Vistaverá que se han generado Códigos Cortos en un bloque a la derecha de su Vistapantalla de edición. Cada Vistatiene su propio shortcode con un ID único. Así que la estructura del shortcode es la misma para todas las Vistas, pero los argumentos son únicos.

[acf_views view-id="xxxx" name="x"]

Haga clic en el botón 'Copiar al portapapeles' para el primer shortcode de su Vista.

Paso 2. Pega el shortcode en su lugar

#enlace copiado

Bien, ahora todo debería estar listo para mostrar el campo de imagen. Visite la página de destino con el campo de imagen. Asegúrese de que el campo tiene una imagen adjunta y, a continuación, pegue el shortcode en cualquier lugar que desee del contenido de la página. Para pegar el shortcode con el editor de Gutenberg, haz clic en el botón más y elige el bloque "Shortcode" de la lista. Pega tu shortcode en el bloque y haz clic en el botón "Actualizar" para guardar tu publicación/página.

Bloque Gutenberg con un shortcode Advanced Views.

Visite la página para ver el resultado, y si ha hecho todo correctamente debería ver su imagen ACF mostrada en el contenido.

Campo de imagen ACF mostrado con un shortcode en una página.

Si no puedes ver la imagen, vuelve a editar la página. Asegúrese de que ha adjuntado una imagen al campo de imagen ACF porque si el campo está vacío no tendrá nada que mostrar.

B) Utilizando la función get_field()

#enlace copiado

Veamos cómo utilizar la función get_field() para mostrar distintos tipos de campo:

El campo Enlace con el formato de retorno "URL":

<?php

// don't forget to replace 'link' with your field name
$linkUrl = get_field('link');

if ($linkUrl) {
    // displays the link. Each %s in the string will be replaced with the related argument
    printf("<a href='%s' target='_blank'>Read more</a>",
        esc_url($linkUrl));
}

El Campo de imagen con el "ID" Formato de retorno:

// don't forget to replace 'image' with your field name
$imageID = get_field('image');
// can be one of the built-in sizes ('thumbnail', 'medium', 'large', 'full' or a custom size)
$size = 'full';

if ($imageID) {
    // creates the img tag
    echo wp_get_attachment_image($imageID, $size);
}

El campo Archivo con la "URL" Formato de retorno:

<?php

// don't forget to replace 'file' with your field name
$fileUrl = get_field('file');
if ($fileUrl) {
    // displays the file. Each %s in the string will be replaced with the related argument
    printf("<a href='%s' download='prices.pdf'>Prices.pdf</a>", esc_attr($fileUrl));
}

Para obtener información adicional, vea el vídeo que figura a continuación y lea el artículo oficial de la ACF.

ACF get field, video cover

Soporte multilingüe

#enlace copiado

Si su sitio web tiene, o va a tener, contenido en varios idiomas, entonces es posible que tenga una pregunta acerca de la traducción.

Como ya sabes, WordPress no ofrece multilingüe fuera de la caja. Así que, para hacer que tu sitio web sea multilingüe, necesitas utilizar algunos plugins. Los más populares son WPML y Polylang.

Así que, de hecho, el apoyo a la traducción de campo es una cuestión del plugin, que usted utiliza. La buena noticia es que, como hemos mencionado, ACF es muy popular, y la mayoría de los plugins multilingües totalmente compatible con ACF. Y proporcionan múltiples opciones al respecto: para traducir sólo los valores de campo o incluso las etiquetas de campo.

Tanto WPML como Polylang soportan grupos y campos ACF.

Consejo: La página de opciones del ACF es una función que utiliza un enfoque distinto al de otras funciones. Esto significa que la traducción de la página de opciones puede requerir pasos adicionales. Puede obtener más información en el artículo sobre la página de opciones de ACF.

Complementos

#enlace copiado

Una de las razones de la popularidad del plugin Advanced Custom Fields es la disponibilidad de potentes complementos que amplían su funcionalidad y añaden características adicionales útiles. Estos complementos proporcionan herramientas y mejoras adicionales. Veamos algunas de ellas:

  1. ACF: Mejor búsqueda
    Este complemento mejora la funcionalidad de búsqueda de su sitio web al permitir que la búsqueda incluya contenido de los campos ACF. Garantiza que sus visitantes puedan encontrar resultados relevantes basados en los datos personalizados que ha añadido utilizando ACF.
  2. Advanced Views
    El plugin ofrece plantillas inteligentes para mostrar su contenido fácilmente. Tiene consultas de post incorporadas y generación automatizada de plantillas. Así que podemos desarrollar rápidamente, y mantener la flexibilidad.
  3. Campos de Edición Rápida ACF
    Con este complemento, puede editar los valores de los campos ACF directamente desde la pantalla de Edición Rápida de WordPress. Es una forma cómoda de realizar cambios rápidos en sus campos personalizados sin tener que navegar a la pantalla de edición completa.
  4. Columnas de administración
    El complemento permite a los administradores personalizar y mostrar los datos de los campos personalizados como columnas en el área de administración. Esto agiliza la edición proporcionando una visión rápida de la información relevante.

Estos son sólo algunos ejemplos de los complementos disponibles para el plugin ACF. Cada complemento tiene un propósito específico y ofrece características únicas que pueden mejorar la funcionalidad de su sitio web y la experiencia del usuario. Si necesita mejorar las capacidades de búsqueda, agilizar los procesos de edición, optimizar el SEO para contenido personalizado o crear tablas interactivas, es probable que haya un complemento disponible para satisfacer sus necesidades.

Registro de cambios

#enlace copiado

Los desarrolladores del plugin Advanced Custom Fields han estado mejorando constantemente el plugin. A continuación repasamos las últimas versiones más significativas:

6.0: Nueva interfaz de usuario

#enlace copiado

Desde el 21 de abril de 2022, el plugin cuenta con una nueva y moderna interfaz de usuario.

6.1: Registro de tipos de entrada personalizados y taxonomías

#enlace copiado

Desde el 3 de abril de 2023, podemos crear Post Types y Taxonomies usando la UI del plugin.

6.2: Interfaz de usuario de las páginas de opciones y relaciones bidireccionales

#enlace copiado

Desde el 9 de Agosto de 2023, podemos crear Páginas de Opciones usando la UI del plugin. Además, la nueva característica Bidireccional para campos de Relaciones nos permite obtener posts relacionados sin hacer una WP_Query.

Consejo: La lista se ha actualizado. Marca el artículo para estar al tanto de las nuevas actualizaciones más importantes. Como este artículo cubre todas las características más importantes, puede utilizarlo junto con los documentos oficiales.

Resumen

#enlace copiado

Potente herramienta

#enlace copiado

El plugin Advanced Custom Fields es una potente herramienta que simplifica el trabajo con datos personalizados en WordPress. Con su interfaz fácil de usar y sus amplias funciones, ACF se ha convertido en la opción preferida de los desarrolladores durante la creación de sitios web. El plugin ofrece un abanico de posibilidades, como el registro de tipos de post y taxonomías personalizadas, la adición de varios tipos de campos como galerías y repetidores, la creación de páginas de opciones y la integración sencilla con bloques Gutenberg a través de bloques ACF.

Al instalar ACF, los principiantes pueden empezar con la versión Básica (gratuita), que proporciona la funcionalidad básica y es suficiente para muchos sitios web. Para quienes busquen funciones adicionales y asistencia personal, se recomienda actualizar a la versión Pro. En particular, la migración de Basic a Pro es un proceso sencillo que conserva todos los datos creados anteriormente.

Integración ampliada

#enlace copiado

Es esencial comprender los términos básicos del ACF, como grupo ACF y campo ACF. Los campos ACF pueden adjuntarse a diferentes fuentes como páginas, entradas, tipos de entradas personalizadas, usuarios, opciones (para todo el sitio) y taxonomías. Esta versatilidad cubre todos los aspectos principales de WordPress, permitiendo a los desarrolladores personalizar ampliamente sus sitios web.

La visualización de campos ACF puede lograrse utilizando la flexible función get_field(), que ofrece un enfoque universal y flexible. Sin embargo, requiere una cuidadosa consideración de los nombres de los campos y los tipos de retorno, con referencia a la documentación de ACF. Alternativamente, el complemento Advanced Views simplifica el proceso, permitiendo la visualización de los campos o entradas ACF seleccionados en cualquier lugar del sitio web mediante shortcodes. El complemento genera automáticamente marcas HTML, proporcionando una solución práctica para mostrar datos personalizados.

Amplio soporte

#enlace copiado

La popularidad de ACF se ve reforzada por la disponibilidad de diversos complementos. Estos complementos amplían la funcionalidad del plugin, ofreciendo características como capacidades de búsqueda mejoradas, edición rápida de campos ACF, análisis de contenido con fines de SEO y la posibilidad de crear tablas dinámicas. La amplia gama de complementos permite a los desarrolladores adaptar ACF a sus necesidades específicas.

En conclusión, el plugin Advanced Custom Fields ofrece a los desarrolladores una interfaz fácil de usar, numerosas funciones y una amplia gama de posibilidades para personalizar los sitios web de WordPress. Al aprovechar sus capacidades, los principiantes pueden gestionar fácilmente los datos personalizados, mostrar los campos de manera eficiente y mejorar la funcionalidad a través de una amplia gama de complementos. Tanto si se trata de crear un sencillo blog como un complejo sitio de comercio electrónico, ACF resulta ser una herramienta inestimable para crear experiencias dinámicas y personalizadas con WordPress.

Sobre el autor
Maxim Akimov

Certified WordPress expert from Ukraine with over 8 years of experience. Advocate of the BEM methodology and the overall modular approach. Loves sporting activities and enjoys going to the gym and regularly plays table tennis.

0 Comentarios

    Deja un comentario

    Responder a 

    Por favor, sea considerado al dejar un comentario.

    No expuesto al público

    Got it