Crear y mostrar campos personalizados en Wordpress

En este post vamos a hablar de los campos personalizados en Wordpress o también llamados Custom Fields. Cuando usamos estos campos, estamos creando un Custom Post Type.

 

¿Qué son los campos personalizados o custom fields en Wordpress?

Los campos personalizados de Wordpress nos dan la opción de añadir información adicional a una entrada. Esto nos permite editar y mostrar el contenido de una entrada de forma personalizada y automatizada.

Por ejemplo, si vamos a crear entradas en las que vamos a mostrar inmuebles, sería interesante crear campos personalizados como:

  • Precio
  • Dirección
  • Metros
  • Teléfono
  • Email

Wordpress nos trae una opción nativa para crear campos personalizados, pero creo que está muy limitada y en este caso hay un plugin que funciona a la perfección y nos ofrece un mayor control y posibilidades sobre este tipo de campos.

 

Advanced Custom Fields

Yo utilizo siempre el plugin de Wordpress Advanced Custom Fields, que cuenta con mas de 1 millón de instalaciones activas y 5 estrellas en su valoración global.

Advanced custom fields

 

Crear grupo de campos personalizados

Para crear un grupo de campos personalizados vamos al menú lateral izquierdo de Wordpress

Campos Personalizados -> Grupos de Campos -> Añadir Nuevo

Antes de crear campos para este grupo, es importante decidir, a la hora de crear entradas en que tipo de entradas van a aparecer. Las reglas que nos ofrece este plugin son muchas, en mi caso, tengo una categoría llamada Inmueble, con la que categorizo todas las entradas en las que publico un inmueble, con lo que solo me interesa que me salga este grupo de campos personalizados cuando hago estas entradas.

reglas-afc

 

 

Ahora vamos a añadir campos, en esta pantalla encontramos los parámetros del campo que estamos añadiendo. Vamos algunas de las opciones más importantes:

Etiqueta del campo: es el nombre que aparecerá en el panel de edición de Wordpress

Nombre del campo: palabra sin espacios, guiones bajos y barras están permitidos. Se usa para las funciones de programación.

Tipo de campo: aquí encontramos un montón de tipos de campo personalizado, similares a los de un formulario de HTML5. Tenemos todo el listado en la página oficial del plugin, detallado y con imagenes https://www.advancedcustomfields.com/resources/

¿Requerido? : podemos hacer obligatorio completar un campo

Valor por defecto: aparece cuando se está creando un nuevo post

Atributos del Contenedor: aquí podemos asignar un ancho, una clase y una ID, al contenedor del elemento. Muy interesante para poder personalizar a través de CSS cada elemento.

 

 

Mostrar los campos personalizados

Para mostrar los campo personalizados necesitamos meternos en el código fuente de Wordpress e implementar las funciones que nos ofrece la API del plugin Advanced Custom Fields. El listado de funciones disponibles es muy amplio https://www.advancedcustomfields.com/resources/#functions/, pero con solo las funciones get_field() y the_field() podemos construir potentes plantillas de entradas.

 

Las funciones get_field() y the_field()

La función get_field() devuelve el valor de un campo específico y la función the_field() muestra el valor de un campo específico. A ambas funciones se les pasa el nombre del campo. Este sería un ejemplo de uso para mostrar un campo llamado precio

 

Dónde mostrar los campos personalizados

Si queremos mostrar estos campos cuando vemos la entrada, tendriamos que editar el fichero single.php. Ya sabemos que si editamos este fichero, cuando se actualice el theme destruirá los cambios realizados, por lo que es recomendable crear un Child Theme. En el caso que he explicado en este post, en el que solo quiero mostrar estos campos para las entradas de categoría inmueble, tengo que añadir también una condición en el fichero single.php

 

 

Deja un comentario

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