InicioTutoriales de PluginsAdvanced Custom Fields 【TUTORIAL en español】

Advanced Custom Fields 【TUTORIAL en español】

En este tutorial en español vamos a ver el plugin de WordPress Advanced Custom Fields o comúnmente llamado con el acrónimo ACF, con el cual podremos crear Custom Fields o Campos Personalizados, de una forma muy intuitiva y fácil desde la administración de WordPress, sin necesidad de tocar nada de códigos en archivos de tu WordPress o tener los conocimientos para realizar esto último. 


1

GRUPOS DE CAMPOS

Un Field Group o Grupo de Campos, nos servirá para tener ordenados y encajonados todos los campos que vamos a ir añadiendo para después verlos y usarlos o interactuar con ellos cuando editamos o publicamos algo en WordPress.

En Advanced Custom Fields, cada vez que hagamos clic en "Añadir nuevo" en el menú del plugin, lo que haremos es añadir un grupo de campos personalizados. Cada uno de esos grupos, tendrá su nombre correspondiente que le hayamos puesto y un número de campos incluidos en ese grupo.

Una vez que hemos añadido varios grupos, podremos verlos en un listado, donde podremos volver a editarlos:

listado de grupos de campos


2

AÑADIR NUEVO FIELD GROUP

Cuando añadimos un nuevo Grupo o Field Group, nos aparecerá una pantalla para configurarlo, en la cual es donde iremos añadiendo a la vez todos los campos personalizados o custom fields que vayamos a necesitar para ese grupo.

En este tutorial voy a crear un grupo llamado: "MI GRUPO".

Vamos a ir configurando el grupo, mediante 3 pasos o apartados que te expongo a continuación:

  1. 1
    Añadir Campo
  2. 2
    Ubicación
  3. 3
    Ajustes


Añadir nuevo field group - Paso 1 y 2
Añadir nuevo field group - Paso 3


PASO 1

Añadir Campo

Añadir Campo - Paso 1

Cada vez que añadimos un campo en el botón de "+ Añadir Campo", Advanced Custom Fields nos muestra una pantalla con diversas opciones para configurar el campo.

Estas opciones irán cambiando dependiendo del Tipo de Campo que vayamos a elegir.

Entre los tipos de campo, tenemos multitud de ellos clasificados por secciones (Básicos, de Contenido, de Elección, de Relación, De jQuery o de Layout), y que podremos usar según el tipo de información que más nos convenga que se introduzca después en el formulario con ese grupo de campos.

Tipos de campo en Advanced Custom Fields


A modo de ejemplo, vamos a añadir 2 campos básicos a nuestro grupo "MI GRUPO", uno llamado "Tu nombre" y otro llamado "Tu email".

Añadimos el campo 1:

Añadir campo texto

Hacemos clic en el botón de "+ Añadir Campo" para añadir el campo 2:

Añadir campo email


Una vez rellenamos cada opción de cada campo con los datos que he subrayado en amarillo, ya tenemos ambos campos configurados.

Estos 2 campos se añadirán a nuestro grupo, justo cuando publiquemos o actualicemos nuestro grupo, pero antes de hacerlo vamos a seguir configurando dicho grupo con los siguientes pasos 2 y 3. 


PASO 2

Ubicación

Configurar Ubicación en Advanced Custom Fields

El segundo paso que vamos a realizar a la hora de añadir un nuevo Grupo con Advanced Custom Fields, es configurar el apartado "Ubicación" que nos servirá para indicar dónde mostrar nuestro Grupo de Campos que estamos añadiendo, dentro de nuestro WordPress.

La configuración se basa en diversas reglas que iremos configurando con los 3 desplegables que nos salen:

Reglas ubicación Advanced Custom Field

Post Type

Por ejemplo, podemos crear una primera regla para que se muestre ese grupo en nuestras entradas o post:

Post Type + es igual a + Entrada

Podemos crear otra regla para que el grupo se vea dentro de cada página de WordPress:

Post Type + es igual a + Página

O si necesitaramos que se mostrara dentro de algún custom post type que nos haya añadido otro plugin o theme que tengamos, los cuales saldrán listados en el tercer menú desplegable. A mí me han salido estos: producto y pedido (del plugin Woocommerce), cupón, porfolio, testimonio, resume,...


