ACF y CPT UI: custom-fields y custom-posts en WordPress

Dificultad del post: facilmediadificil
advanced custom fields

Hoy voy a hablar de algo que literalmente me encanta porque creo que es una de las cosas que convierte a WordPress en un completo framework con el que podemos hacer literalmente lo que nos salga de los cojones: los custom-fields, los custom-posts y las custom-taxonomies.

Si un implementador o diseñador WordPress no ha trabajado aún con custom-posts, custom-fields y custom-taxonomies es que aún no ha descubierto todo el potencial de WordPress.

Voy a empezar por explicar qué son estos tres elementos y para qué sirven:

  • custom-fields: Son campos personalizados. Pueden ser de diferentes tipos y pueden asociarse tanto a un post o página nativa de WordPress, como a un nuevo custom-post creado por nosotros.
  • custom-posts: Son como las páginas y las entradas, pero personalizados. Pueden tener las características y campos que tú quieras darles y con ellos se puede clasificar contenido de la forma que necesites, sin limitaciones. Se guardan en la tabla de wp_posts junto con los posts y las páginas de WordPress.
  • custom-taxonomies: Puedes crear tus propias taxonomías, como las nativas de WordPress (categorías y etiquetas), que te permitirán clasificar el contenido de los custom-posts que crees.

¿Quieres un ejemplo de custom-post? Pues es simple, WooCommerce utiliza custom-posts con custom-fields y custom-taxonomies para los productos y las categorías de productos.

¿Quieres otro ejemplo? Cuando usas LearnDash, tanto las lecciones como los hilos y demás formas de clasificar contenidos dentro del LMS utilizan customs.

¿Otro? Pues tanto bbPress como BuddyPress utilizan custom-posts, custom-taxonomies y custom-fields para guardar el contenido.

Todos los plugins que clasifican contenido de una forma diferente en WordPress utilizan custom-posts, custom-taxonomies y custom-fields aunque tú no los veas.

Lo bueno es que, si quieres hacer tú mismo algo así para una web, puedes. Simplemente tienes que utilizar un plugin como ACF (Advanced Custom Fields) para los custom-fields y un plugin como CPT UI para crear tanto custom-posts como custom-taxonomies.

acf wordpress

Evidentemente, es necesario tener claro lo que queremos crear; de lo contrario, no vamos a ningún sitio.

En el ejemplo anterior, por ejemplo, estoy creando una especie de CRM con WordPress usando las custom-taxonomies para los “clientes” y los custom-posts para los servicios ofrecidos.

acf wordpress

Como puedes ver en la imagen anterior, las taxonomías también pueden llevar custom-fields.

Lo bueno de esto es que, si queremos, cuando tengamos todo “perfilado” podemos hacer dos cosas: ocultar la mayoría de las opciones del back-end de WordPress para dejar solo las personalizadas o directamente usar Gravity Forms para crear un front-end interactivo e intuitivo con Elementor Pro y Gravity Forms.

Hasta aquí la introducción. A partir de ahora vamos a hablar de los plugins que he comentado arriba y que personalmente recomiendo para darle forma a un sitio web personalizado o herramienta con campos y tipos de contenido personalizados.

Icono suscripción Newsletter

¿Quieres
recibir mis articulos?

No te pierdas todos mis trucos para WordPress, CMS, Marketing Digital y WPO.

 

custom-posts y custom-taxonomies con CPT UI

CPT UI es un plugin completamente gratuito que podemos encontrar en el repositorio de plugins de WordPress.

Antes de que entremos en materia, te dejo dos videotutoriales que subí a mi canal de Youtube y donde aprenderás cómo se utiliza el plugin y algunos tips útiles. En este vídeo verás cómo crear y gestionar custom-posts con CPT UI en WordPress:

Y en este otro tienes cómo crear y gestionar custom-taxonomies en WordPress con CPT UI:

