Los campos personalizados en WordPress

Publicada en WordPress.

Una de las funcionalidades de WordPress que cuando descubres y te acostumbras a utilizar te acaba resultando imprescindible son los campos personalizados o custom fields. En este artículo repasaremos qué son y cómo podemos sacarle el mejor partido en nuestra web.

¿Qué son los campos personalizados?

Como su nombre indica, son campos de entrada de contenido personalizados, que podemos añadir al editor de nuestras páginas o entradas para poder introducir información de forma diferenciada.

WordPress por defecto ya soporta los campos personalizados. Seguro que los has visto en tus páginas o entradas:

ACF-campos-personalizados


En muchas ocasiones, el tema o plantilla que utilizamos trae estos campos predefinidos para especificar variables de estilo o funcionalidad.

El problema es que la usabilidad de estos campos de WordPress es realmente mala y trabajar con ellos puede llegar a ser muy incómodo y difícil. Por eso en este artículo vamos a utilizar un plugin gratuito que nos va a facilitar mucho esta tarea: Advanced Custom Files.

ACF-AdvancedCustomFields

ACF nos permite crear y editar campos personalizados para nuestra web de una forma muy visual e intuitiva.

¿Por qué queremos utilizar campos personalizados?

Imagínate que quieres añadir en tu web un directorio de empresas, de libros, cursos, profesionales, un portfolio, una lista de colaboradores, etc. Lo que sea que se parezca a un listado de entradas que tengan un diseño homogéneo, con unos campos comunes en cada uno de ellos.

Está claro que podemos utilizar una página estándar e ir poniendo un elemento debajo de otro, intentando que queden todas iguales. Pero a medida que vayas añadiendo, la página será cada vez más y más extensa, poco práctica de visualizar. El usuario no podrá realizar búsquedas por campos concretos, no podrás ordenarlos automáticamente ni filtrarlos.

También podemos hacerlo con entradas, una para cada elemento, añadiéndolas todas a una categoría concreta y así pudiendo filtrarlas y mostrarlas en una página diferenciada del resto. Podrás utilizar el editor visual para maquetarlo, intentando que queden todas lo más iguales posibles, pero tampoco podrás filtrar por los campos internos que necesites ni realizar búsquedas avanzadas.

Si eres desarrollador y estás preparando una web para un cliente, todavía se acentuará más el problema. ¿Cómo explicarle cómo debe hacer para introducir un nuevo elemento y que quede igual que el resto?

Los campos personalizados resuelven este problema pudiendo crear la estructura de los posts o entradas que necesitas creando un campo para cada uno de esos datos que serán comunes en todos los elementos y que querremos recuperar para búsquedas o filtros.

Por ejemplo, en el caso de un directorio de cursos, necesitaremos campos para:

  • Título del curso
  • Descripción
  • Academia o formador del curso
  • Fechas
  • Tipo de curso (online / presencial)
  • Precio
  • Enlace para más información
  • etc.

¿Por qué no utilizar un theme que ya traiga esos campos personalizados?

Existen muchos temas o plantillas de WordPress específicos para un tipo de web que ya vienen con tipos de post predefinidos para, por ejemplo, portfolio, cartera de servicios, testimonios, etc. Aunque visualmente son muy atractivos y pueden parecer la mejor opción, no es lo más recomendado.

Los temas deberían limitarse a añadir diseño a nuestro WordPress, estilos como tipografía, colores, maquetación de posts, de layouts de páginas, sidebars, etc. y deben dejar las funcionalidades para plugins, de forma que sea independiente una cosa de la otra, porque en el caso contrario nos vamos a ver atados a ese tema, y si en algún momento lo decidimos cambiar, perderemos toda la información que hayamos añadido en esos tipos de post y campos del tema.

¿Cómo crear campos personalizados?

Una vez instalado el plugin Advanced Custom Fields, tendremos en el menú la opción para crear los campos personalizados fácilmente.

Lo primero será crear un grupo de campos personalizados. Podemos tener los grupos que queramos y especificar en que tipo de posts los querremos utilizar. De esta forma podemos utilizar diferentes tipos de campos personalizados separados y agrupados para diferentes categorías o etiquetas.

ACF-FieldGroups

Podremos indicar que ese grupo de campos se aplique a un tipo de post, a una categoría, a páginas, a una categoría de página en concreto, asociarlo a una etiqueta, etc.