Plantilla de entrada

Reglas plantilla de entrada

Con esta opción elegida, en el tercer menú desplegable nos saldrá un listado de todas las plantillas de entradas, que tengamos en nuestro theme o que hayan añadido algún plugin.

Por ejemplo, podemos crear la regla:

Plantilla de entrada + es igual a + Plantilla por Defecto

Esta regla lo que hará es un efecto bastante similar a la anterior que que utilizamos de Post Type + es igual a + Entradas, consiguiendo que nuestro grupo de campos se visualice en las entradas de nuestro WordPress. Si tenemos unas entradas concretas configuradas con otro tipo de plantilla que no sea la de por defecto, pues si elegimos esa plantilla en el menú desplegable, dicho grupo solamente nos aparecerá en esas entradas.


Estado del Post

Reglas estado del post

Si elegimos Estado del Post en el primer desplegable, nos listará en el tercero los diferentes estados que puede tener una entrada o post, con lo cual en caso de que quisiéramos que nuestro grupo de campos se visualizara solamente cuando una entrada tenga un estado específico, pues elegiríamos ese estado de todos los que nos lista.

Por ejemplo podríamos crear reglas del estilo a:

Estado del Post + es igual a + Publicada

Estado del Post + es igual a + Borrador

Formato del Post

Reglas formato del post

Cuando elegimos la opción de Formato de Post, el tercer desplegable nos mostrará si nuestro tema los soporta, los diferentes formatos de entrada que nos ofrece WordPress cuando vamos a publicar una nueva entrada:

Formatos de entrada

Podemos crear una regla para visualizar nuestro grupo de campos, solamente cuando estemos gestionando alguna de estas entradas que hayamos creado en ese tipo de formato.


Categoría del Post

Reglas Categoría de post

Creo que no tiene mucha explicación. Aquí crearemos reglas específicas para mostrar nuestro grupo de campos de, cuando estemos gestionando alguna categoría de entradas de WordPress.


Taxonomía del Post

Reglas Taxonomía de Post

Si elegimos Taxonomía de Post, nos mostrará no solo las categorías de las entradas de WordPress, sino cualquier otra categoría de otros plugins, theme o custom post que tengamos instalado.


Post

Reglas Advanced Custom Field - Post

Cuando en el primer desplegable elegimos Post, en el tercer desplegable nos listará el título de todas las entradas o post que tengamos en nuestro WordPress.

Por ejemplo, podríamos crear una regla con la entrada titulada ¡Hola, mundo!, y únicamente en esa entrada es donde nos aparecería nuestro grupo de campos que estamos creando:

Post + es igual a + ¡Hola, mundo!

Plantilla de Página

Reglas Plantilla de página

Eligiendo esta opción, sería muy similar a la plantilla de entrada que vimos anteriormente, pero creando la regla solo para esas páginas en las cuales usen la plantilla que indiquemos aquí. 

Si la regla la creamos con la plantilla por Defecto, como por lo general cuando creamos una página en WordPress lo solemos hacer con la plantilla por defecto que trae nuestro Tema, entonces el grupo de campos se visualizaría en todas las páginas que hayamos creado.


Tipo de Página

Reglas Tipo de página

Con esta opción, podemos crear reglas para que nuestro grupo de campos se vean dentro de algún tipo específico de página como puede ser la Página Principal, una página la cual hayamos configurado como página de las entradas o blog o alguna página superior o hija.

Por ejemplo, los Ajustes de la Administración de WordPress -> Ajustes de Lectura, podremos haberlo configurado de la siguiente manera al haber creado una página específica para la Portada y otra para las Entradas:

Ajustes de lectura

Entonces si creamos una regla para dichas páginas, nuestro Grupo de Campos únicamente se mostraría en ellas.


Página Superior

Reglas Página Superior

Esta opción crearía reglas con cada página que al crearla hayamos configurado en sus atributos de página, como que una página hija de otra página superior.

Por ejemplo, en la imagen la página 1 es la página superior de la página 1.1, porque al crear la página 1.1 así lo pusimos. Entonces, después creamos esta regla:

Página Superior + es igual a + Página 1