Existen muchas alternativas gratuitas que hacen lo mismo que CPT UI. Incluso existen algunas premium como, por ejemplo, JetEngine de Crocoblock.

A mí me encanta CPT UI porque es gratuito y porque me da todo lo que necesito para crear y gestionar tanto custom-posts como custom-taxonomies.

custom fields wordpress

Podemos ver y personalizar todas las características de las custom-taxonomies y custom-posts. Los ajustes que podemos realizar son varios, desde lo que aparece en el REST API de WordPress hasta lo que sale en el front-end y en el back-end.

Lo bueno es que no solo podemos crear una 1 taxonomía personalizada para clasificar contenido, sino que es muy fácil crear varias relacionadas entre sí.

Por otro lado, podemos crear distintos custom-posts y asociarlos a distintas custom-taxonomies.

custom fields wordpress

A cada custom-post le podemos asignar distintos campos personalizados y distintas taxonomías: como te he dicho, todo es completamente personalizado, como lo harías con un framework.

Puedes encontrar el plugin CPT UI en el repositorio de WordPress: https://es.wordpress.org/plugins/custom-post-type-ui/

 

Ocultar partes del dashboard de WordPress

Para darle el “toque” al asunto, como he dicho antes, podemos desactivar ciertas partes del dashboard o backend de WordPress para simplificarlo y ocultar lo que no se necesita.

Lo que buscamos limpiar es sobre todo esta parte del dashboard:

custom fields wordpress

Para ocultar partes del dashboard vamos a necesitar un plugin adicional. También existen varias opciones, pero a mí me gusta Adminimize.

custom fields wordpress

Adminimize es un plugin gratuito que podemos encontrar en el repositorio de WordPress y que, aunque es bastante “avanzado”, nos permite limpiar el dashboard de WordPress y todo lo que contiene de una forma muy selectiva.

Otra opción que a mí me gusta bastante para hacer esto es el plugin Admin Menu Editor, mucho más simple y también disponible en el repositorio de WordPress:

custom fields wordpress

Evidentemente, todo esto no es necesario hacerlo si vamos a crear una interfaz en el front-end con Elementor Pro y Gravity Forms desde donde se gestionarán los datos.

También quiero añadir que todo esto podemos hacerlo directamente con código, pero evidentemente es más simple hacerlo con plugins.

Icono suscripción Newsletter

¿Quieres
recibir mis articulos?

No te pierdas todos mis trucos para WordPress, CMS, Marketing Digital y WPO.

 

custom-fields en WordPress con ACF

ACF son las siglas de Advanced Custom Fields, un plugin muy avanzado que nos permite gestionar campos personalizados a un nivel difícil de imaginar.

¿Existen alternativas a ACF? Sí (de hecho, ACF tiene una versión gratuita), pero lo que nos ofrece la versión premium de ACF es mucho, ya que incluye más tipos de campos y algunas opciones avanzadas adicionales solo aprovechadas por usuarios avanzados que desarrollan.

acf wordpress

Como he dicho al principio, Advanced Custom Fields junto con un plugin como CPT UI convierten a WordPress en un completo framework, ya que podemos crear cosas increíbles casi sin tocar ni una sola línea de código.

Antes de explicar nada más, aquí te dejo un vídeo sobre ACF que he subido a mi canal de Youtube:

Antes de nada, quiero aclarar que ACF se integra muy bien con Elementor Pro y con Gravity Forms. Esto hace que podamos hacer cosas increíbles en el front-end de WordPress sin necesidad de saber programar. Cuando hablo de cosas increíbles, hablo de objetivos avanzados para los que necesitarías conocimientos mucho más profundos si no tuvieras ACF.

acf wordpress

Como puedes ver en la imagen anterior, con ACF puedes asociar los campos personalizados a cualquier tipo de contenido, incluidos los posts y páginas nativas del propio WordPress. Incluso si tenemos un plugin que ya genera custom-posts, como WooCommerce, podemos asociar nuestros campos personalizados a esos tipos de contenido.