Las otras opciones que tenemos para el grupo de campos es:

  • Orden: si tenemos varios grupos podemos escoger en que orden han de aparecer.
  • Posición: Si queremos que aparezcan después del título, después del editor visual o en la barra lateral.
  • Estilo: Si se mostrará los campos de este grupo agrupados en una metabox (la típica caja del editor de WordPress que muestra campos dentro de ella y se puede minimizar o desplegar) o no.
  • Ocultar: Qué campos de los que vienen por defecto con WordPress queremos que no se muestren en ese tipo de post o entradas.

Una vez establecidas las características genéricas del grupo, podemos empezar a añadir cada uno de los campos que contendrá

ACF nos solicitará los datos para cada uno de ellos: etiqueta, título, el tipo de campo, si es obligatorio o no, las instrucciones para rellenarlo, etc. En función del tipo de campo que escojamos nos solicitará una información u otra.

ACF-campos

Además de los tipos más comunes, como texto, numérico, checkbox, email o password, también podemos escoger algunos más avanzados, para adjuntar archivos o imágenes, editor visual (wysiwyg), selector de fecha o de color. Otros tipos de campo especiales serían los de estructura, para agrupar campos en pestañas o incluso de relación, para vincular el campo con otro post, una taxonomía, un link de página o un usuario.

Otra de las opciones que nos permite es mostrar el campo condicionalmente, es decir, que se muestre o no en función del valor de otro campo.

ACF-condicional

Por ejemplo, en el caso del directorio de cursos que estábamos viendo, ¿qué tipo campos podríamos crear?

  • Título del curso -> podríamos utilizar directamente el título del post o crear uno personalizado de texto.
  • Descripción -> campo wysiwyg para poder darle algo de formato a la descripción.
  • Academia o formador del curso: podríamos crear un checkbox para diferenciar si es una academia o un formador y otro campo de texto para el nombre.
  • Fechas: 2 campos de selector de fecha, uno para la inicial y otro para la fecha de finalización
  • Tipo de curso (online / presencial): en este caso podríamos crear un select con opciones múltiples, por si el curso se imparte tanto presencial como online
  • Precio: campo numérico
  • Enlace para más información: campo de url

Podríamos ademas añadir un campo condicional para en el caso de que el curso fuera presencial nos mostrara un campo adicional para la dirección del centro donde se imparte, un campo de imagen para añadir el logo del centro, o un banner del curso, etc.

Determinando por separado cada uno de estos campos nos permitirá en la web, con algo de programación a medida, crear filtros para que el usuario pueda buscar el tipo de curso que más le interesa.

Como podéis ver, las posibilidades para crear un gestor avanzado de contenidos son enormes gracias a todas las opciones que tenemos al crear los campos personalizados.

¿Cómo mostrar los campos personalizados en nuestra web?

Una vez creados los campos, lo interesante es poder insertarlos en nuestra página de forma que podamos darles un estilo determinado y que siempre se muestren de la misma manera.

La forma más fácil, pero también menos práctica, es hacerlo mediante shortcodes dentro del editor visual de la entrada. Introduciendo el código [acf field=»nombre_campo»] se mostrará en nuestra web el valor de ese campo en concreto.

ACF-shortcode

Pero si lo que buscamos con estos campos es poder maquetar y dar un estilo concreto para mostrarlos, la opción de los shortcodes no nos servirá.

La segunda forma, es modificar el tema correspondiente introduciendo los campos y el html que queramos para poder personalizarlo. Para ello, deberemos editar el archivo de página (usualmente page.php, pero dependerá de tu tema) o de entradas (single.php o content.php, también en función del tema) y añadir donde queramos que se muestre el valor del campo el código correspondiente:

<?php echo the_field("nombre_del_campo"); ?>

Es difícil generalizar, ya que cada theme o plantilla puede tener archivos propios y especiales, así que deberemos buscar aquel archivo donde se muestre el contenido del post o consultar con sus desarrolladores para que nos indiquen cómo hacerlo.

Otra opción, muy recomendada, es combinar los campos personalizados con Custom Post Types, tipos de post personalizados donde podremos agrupar todos esos campos que hemos creado.

Conclusión

