De la misma forma que en el editor de WordPress encontramos un campo de título, un editor de texto, una imagen destacada o un extracto, los campos personalizados (o Custom Fields) nos permiten añadir información adicional personalizada a cualquier parte de nuestras páginas o entradas.
INFO: Para entender mejor éste tutorial es recomendable tener algunos conocimientos básicos de PHP y dominar la estructura de archivos de WordPress.
¿Para que se utilizan los Campos Personalizados en WordPress?
El patrón clásico para enseñar a utilizar Campos Personalizados es el de crear una ficha de información para un curso, un libro o una receta, donde se añade, por ejemplo: título, descripción, fechas, autor, duración, color, etc.
Pero los Campos Personalizados nos permiten ir muchos más lejos: puedes incrustar fragmentos de código en el head, agregar clases CSS para páginas concretas, añadir imágenes adicionales fuera del contenedor principal, etc. Imaginación al poder.
Cómo crear los Campos Personalizados en 3 pasos
Para crear Campos Personalizados hay dos formas: con un plugin llamado Advanced Custom Fields o con WordPress nativo. No es que el plugin sea un atajo especialmente sencillo, pero sí es muy completo. En cualquier caso, ahora nos vamos a centrar en los Custom Fields nativos de WordPress, que son algo más sencillos.
01. Activa los Campos Personalizados en el editor de WordPress
En Gutenberg le das al botón más herramientas > Opciones y en Paneles Avanzados activas Campos Personalizados. Se va a recargar la página y los Campos Personalizados te van a aparecer a la parte inferior del editor.
02. Añade un Campo Personalizado
Creas un nombre para el campo (en minúsculas y sin tildes ni espacios) y le das un valor. Luego haces click en “Añadir campo personalizado” y finalmente le das a “Publicar” o “Actualizar” la página (o entrada).
Una vez creado el campo se te quedará guardado y lo podrás seleccionar des de otras páginas sin tener que escribirlo de nuevo.
03. Muestra el valor en el Front End
Tu campo personalizado ya está guardado en la base de datos, ahora vamos a ver como mostrar su valor en el front end. El código básico es el siguiente:
echo get_post_meta( get_the_ID(), 'campo_de_ejemplo', true ); Lo único que hace este código mostrar el valor del campo_de_ejemplo. Ahora tienes que decidir dónde ponerlo. Si utilizas Genesis Framework esto es sencillo utilizando hooks de PHP. Si utilizas cualquier otro theme tendrás que buscar el archivo donde quieras que se muestre: page.php, single.php, archive.php, etc, e incrustar el código dónde te interese.
Cómo actualizar valores
Si cambias el valor del campo personalizado y le das a “actualizar página” directamente, no te va a actualizar nada. Después de hacer el cambio le tienes que dar al botón “Actualizar” situado debajo del nombre del campo, esperar a que toda la caja se ponga de color amarillo y finalmente darle a actualizar página.
¿Se me van a borrar los Campos Personalizados si cambio de Theme?
No. Aunque dejarás de verlos quedarán guardados en la base de datos. Lo único es que tendrás que hacer es volver añadir el código que muestra el valor de los campos en el nuevo Theme para que vuelvan a aparecer.