Simplemente para mostrarte un ejemplo, esta parte de mi web donde indico la dificultad del contenido del post esta creada con ACF y Elementor:

acf wordpress

El custom post está asociado directamente a los posts, donde publico mi contenido.

Con Advanced Custom Fields para WordPress podemos añadir todo tipo de campos personalizables y mediante plugins añadidos podemos añadir otros tantos tipos de campos con distintas apariencias.

Los campos en ACF siempre se juntan en grupos, aunque solo sea 1 campo:

acf wordpress

Además, se asocian a un tipo de contenido (posts, páginas y custom-posts), un archive o loop (blog, autor, categorías, etiquetas o custom-taxonomies).

Podemos añadir los campos directamente desde la página de creación o edición de grupo de campos y configurar todas sus propiedades y características:

acf wordpress

El tipo de campo determina cómo se va a guardar y cómo se va a “formatear”, por lo que debemos elegirlo bien:

acf wordpress

Esto es importante, sobre todo, si trabajamos con una herramienta adicional como un formulario o un scraper para rellenar los datos de nuestro sitio web.

Podemos crear fichas de lo que queramos, completas y con los datos que necesitamos nosotros exactamente:

acf wordpress

En cualquier momento podríamos editar un campo, pero con MUCHO cuidado de cambiar el tipo de campo, ya que podemos “reventar” literalmente el formato y los datos guardados:

acf wordpress

Todo esto, cuando lo asociamos al custom-post correspondiente, nos lleva a tener una ficha donde podemos rellenar los datos desde el dashboard de WordPress como si estuviésemos publicando un post o página:

acf wordpress

Como he dicho antes, podríamos introducir los datos desde el dashboard o utilizar Gravity Forms para introducirlos desde el front-end, permitiendo que lo hagan los usuarios.

Para que te hagas una idea, combinando todos los plugins de los que he hablado aquí podemos crear con WordPress algo como un sistema de clasificados o reservas de forma muy simple. Solo tenemos que añadirle Gravity Forms y Elementor Pro, del que vamos a hablar ahora mismo.

Puedes encontrar la versión gratuita de ACF (Advanced Custom Fields) para WordPress en el repositorio oficial: https://wordpress.org/plugins/advanced-custom-fields/

Si necesitas la versión premium de ACF, puedes encontrarla en su sitio web: https://www.advancedcustomfields.com/pro/

 

custom-fields, custom-posts y Elementor Pro

Hemos hablado de toda la parte “interna” pero, como he dicho antes, es muy fácil mostrar todo esto en el front-end utilizando Elementor Pro.

Con Elementor Pro, tal y como mostramos en su momento en el post del theme builder, podemos crear “fichas” con los custom-posts que nosotros queramos y cargar ahí los custom-fields de la forma que deseemos.

acf wordpress

Además, si queremos darle un toque más avanzado podemos utilizar algún plugin como Dynamic.ooo, que nos permitirá subir todo al siguiente nivel.

Si sueles utilizar Elementor Pro, ya te habrás dado cuenta de que puedes cargar contenidos de forma dinámica utilizando campos dinámicos:

acf wordpress

Utilizando el Theme Builder de Elementor Pro del que ya hablé en este blog podemos crear plantillas para los custom-posts con los custom-fields que tengamos guardados.

Cualquier campo de Elementor Pro puede cargarse de forma dinámica, usando los campos meta de la base de datos de WordPress o campos guardados en ACF.

Para finalizar, simplemente quiero decirte que es MUY fácil crear una ficha con el Theme Builder de Elementor Pro para un custom-post nuevo:

acf wordpress

Esto, como puedes ver en la imagen anterior, se hace en las condiciones de visualización de los layouts de Elementor.

