Cómo crear campos personalizados en WordPress (sin código)

En esta publicación voy a enseñarte cómo crear campos personalizados en WordPress sin utilizar una sola linea de código*. ¿Cómo es posible? ¿Sin tener que programar?

Efectivamente, así es. Podrás incorporar información extra a tus entradas, páginas e incluso en los tipos de datos personalizados (Custom Post Types). Permanece atento porque te lo cuento con todo detalle a continuación.

¿Qué son los campos personalizados?

Los campos personalizados en WordPress te permite incluir información adicional a las entradas del sitio web. Son conocidos como metadatos.

Generalmente los podrás utilizar para guardar información importante de uso interno. Por ejemplo, en Mundo Funnel los empleamos para guardar el tiempo dedicado en la elaboración de una publicación. Y de hecho, podrás verlo en la página de inicio de nuestro sitio web.

Aunque también se pueden emplear para crear conjuntos de datos visibles para un usuario: Características de un libro (Páginas, autor, año, ISBN), de una receta (comensales, tiempo de elaboración, ingredientes, etc) o como verás en el ejemplo que proponemos más adelante.

Antes, incluso con el editor clásico, podíamos activar la visualización de los metadatos al final de nuestras publicaciones. También están disponibles en Gutenberg: haz clic en los 3 puntitos verticales – arriba a la derecha -, luego en opciones y por último, clic en el checkbox de campos personalizados.

Pero a nosotros nos aportaban poco si no sabías cómo utilizarlos ya que sin programar, solo podías verlos en el escritorio. Lo que ocurre es que estos metadatos que vienen por defecto en WordPress suelen ser utilizados por los desarrolladores en la creación de plugins o temas.

Y claro, es implica programar. Hasta que el 28 de marzo de 2011 donde todo cambió.

Advanced Custom Fields (ACF) al rescate

Advanced Custom Fields llegó hace casi 8 años al repositorio de WordPress para quedarse y mejorar por mucho tiempo. Más de 1 millón de instalaciones activas, más de un millar de valoraciones 5 estrellas, una extensa documentación (en inglés) y disponible en español.

ACF eleva a la enésima potencia la facilidad de uso de los metadatos tanto en la parte privada como en la parte pública de WordPress. Algunas de sus características más potentes:

• La posibilidad de incluir hasta 30 tipos de campos diferentes (checkboxes,email, password, desplegables, texto, área de texto, taxonomías, etc).
• Incorpora los campos en cualquier lugar de WordPress: entradas, páginas, tipos de contenido personalizado, taxonomías, usuarios, etc.
• El constructor de campos es muy visual y fácil de usar.

Un sinfín de posibilidades se abren con Advanced Custom Fields. Y en esta publicación vamos a introducirte a este plugin aprendiendo cómo crear campos personalizados en WordPress sin escribir una sola linea de código php.

Diferencias entre la ACF versión gratuita y PRO

Aunque con la versión gratuita si no eres desarrollador es más que suficiente, las ventajas de adquirir la versión ACF PRO no te dejarán indiferente:

• Campo Repeater, un campo para crear subcampos. Es decir, puedes crear un campo con subcampos Foto + Texto + Enlace. Luego replicarlo tantas veces necesites para ir modificando el contenido de cada uno de ellos.
• Bloques ACF, un completo Framework PHP para crear tus propios bloques dentro de Gutenberg con la potencia de los campos ACF.
• El Campo de contenido flexible es un completo gestor de diseño de contenido. Casi puedes contruir un editor de páginas arrastrando y soltando elementos.
• Posibilidad de crear campos dentro de páginas de opciones para temas y plugins.

El precio de la licencia individual de ACF PRO es de 25 AUD con actualizaciones de por vida. Mientras que la licencia Developer tiene un precio de 100 AUD te permite instalarlo en tantos sitios WordPress quieras así como redistribuirlo – ¡que no revenderlo! – en temas o plugins desarrollados por ti.

Si quieres saber más sobre la versión ACF PRO, échale un vistazo aquí.

Caso práctico

Vamos a trabajar sobre un ejemplo práctico para utilizar los campos personalizados con ACF. En este caso vamos a crear un conjuntos de datos relevantes para un blog cuyo tema son las rutas por la naturaleza. Por ejemplo, en Wikiloc hay un bloque de información que resumen información sobre el recorrido.