Con esta regla lo que estaríamos diciendo es que solo nos aparecerá nuestro Grupo de Campos, cuando editemos una página hija de esa página superior, es decir, cuando editemos la Página 1.1 que tiene una superior, es cuando veremos dicho grupo.


Página

ACF Reglas Página

Esto es parecido a cuando antes hacíamos reglas para los Post. Es decir, el tercer desplegable nos mostrará un listado con los títulos de todas las páginas que tengamos creadas, y cuando elijamos alguna en una regla, nuestro Grupo de Campos se visualizará en esa página concreta.


Usuario Actual

Reglas usuario actual

Con esta opción, podemos crear reglas para mostrar nuestro Grupo de Campos, según estemos logueado o viendo el front end o back end de nuestro WordPress.


Rol del Usuario Actual

Reglas Rol del usuario actual

Aquí, al contrario que con la opción anterior en la que podíamos crear una regla con cualquier usuario logueado, en esta ocasión crearíamos las reglas con algún tipo de rol de usuario de los típicos que vienen en nuestro WordPress o puede que nos aparezcan más roles que nos han creado otro plugins o themes.

Estas reglas son bastante útiles, dado que puede interesarnos que únicamente aparezca ese Grupo de Campos a un determinado rol de usuario como por ejemplo los colaboradores o contributor, a los cuales dejamos escribir de vez en cuando entradas y artículos en nuestro blog.

Rol del Usuario Actual + es igual a + Contributor

Formulario de Usuario

Reglas formulario de usuario

En esta opción, podremos crear reglas para mostrar nuestro Grupo de Campos en los formularios que trae WordPress para Añadir nuevos usuarios, editarlos o cuando se registra uno nuevo en nuestro blog.

El formulario de Agregar o el de Editar, podemos verlos en nuestro menú de administración de WordPress:

  • Usuarios -> Añadir nuevo
  • Usuarios -> Todos los usuarios -> Editar  

El formulario de de registro, solo nos saldrá si tenemos marcada la opción de registrarse, en Ajustes:

Ajustes cualquiera puede registrarse

Después, a ese formulario ya podremos acceder en la página de login de WordPress. Esto nos puede ser útil para casos en los cuales queremos crear algún grupo de campos concretos, relacionados con ese registro.


Rol de Usuario

Reglas Rol de Usuario

Esta regla es similar a la de Rol del Usuario Actual que vimos anteriormente, con la diferencia de que nuestro Grupo de campos se visualizaría únicamente en nuestra página de perfil de usuario.


Taxonomía

Reglas Taxonomía

Por ejemplo si creamos la regla para la taxonomía de las categorías de nuestras entradas:

Taxonomía + es igual a + Categoría

Lo que estamos haciendo es que cuando vayamos a editar cualquier categoría de nuestras entradas, nos aparecerá nuestro Grupos de campos en dicho formulario.

La diferencia de esta opción con la que previamente vimos llamada Taxonomía del Post, es que está es genérica para todos los elementos de esa taxonomía que elijamos (en este ejemplo para todas las categorías de entradas), y la otra es individual para una en concreto.


Adjunto

Reglas adjunto

En este caso, nos da la posibilidad de poder crear reglas con nuestros documentos adjuntos, como pueden ser una imagen, un video, un audio, un archivo comprimido,...

Al crear la regla, cuando subimos un nuevo Medio a WordPress, si lo editamos nos aparecerá en dicho formulario de detalles de ese medio, nuestro grupo de campos.


Comentario

Reglas comentario

Creo que esta regla no tiene mucha explicación. Simplemente podemos decirle que nuestro grupo de campos se visualice solamente en el formulario para publicar un comentario, sea de entradas, de páginas, de medios, o comentarios de algún plugin que tengamos  instalado como por ejemplo WooCommerce.


Widget

Reglas Widget

Aquí podemos crear reglas para mostrar el grupo de campos dentro del formulario de un Widget concreto, cuando accedemos a él dentro del panel de administración en: Apariencia -> Widgets

Esto puede sernos útil, para configurar dicho Widget con los datos de nuestro grupo de campos que pongamos en ese widget, y después al mostrar ese widget en nuestra página o blog, que se visualicen esos datos.


Menú

Reglas menu

