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.6 - Votos: ‎9 ]
  • diego

    https://uploads.disquscdn.com/images/6f767ab146dc5231969edeec99c7e773a5d468e40cbfd5472936fd177616933f.png Hola, como estás, gracias por responder mi mail!! Te cuento mi consulta. Yo tengo varios grupos de campos, el punto es saber cual código insertar para que muestre la información segun el grupo de campo que contenga la categoría

    • https://cregotech.com Javier Crego

      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

      • diego

        Perfecto.. lo voy a probar y te cuento!!!. muchisimas gracias Javier

      • diego

        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!!!

        • https://cregotech.com Javier Crego

          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″]

  • Atamo

    mm

  • Atamo

    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.

  • Atamo

    por que no muestrar un ejemplo de uno listo y listo