Crear una página de opciones con ACF en WordPress

Esta semana vamos a centrarnos en la creación de una solución que debería facilitarnos el trabajo como desarrolladores, pero también resultar de utilidad para las personas dentro de un proyecto que se dediquen a gestionar los contenidos y el mantenimiento de un sitio web.

Partamos de un supuesto en el cual estamos trabajando en un proyecto y nos encontramos con multitud de valores a completar que, siendo diferentes para cada cliente, responden a patrones prácticamente idénticos para todos los casos.

Me refiero en este caso a datos del cliente, que muy probablemente aparezcan, incluso de manera repetida a lo largo de todo el contenido y secciones de la web: nombre de la empresa, CIF, dirección, código postal, localidad, provincia, teléfono de contacto, email, perfiles en redes sociales.

Si alguno de estos datos cambia con el tiempo, deberemos recordar donde se encontraba ese dato y, en ocasiones, trabajar directamente con código para actualizar esa información. Este proceso en cada sitio web y de cada cliente con la correspondiente inversión de tiempo realizada en el transcurso de la actualización.

En este artículo descubriremos cómo podemos gestionar la información de manera centralizada y replicar esta personalización en cada uno de nuestros proyectos. Para ello necesitaremos:

• Crear una página de opciones para nuestro cliente
• Definir los datos que podría ser necesario modificar
• Imprimir los valores en el frontend con funciones
• Imprimir los valores en el editor de contenidos mediante shortcodes

Todo el proceso detallado a continuación puede ir incluido en el archivo de funciones functions.php de nuestro tema activo o encapsulado en forma de plugin personalizado.

Creando una página de opciones con Advanced Custom Fields

En el caso que nos ocupa vamos a crear una página de opciones dentro del menú de administración de WordPress mediante la versión premium del plugin ACF Advanced Custom Fields.

La función de ACF que necesitaremos para crear la página de opciones es la siguiente:

if( function_exists('acf_add_options_page') ) {
acf_add_options_page(array(
'page_title' => 'Opciones para Cliente',
'menu_title' => 'Opciones Cliente',
'menu_slug' => 'opciones-cliente',
'capability' => 'edit_posts',
'redirect' => false,
'position'    => '80',
'icon_url'    => 'dashicons-info',
));
}

Los parámetros que podemos utilizar están correctamente detallados en la documentación de ACF aunque explicaremos brevemente a continuación los que hemos usado para este ejemplo.

• page_title. El título de la página de opciones
• menu_title.El tíotulo que se mostrará en el menú del panel de administración
• menu_slug. Enlace de la página de opciones
• capability. Posibilidad de que el rol de editor pueda ver esta sección
• position. Posición dentro del menú del administrador
• icon_url. El icono que queremos utilizar en el menú

Grupos de campos para la página de opciones

Una vez que tenemos nuestra sección de opciones es hora de completarla con los campos que vayamos a querer definir. Es importante en este caso que tengamos en cuenta cuáles van a ser los valores que más vamos a reutilizar en nuestros proyectos y que son susceptibles de ser actualizados con más frecuencia.

Para este caso crearemos los campos de nombre de empresa, persona de contacto, teléfono y correo electrónico, aunque como os podéis imaginar, la casuística es muy diversa.

• Accedemos al menú de Campos Personalizados de ACF
• Creamos un grupo de campos nuevo por ejemplo con el nombre de Cliente
• Añadimos los campos de ACF que necesitaremos: empresa, nombre, email y teléfono

• Vinculamos este grupo de campos con la página de opciones previamente creada

De este modo podremos comprobar cómo nuestra página de opciones creada con antelación va cogiendo forma y añade los campos previamente indicadod.

Funciones para imprimir los campos en el sitio web

Mediante funciones nativas de Advanced Custom Fields vamos a poder imprimir esta información en el lugar de nuestro tema o plugin que queramos. Deberemos tener cuidado a la hora de hacer indicar que los valores vienen dados desde una página de opciones añadiendo option u options.

the_field('empresa', 'options'); 
the_field('nombre, 'options'); 
the_field('telefono, 'options'); 
the_field('email, 'options'); 

Si necesitamos ayuda con la implementación podemos acudir directamente a la documentación de ACF ( https://www.advancedcustomfields.com/resources/ ) que nos permitirá conocer todas las opciones disponibles.

Creando Shortcodes para insertar en el editor de contenido

Hasta aquí estamos utilizando herramientas que facilitan la creación de campos dentro de WordPress, pero es un proceso básicamente técnico. En el siguiente paso de este tutorial vamos a conseguir que estos campos puedan ser mostrados en cualquier emplazamiento que permita el uso de shortcodes.

Podemos utilizar shortcodes si lo que necesitamos es añadirlo directamente dentro del contenido de un post o en un espacio de widgets de nuestro proyecto.

En este caso, contamos también con la ayuda de ACF que permite incorporar sus propios shortcodes ( https://www.advancedcustomfields.com/resources/shortcode/ ).

En nuestro caso podremos utilizar los siguientes shortcodes allá donde lo creamos conveniente.

[acf field="nombre" post_id="options"]
[acf field="empresa" post_id="options"]
[acf field="email" post_id="options"]
[acf field="telefono" post_id="options"]

Shortcodes personalizados

Si además queremos darle un toque interesante de personalización y que semánticamente el shortcode sea mucho más entendible podemos crear nuestros propios shortcodes personalizados para cada uno de los valores.

function create_shortcode_empresa() {
return get_field(‘empresa’, ‘options’);
}
add_shortcode(‘empresa’, ‘shortcode_empresa’);

El shortcode resultante es mucho más sencillo de entender y de implementar. Tendrá un formato como el que sigue:

[empresa]

Conclusiones

En muchas ocasiones hemos buscado soluciones a nivel personal que nos ayudan a mejorar nuestro trabajo como desarrolladores, bien porque conseguimos agilizar los resultados o bien porque nos permiten incluir herramientas y software mejores.

Las optimizaciones no solo deben ir encaminadas a mejorar nuestro propio trabajo sino que también podemos hacer la vida más fácil a nuestros clientes a los compañeros de equipo encargados de la edición y creación de contenidos.

Así que, tan solo un consejo para terminar. Piensa qué tareas llevan más tiempo en un equipo de trabajo y crea procesos que hagan más fácil la vida de los demás.