Te recuerdo que para utilizar los campos dinámicos de Elementor vas a necesitar Elementor Pro. Puedes comprarlo a través de la siguiente URL: https://alvaro.click/elementorpro

Icono suscripción Newsletter

¿Quieres
recibir mis articulos?

No te pierdas todos mis trucos para WordPress, CMS, Marketing Digital y WPO.

Tal vez te interese...

Álvaro Fontela
Álvaro Fontela
Soy ponente en eventos de marketing digital, consultor WordPress y co-fundador de Raiola Networks, amante del mundo del motor (coches japoneses) y tecnófilo empedernido.
Álvaro Fontela
Álvaro Fontela
Soy ponente en eventos de marketing digital, consultor WordPress y co-fundador de Raiola Networks, amante del mundo del motor (coches japoneses) y tecnófilo empedernido.

15 respuestas

    1. Hola Jaime, ¿a que relaciona te refieres? Precisamente en los videos muestro como vincular un custom field a un custom post, y también un custom-post a diferentes custom-taxonomies.

      1. Creo que se refiere a algo a lo que también le estoy dando vueltas, pero no veo claro: hacer colecciones. Por ejemplo, tenemos varios custom post types sobre los Óscars: Películas, Actores, Directores, etc.

        Y como taxonomías (etiquetas), por ejemplo: Premios (al mejor X, a la mejor Y…), Edición (2021, 2020…).

        El problema para resolver es si queremos hacer una colección de todo lo que tiene que ver con una edición concreta. ¿Se podría crear un nuevo CPT de «Ediciones» con campos como «Palmarés», donde el usuario solo tenga que seleccionar filtros con las taxonomías creadas? Y añadir más campos extra, como un resumen, galerías de fotos, etc.

        ¿O es mejor añadir campos a la taxonomía Edición, que ya tenemos creada, y crear una plantilla para esa página de archivo?

  1. Hola Álvaro, muchas gracias por esta entrada con un muy interesante contenido. Tengo una duda, verás tengo una web de un concesionario hecha con Elementor pro + CPT+ACF y Ele Custom Skin. Al mostrar más de 9 post se ralentiza muchísimo la página, sin embargo con cualquiera de las plantillas predeterminadas CARDS, CLASSIC los muestra instantáneamente, sabes a que puede ser debido?
    Muchas gracias y un saludo

    1. Hola Jesus, pues no te puedo decir, ya que habría que ver como hace las consultas Ele Custom Skin, que no lo conozco.

      Yo también tengo dos webs de concesionario, en una tengo el loop con JetEngine y otra con Dinamic.ooo (Advanced Posts V2), ambas con Elementor Pro, ACF y CPTUI, y ningún problema que yo haya visto, además siempre monitorizo las querys con Query Monitor y no noto nada raro.
      Ambas opciones las tengo bastante «rodadas» ya que son mías y las llevo desde el minuto 1, ajustando cosas y demás. Lo que si, yo uso loops personalizados hechos con un template de Elementor para mostrar los datos que yo quiero en cada elemento.

    1. Otra cosilla por si acaso, podría contratar tus servicios de asesoramiento? cuales son las tarifas? muchas gracias

      1. Hola Jesús, envíame un email a través de: https:// alvarofontela.com/contacto y lo vemos, ya que justo ahora mismo me pillas bastante saturado de agenda y depende para lo que sea puedo aceptar o no.

  2. Alvaro que buena explicación. Saludos de Perú.
    He venido usando CPT unos meses, y normal las muestro en pantalla, uso divi para este cometido. Sin embargo me es difícil encontrar la funcionalidad de «filtros» para ello.

  3. Hola, cuando creo una custom taxonomy y con las custom fields las utilizo para hacer una plantilla de contenido, en el fornt end se me muestra la id en vez del nombre de cada uno de los elementos de la taxonomía personalizada, ¿Cómo podría solucionarlo?

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Share on twitter
Share on facebook
Share on linkedin