Reglas para mostrar nuestro grupo de campos en el formulario de un menú, al cual accedemos desde nuestro panel de adminsitración en Apariencia - Menús


Elemento del menú

Reglas elemento menu

Reglas para mostrar nuestro grupo de campos en el formulario de un elemento de un menú concreto. La diferencia con la anterior regla es simplemente que se mostraría en el formulario de cada elemento del menú que estamos añadiendo a ese menú. Por ejemplo, si creamos un elemento llamado "Inicio", otro llamado "Contacto", etc, pues en el formulario de cada uno de esos elementos nos aparecería el grupo de campos.





En el botón "Agregar grupo de reglas" podremos ir añadiendo más reglas, consiguiendo así un listado de reglas conjuntas en nuestro grupo de campos de Advanced Custom Fields.

Por ejemplo imagina que necesitas que se muestre tanto en las entradas como en las páginas de WordPress. Pues tendríamos que añadir 2 reglas, una con Post Type = Entrada y otra con Post Type = Página.


PASO 3

Opciones

Ajustes Advanced Custom Fields - Paso 3

El paso tercero consistirá en configurar unas cuantas opciones de nuestro Field Group que estamos creando en nuestro plugin  Advanced Custom Fields.

  • Estilo: aquí indicaremos si queremos que nos lo muestre con un fondo en blanco y borde para encajonar el Field Group, como normalmente aparecen los meteboxes en WordPress, con el cual lo distinguimos de otros apartados u otros Fields Groups que hayamos añadido. O por el contrario no nos gusta de esa manera y lo queremos sin estilo de fondo blanco ni borde.
  • Posición: la posición en donde queramos que nos salga. Normalmente siempre se pone debajo del contenido, es decir, debajo del editor de texto de nuestras entradas o páginas...Pero puede interesarnos que nos salga encima justo debajo del título de la entrada. Pues aquí lo configuraríamos.
  • Número de orden: aquí podremos configurar el orden en el que queramos que nos aparezca el Field Group cuando estemos editando. Si no lo tocamos, nos irán apareciendo por orden de creación.
  • Esconder en pantalla: aquí tendremos diversas opciones para ocultar, si deseamos que únicamente nos muestre nuestro Field Group sin ningún otro apartado que nos distraiga a la hora de introducir datos en los campos, como por ejemplo los propios campos personalizados que trae por defecto WordPress, el estracto, los comentarios..., o incluso la caja de texto para escribir esa entrada o página (editor de contenido).

Por ejemplo, imagina que quieres crear un grupo de campos concreto para introducir unos datos de un cliente, y que te aparezcan cuando estés editando una página llamada "Página cliente".

Creamos el grupo de campos, con la regla de que se muestren únicamente en dicha página:

Regla ACF página cliente

Y después en ajustes, configuramos las opciones escondiendo en la pantalla prácticamente todo lo que no nos hace falta introducir:

esconder items página cliente


El resultado sería que cuando fuéramos a editar nuestra página llamada "Página cliente", lo veríamos así en WordPress:


Editar página cliente


CÓMO USAR LOS CUSTOM FIELDS

Una vez que hayamos añadido y configurado nuestro Field Group en  Advanced Custom Fields, si por ejemplo lo hemos configurado con una regla para que salga si el Post Type es una Entrada, al crear una nueva entrada o editarla, nos aparecerá de la siguiente manera:

ACF Field Group

Ahora es la hora de usar los campos que hayamos añadido en ese Field Group.

Para ello, introducimos los valores que nos pidan, como si se tratase de un formulario web cualquiera, y una vez introducidos, publicamos la entrada o la actualizamos. Una vez hecho esto, esos valores se han guardado ya como metadatos de esa entrada de WordPress.

Estos metadatos, ahora para mostrarlos podremos hacerlo mediante códigos de funciones específicas para ello que traen tanto la API del propio plugin Advanced Custom Fields, como la API de WordPress.


Mostrar los datos con la API que trae ACF

La API de Advanced Custom Fields cuenta con diversas funciones con las cuales podremos mostrar los datos que metamos en los campos personalizados que hayamos creado. Dos de las funciones más básicas, las cuales las tendríamos que incluir dentro del Loop de WordPress, serían estas:

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

