advanced custom fields

Advanced Custom Fields【TUTORIAL en español】

Publicado por |
Valora este tutorial

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. 

AÑADIR NUEVO FIELD GROUP

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 cuando editamos o publicamos algo en WordPress.

Cuando añadimos un nuevo 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 Field Group. En este tutorial voy a crear uno nuevo llamado: "OPCIONES DE MI POST".

Vamos a ir configurando el Field Group, mediante 3 pasos que te expongo a continuación:

Advanced Custom Fields Pasos
Advanced Custom Fields paso 3

PASO 1

AÑADIR CAMPO

Advanced Custom Fields Paso 1

Cada vez que añadimos un campo en el botón de "Añadir Campo", nos aparece una pantalla con diversas opciones para configurar el campo. Estas opciones irán cambiando dependiendo de la opción elegida en el desplegable que tenemos en Tipo de Campo, entre los cuales tenemos multitud de tipos:

Advanced Custom Fields Tipo Campo

Vamos a verlo por ejemplo para el primero que os aparece, el tipo de campo "Basic - Texto":

ACF add campo

Una vez configuramos el campo con los datos como por ejemplo he subrayado en amarillo, ya tenemos el campo configurado. El campo se añade al Field Group cuando publiquemos o actualicemos el Field Group. El botón de "+ Añadir Campo", lo que hace es abrirnos otro apartado debajo del primer campo, para configurar otro nuevo campo. Podemos añadir todos los campos que necesitemos para nuestro Field Group.

PASO 2

LOCATION

ACF paso 2

El segundo paso que vamos a realizar a la hora de añadir un nuevo Field Group, es configurar el apartado "Location" que nos servirá para indicar dónde queremos que nos aparezca el Field Group que estamos añadiendo.

Lo más común es ponerlo para que nos lo muestre si el Post Type es igual a Post. Pero podemos indicarle cualquier otra opción donde deseemos que aparezca, como por ejemplo si el Post Type es una Page, uno Custom, si es una categoría, taxonomía, o que incluso nos aparezca si el usuario ha iniciado sesión con un tipo de permisos determinados.

ACF reglas location

En el botón de "Add rule group" podremos ir añadiendo más reglas, consiguiendo así un listado de reglas conjuntas, 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 = post y otra con Post Type = page.

PASO 3

OPCIONES

Advanced Custom Fields paso 3

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

  • 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.
  • 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.
  • 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.
  • Hide on screen: 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,...


CÓMO USAR LOS CUSTOM FIELDS

Una vez que hayamos añadido y configurado nuestro Field Group, si por ejemplo lo hemos configurado para que salga si el Post Type es un Post, 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. Ahora vamos a ver, cómo utilizarlos.

Mostrar los datos con la API que trae ACF

La API del plugin 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); ?>

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