Para ello vamos a definir un nombre para el grupo de campo que será “Datos de ruta”. Y los campos que vamos a escoger son: longitud, circular, altitud máxima, altitud mínima y dificultad.

Paso a paso

Instalación de ACF

• En primer lugar, debes instalar el plugin ACF para WordPress en tu sitio web.
• Dirígete al escritorio > Plugins > Añadir Nuevo.
• En el buscador escribe “Advanced Custom Fields” – que se encuentra en la parte superior derecha – y espera a que te muestren los resultados. Sabrás cual es por su logotipo de color verde y porque ha sido creado por Elliot Condon.
• Haz clic en “Instalar” y finalmente en “Activar”.

Llegados a este punto ya tienes hecha una tercera parte del trabajo 🙂

Crear un grupo de campos en ACF

• En la barra lateral, debes dirigirte a Campos Personalizados > Añadir Nuevo.
• Dale un nombre al grupo de campos.

Crear los campos en ACF

Ahora vamos a crear los campos uno a uno. Todos deberán ser campos de texto, al que podemos añadir una descripción y no serán del tipo obligatorio.

Como puedes observar, la información proporcionada es muy intuitiva y fácil de entender. No obstante, te explico un poco más:

• Cuando rellenas la etiqueta del campo, el nombre del campo se rellena de forma automática; aunque eliminando los caracteres especiales y espacios en blanco. Pueden ser diferentes aunque recomiendo que sean lo más parecidos posibles para evitar confusiones.
• El tipo de campo para este ejercicio debe ser siempre del tipo Texto.
• Puedes añadir instrucciones para ayudar a la persona que editará el contenido del blog a saber con qué información tiene que rellenar cada campo.
• El campo no debe ser obligatorio. El motivo es que si no tenemos aún los datos clave de la ruta, no podríamos publicarla porque WordPress te obligaría a completar todos los campos que hemos creado.
• Deja el resto de opciones como están. Esto es un ejercicio básico.

Vuelve a repetir los mismos pasos para el resto de campos del ejercicio práctico. Para eso lo mejor es cerrar el campo que has creado y crear otro nuevo haciendo clic en el botón “Añadir Campo”.

Así quedarían todos los campos en un vistazo:

Ubicación del grupo de campos ACF

El siguiente paso después de crear el grupo de campos, es indicar dónde aparecen los campos personalizados. Es decir, en qué tipo de contenido de nuestro sitio WordPress se mostrarán tanto en el escritorio como en la parte pública.

Para eso, ACF te permite configurar una serie de reglas que además se pueden combinar entre ellas. Para nuestro ejemplo, vamos a hacer que aparezcan para todas las entradas. Por eso vamos elegir Post Type: Entradas. Lo que significa que aparecerá solo en las entradas del blog.

Ajustes del grupo de campos ACF

Por último definimos los ajustes del grupo de campos y deberás dejarlos de esta forma:

• Activo te permite mostrar u ocultar el grupo de campos.
• Estilo: si elijes estándar, puedes agrupar tus campos dentro de una caja. Si elijes directo, los mostrará de forma independiente como los campos meta clásicos de WordPress. La primera opción te dará una visión más clara del conjunto de datos.
• Posición: alta, te los mostrará sobre el título de la entrada en el editor. Normal, los mostrará después del editor. Lateral, los mostrará en la barra lateral del editor.
• Ubicación de la etiqueta: Donde se mostrará el nombre del campo. Puede ser sobre el campo de entrada o a su izquierda.
• Ubicación de la instrucción: Dónde se mostrará la ayuda (instrucciones del campo) con respecto a su etiqueta. Puede ser debajo de la etiqueta o debajo del campo de entrada.
• Número de orden: para pone la caja de campos más arriba o más abajo en relación a la Posición elegida anteriormente.
• Descripción: texto descriptivo del grupo de campos. Solo visible en la administración del grupo de campos ACF.
• Esconder en pantalla: Qué opciones esconderemos cuando se cargue este grupo de campos. Por si queremos evitar distracciones y otros usos que no vienen al ejemplo tratado.

Por último, solo nos queda guardar el grupo de campos ACF con el botón que encontrarás en la parte superior derecha que indica “Publicar”.

Listo, ya tenemos nuestro conjunto de datos creados.

Rellenar un conjunto de campos