<?php echo get_field('mi_campo_personalizado'); ?>


Mostrar los datos con la API de WordPress

Con la API de WordPress, sería muy similar a como lo haríamos con la API que trae ACF. Esto ya lo hemos visto en el Tutorial para crear Custom Post Types y Custom Fields en WordPress. Lo que haríamos básicamente es usar alguna de estas conocidas funciones:

<?php the_meta(); ?>

<?php echo get_post_meta($post->ID, 'mi_campo_personalizado', true); ?>


HERRAMIENTAS

Exportar Grupos de Campos

Exportar Grupo de campos

Esta herramienta de Advanced Custom Fields, nos puede ser muy útil si queremos tener en otra web o instalación de WordPress, los mismos grupos de campos que creamos con este plugin.

Para ello, la herramienta te ofrece dos métodos de exportación:

  1. Exportación a un archivo .json, para poder tener la opción de importarlo después con la herramienta de importación.
  2. Exportación generando un código PHP, para incluirlo después en el archivo functions.php de nuestro theme, o en un archivo php independiente.

Importar Field Group

Importar Grupo de campos

Esta herramienta de Advanced Custom Fields, la usaremos solo cuando hayamos exportado previamente con la anterior herramienta de exportación, a un archivo .json.

Si tenemos previamente ese archivo exportado como copia de seguridad, nos podrá ser muy útil importar esos grupos en otra web con WordPress que tengamos o en una nueva instalación.


¿TE HA GUSTADO ESTE TUTORIAL?
[ Valoración: 3.9 - Votos: ‎12 ]

8 comentarios en “Advanced Custom Fields 【TUTORIAL en español】”

    1. Ok!, ahora ya te voy entendiendo mejor que por mail. Para mostrar la información según cada group field, simplemente si por ejemplo has ubicado como dice el paso 2 del tutorial, ese group field en una determinada página, entrada o custom post type concreto, entonces con los códigos que vienen al final del tutorial, si lo metes dentro del loop de esa página, entrada o custom post type, ya se iría mostrando. Pero con esos códigos tendrías que ir poniéndolos uno a uno para cada campo según el nombre que le hayas dado (en el tutorial el campo lo llamé “mi_campo_personalizado”). Si lo que quieres es mostrarlos todos de un tirón, puedes usar la función:

      get_fields()

      y su código que podrás ver aquí:

      https://www.advancedcustomfields.com/resources/get_fields/

      Si por el contrario quieres mostrar los campos en otra página distinta a la que has asignado el Group Field cuando lo creaste, entonces ya sí necesitarías conseguir el ID de esa página/entrada donde asignaste el Location del Group Field (PASO 2 del tutorial). El ID es el número que te sale arriba en el navegador, cuando editas esa página/post de WordPress, y únicamente tendrías que añadirle a los códigos anteriores ese ID como por ejemplo:

      echo get_field( "mi_campo_personalizado", 123 );

      El ID en este caso sería = 123

      1. Como estas javier!! Esta difícil!!, ya encontré el id.. pero no se donde meter los codigos, en cual archivo.php . No quiero meter mucha mano en codigo, falta que se complique todo el desarrrollo del sitio!! desde ya muchísimas gracias!!!

        1. Pues siento decirte que si no tienes conocimientos sobre lo que es el Loop de WordPress, y meter mano en su código, va a estar complicado que puedas usar el ACF para esos fines. La única opción que veo es que te instales un plugin para meter código mediante shortcodes, en el post o página que quieras que te muestre esos valores de esos campos, sin tener que editar ningún archivo.php. Uno de los mejores es este:

          https://es.wordpress.org/plugins/insert-php/

          Una vez que lo instales y actives, podrás crear con él un snippet con el código de ACF que te comenté anteriormente, y luego en la página que quieras mostrarlo únicamente tendrás que publicar el shortcode que te genere el plugin del estilo a:

          [wbcr_php_snippet id=”1210″]

  1. no explican nada en realidad, nada que no explique la pagina oficial, que sentido tiene hacer un tuto explicando lo que ya explica la pagina oficial que no se entiende para nada. gracias de todas formas, aun no logro mostrar los datos.

Deja un comentario

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

Ir arriba