Ya sea porque eres desarrollador y quieres facilitar la entrada de datos a tus clientes o porque estás desarrollando tu propia web y quieres ir un paso más allá en cuanto a la organización de los datos y su forma de mostrarlos, los campos personalizados te pueden ser muy útiles, y el plugin Advanced Custom Files te puede facilitar mucho el trabajo para llevar tu WordPress un paso más allá, personalizando cualquier plantilla que utilices, sin necesidad de que incorpore los tipos de entradas o campos que necesitas.

FlojaNo está malBienMuy bien¡Impecable! (11 votos, promedio: 3,55 de 5)
Cargando…

26 comentarios en «Los campos personalizados en WordPress»

  1. Hola! Me he leído todo, y no se si me servirá para lo que quiero hacer.
    Te explico, la pagina que estoy haciendo tiene un blog, y a parte quieren una pagina con una selección de elementos con su lista ( titulo, autor, fecha…), y todo eso lo quieren con etiquetas para luego filtrar.
    Mi duda es: No se si el plugin del que hablas funciona en el portfolio o en una pagina normal para poder hacer las etiquetas o categorías necesarias, funcionaria?.
    A ver si me puedes resolver la duda.
    Gracias.

    1. Hola Patricia. Entiendo que lo que quieres hacer es un listado dentro de una página cuyos elementos de la lista sean similares a entradas (tienen título, autor, fecha, etc.). Y estos elementos han de poder ser etiquetados para filtrar. Lo que necesitas entonces es crear ese elemento como un custom post type. Luego puedes decidir si utilizar una custom taxonomy para las etiquetas de esos elementos, o bien utilizar las etiquetas por defecto de WordPress. Para crear tanto el custom post type como la custom taxonomy, te recomiendo el plugin Custom Post Type UI o bien puedes visitar GenerateWP. Explora esto a ver si te sirve. ¡Un saludo!

  2. Felicidades por el articulo, está muy bién!
    Pero tengo una duda. Puedes colocar un campo de link externo, tipo consultar un catálogo? Soy incapaz de encontrarlo.

    Muchas gracias, Guillem

  3. Muchas gracias. Si, con el código siguiente lo he conseguido!

    <a href="» target=»_blank»>Click here

  4. Hola Antonio,

    Te hago una consulta y ojalá me puedas ayudar.

    Estoy usando advanced custom fields para agregar en ciertos posts las opciones de Localidad y de Ciudad. Lo que necesito es que el formulario de búsqueda incluya estas opciones como parte del mismo. Es decir, que incluya 3 campos que permitan buscar por: término de búsqueda + ciudad + localidad.

    Los campos que uso son:

    [acf field=»localidad»]

    [acf field=»ciudad»]

    Tenés idea de cómo lograrlo? Desde ya, muchas gracias!

    Maru

    1. Hola Maru,

      He estado investigando sobre el tema y tienes varias posibilidades. Quizás lo primero sería probar un plugin como este y ver si te puede servir. En caso de que no quieras usar un plugin, quizás la explicación que puedes encontrar aquí te solucione el problema, pero ojo, necesitarás tener experiencia en desarrollo. Otro recurso también para desarrolladores es este.

      A ver si con un poco de suerte logras conseguir tu objetivo.

  5. Saludos

    Cree un Custom Post Type con el plugin Custom Post Type UI llamado «Clases» y crear varios Custom Fields con el plugin Advanced Custum Fields entre ellos ubicacion que es un campo de texto.

    Estoy utilizando el shortcodes [acf field=”ubicacion”] dentro del editor del Post Type Clases y no me muestra su contenido solo me muestra el titulo de la clase estoy usando el theme Twenty Sixteen. Que estoy haciendo mal? Gracias de antemano

    1. Hola Pisistrato. La verdad es que si lo has hecho bien debería funcionar. Posiblemente no hayas definido bien el custom field o algo. Es muy difícil ayudarte sin conocer más tu configuración ni ver en primera persona cómo lo has hecho. Pero vaya, la parte teórica es la que tiene que ser. Prueba el shortcode con otros custom fields a ver si te funcionan y puedes descubrir qué está pasando.

      1. Gracias por responder
        Leyendo en la documentación dice que el el shortcodes [acf field=”custom”] solo funciona con campos tipo texto.

        Lo resolví incluyéndolos en el theme usando

  6. Hola,
    Hace dos dias las imagenes de mis entradas en WordPress no se ven. Al parecer por lo que leo aqui lo que no funciona es el campo personalizado Thumbnail, ya que las demas imagenes si se ven, solo no aparecen las de mis entradas… podrian ayudarme? Gracias

    1. El problema puede ser debido a que hayas desactivado algún plugin que definía el campo personalizado o hayas hecho algún cambio en tu tema. Piensa en las últimas acciones que has hecho para ver qué ha podido ser el causante del fallo. Un saludo.

  7. Será posible con este plugin crear un combo de paises y segun el pais elegido seleccionar los estados y posteriormente ciudades, o es necesario hacerlo en un php independiente e ingresar los datos a la tabla wp_usermeta?

    Saludos gracias, excelente blog

    1. Mírate la documentación del plugin, concretamente este campo. ACF permite ejecutar código PHP condicionado a los valores seleccionados. Te puede servir, dependiendo de lo que necesites.

  8. Muy interesante y útil el post, gracias por compartir.
    Tengo un wordpress el cual lo uso en un subdominio «admin.midominio.com» para que me sirva los datos usanto la API Rest http://v2.wp-api.org/ y con esto «re-llenar» el front-end en el domino principal.
    Ahora si agrego campos personalizados, puedo agregar estos campos a la API escribiendo:
    add_action( ‘rest_api_init’, ‘add_custom_fields’ );
    function add_custom_fields() {
    register_rest_field(
    ‘post’,
    ‘nombre_campo_personalizado’, //New Field Name in JSON RESPONSEs
    array(
    ‘get_callback’ => ‘get_custom_fields’, // custom function name
    ‘update_callback’ => null,
    ‘schema’ => null,
    )
    );
    }
    en el archivo function.php del theme.
    Pero no se como hacer esto, con los campos del plugin que nos enseñas. Es decir en la api los valores son «null».
    Me podrías ayudar?

  9. Hola, muy buen artículo, tengo una duda, a ver si puedes ayudarme.

    Quiero usar los campos personalizados en este tipo de páginas:

    http://murciamiga.com/FGRM/events/xii-campeonato-senior-de-la-region-de-murcia/

    Los campos personalizados son:

    Tipo de Torneo: Stableford
    Tipo de Competición: Individual
    Sexo: Todos
    Cuota de Inscripción: SOCIOS: 10 € NO SOCIOS: 15 €

    Ahora para mostrarlos uso shorcodes pero me gustaría ponerlos directamente en la entrada editando el archivo .php que sea, el problema es que no sé que archivo he detocar para que se vean.

    Esta sería la ruta para un articulo nuevo:

    http://murciamiga.com/FGRM/wp-admin/post-new.php?post_type=chronosly

    Uso un pluging de eventos que se llama chronosly

    Tu ayuda sería muy apreciada.

    Abrazos
    Juan

    1. Es difícil darte una respuesta certera sin poder ver cómo está hecho tu tema. Podrías hacer una plantilla específica para tu post type chronosly. O quizás modificar el single.php. O incluso mejor, duplicar la plantilla single para el post type. De todas formas, si no tienes experiencia con esto, te recomiendo que busques la ayuda de un experto de tu zona que pueda acceder al tema que estás usando y te pueda dar una mejor respuesta con más información específica de la configuración de tu WordPress.

      1. Gracias Antonio por tu rápida respuesta, ahora que lo dices tengo una plantilla específica para este tema / pluging de crhonosly, voy a intentarlo con ese php y te voy diciendo cosas, si no puedo, podrías tu echarle un vistazo?

        Saludos
        Juan

  10. Hola Antonio, como estás?? He seguido al pie de la letra el tutorial, pero yo necesito mostrar diversos campos, como me sugerís que debe ser el código?

    1. Hola Diego. Si quieres mostrar varios campos, depende de qué plugins utilices. Si usas ACF, llama a the_field una vez para cada campo.

Deja un comentario

No publicaremos tu correo electrónico. Los campos obligatorios están marcados con: •

He leído y acepto la Política de privacidad de Nelio Software

Al marcar la casilla de aceptación estás dando tu legítimo consentimiento para que tu información personal se almacene en SiteGround y sea usada por Nelio Software con el propósito único de publicar aquí este comentario. Contáctanos para corregir, limitar, eliminar o acceder a tu información.