Para eso nos digirimos a Entradas Añadir Nueva Entrada o Editar una entrada ya existente. Si seguiste las instrucciones de forma correcta, deberías poder verlas en la barra lateral. Aquí tienes el resultado.

Completa los campos con datos de ejemplo y dale a “Guardar Borrador”. A continuación haz clic en “Vista previa” y…. voilá, no se ve nada de lo que has hecho 🙂 No te preocupes, jeje. Es normal. Esa parte viene en el siguiente punto.

ACF Shortcodes: Visualizar los campos en el contenido

Llegados a este punto, debería comenzar la parte de programación en functions.php, platillas de páginas y tipos de datos personalizados. Pero aquí llega Advanced Custom Fields al rescate de nuevo.

De forma nativa, el plugin ACF dispone de un shortcode para incrustar los valores de los campos de texto dentro de nuestras publicaciones. El fragmento en cuestion es el siguiente:

Esto significa que, si donde aparece “nombre_del_campo” lo cambiamos por el nombre de los campos creados (Ojo! no el nombre de etiqueta), debería aparecer en la vista previa de nuestra entrada. Así quedaría en el editor Gutenberg insertados dentro de un bloque html:

Y el resultado final en la entrada quedaría así:

Un poco feo, ¿verdad? Pues ya que tenemos un bloque html, vamos a darle un poco de estilo al asunto. Lo ideal es trabajar el css en la hoja de estilos aparte; aunque para que puedas ver los cambios sobre la marcha, te pongo el siguiente fragmento que lleva el estilo “en linea”:

<div id="datosruta" style="display: inline-block; padding:1em; border:1px dashed orange;">
    <ul style="margin:0">
        <li><strong>Longitud:</strong> {acf field="longitud"} km.</li>
        <li><strong>¿Es circular?:</strong> {acf field="circular"}</li>
        <li><strong>Altitud máx:</strong> {acf field="altitud_max"} mts.</li>
        <li><strong>Altitud mín:</strong> {acf field="altitud_min"} mts.</li>
        <li><strong>Dificultad:</strong> {acf field="dificultad"}</li>
    </ul>
</div>

Nota: en el fragmento de código html y css de arriba he utilizado llaves en vez

Quedando el resultado final así:

Más bonito ahora ¿no te parece? 🙂

Ahora solo te quedaría guardar este bloque html Gutenberg de la siguiente forma:

Así podrías reutilizarlo cada vez que escribieses un post sobre una ruta para añadir detalles relevantes para tus lectores.

Limitaciones de integración sin código

• La principal limitación de este ejercicio es que solo funciona con campos estándar de texto y no con otros tipos de campos de los que dispone el plugin ACF. Por ejemplo, casillas de verificación, selectores desplegables, etc. No obstante existe un plugin en el Repositorio de WordPress que te permite trabajar con otro tipo de campos ACF que no sean solo texto. Puedes verlo aquí.

• Google no le dará tanto amor como te gustaría porque los datos no están estructurados y por tanto no se mostrarán como resultados de búsqueda enriquecidos. Es decir, aportan información resumida del contenido sobre el que escribes para el lector aunque no disponen del marcado específico de metadatos para buscadores. ¿Metadatos dentro de metadatos? ¡Esto parece Inception! Pues sí, pero no corresponde en esta publicación tratar el tema. En próximas publicaciones hablaremos de ello 🙂

Conclusiones

Advanced Custom Fields es un plugin para WordPress que ha cambiado radicalmente la forma de trabajar con metadatos. Haciéndolos accesibles tanto a programadores como a los que no lo son.

Si bien es cierto que un desarrollador le va a sacar mucho más partido para crear soluciones a medida para sus clientes, la idea era demostrarte que, sin tener apenas idea de programación – aunque nociones de HTML y CSS son recomendables – puedes conseguir enriquecer tus contenidos gracias a este excelente plugin. Y además, de forma gratuita.

Una última cosa: piensa primero muy bien cual es el objetivo de lo que quieres conseguir y si realmente necesitas instalarlo. Quizá puedas hacerlo sin instalar un plugin más en tu sitio web 😉

¿Te ha resultado útil esta entrada? Pues dale cariño a Mundo Funnel con un puñado de estrellitas?

(4 votos, promedio: 4,00 de 5)

O también puedes compartirlo con amigos y colegas de trabajo a través de tu red social favorita.