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:
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:
- 1Añadir Campo
- 2Ubicación
- 3Ajustes
PASO 1
Añadir Campo
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.
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:
Hacemos clic en el botón de "+ Añadir Campo" para añadir el campo 2:
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
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:
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
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
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
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:
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
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
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
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
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
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:
Entonces si creamos una regla para dichas páginas, nuestro Grupo de Campos únicamente se mostraría en ellas.
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
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
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
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
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:
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
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
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
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
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
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 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 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
El paso tercero consistirá en configurar unas cuantas opciones de nuestro Field Group que estamos creando en nuestro plugin Advanced Custom Fields.
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:
Y después en ajustes, configuramos las opciones escondiendo en la pantalla prácticamente todo lo que no nos hace falta introducir:
El resultado sería que cuando fuéramos a editar nuestra página llamada "Página cliente", lo veríamos así en WordPress:
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:
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
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:
- Exportación a un archivo .json, para poder tener la opción de importarlo después con la herramienta de importación.
- 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
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.
