Cómo crear páginas de opciones en WordPress con Advanced Custom Fields

Páginas de opciones con ACF
07 / febrero / 2019   Oscar Abad Folgueira

Las páginas de opciones son muy útiles tanto para su uso con los plugins y con los temas que desarrollamos pero también es una buena idea darles a nuestros clientes un backend en el que puedan cambiar ciertas cosas de manera fácil desde una de estas paginas de opciones.

En este tutorial vamos a ver cómo crear páginas de opciones para nuestros desarrollos en WordPress y poco a poco iremos ahondando en las diferente opciones de que disponemos para hacer estas páginas de opciones más y más completas hasta donde necesitemos.

¿Qué necesitamos?

Para poder hacer páginas de opciones en WordPress con Advanced Custom Fields necesitamos principalmente el plugin Advanced Custom Fields en su versión PRO.

Podemos usar la versión 5 de Advanced Custom Fields o en su caso, la versión 4 con el addon Options Page.

En este caso, para la realización de este tutorial yo voy a usar Advanced Custom Fields V5. En concreto la 5.7.10.

Sobra decirlo pero por si acaso, para este tutorial he montado una web de pruebas con WordPress 5.0.3 y ACF Pro. De momento nada más.

La página de opciones más sencilla

Como este tutorial va a ser un poco largo, he decidido hacerlo por fases. Estas fases procuraré que sean de más sencillo a más complejo. Por consiguiente, comencemos por la forma más sencilla de hacer una página de opciones con Advanced Custom Fields Pro.

El código que usaremos será el siguiente:

Este código lo podemos añadir al functions.php de nuestro tema pero lo ideal sería meterlo en un plugin que tengamos en cada una de nuestras instalaciones WordPress. Pero como digo, para estas pruebas lo podemos hacer tranquilamente en el functions.php.

El resultado de incluir este código será que nos creará un opción de menú en el menú lateral de nuestro panel de administración de WordPress:

Por ahora no hemos conseguido gran cosa pero esto es sólo el comienzo.

Si accedemos a esta opción de menú y no hemos asignado ningún grupo de opciones a esta página de opciones, nos mostrará lo siguiente:

Como acabamos de comentar, este mensaje aparece porque no hemos asignado ningún grupo de campos personalizados a esta página de opciones. Lo haremos a continuación para ver el resultado.

Crear un grupo de campos personalizados con ACF

Para poder crear campos y grupos de campos con Advanced Custom Fields, debemos tener instalado dicho plugin. Aunque para esta parte nos sirve la versión gratuita del repositorio de WordPress, como ya sabéis, para hacer las páginas de opciones necesitamos la versión Pro.

Para crear un grupo de campos y algún que otro campo en ACF lo haremos desde «Campos personalizados» –> «Añadir nuevo» del menú lateral del panel de administración de WordPress.

Ahora creamos el grupo de campos y los campos que queramos.

Yo, para este caso voy a crear un sólo grupo de campos y dos campos sencillos puesto que este tutorial no está orientado a saber cómo crear campos y grupos de campos, así vamos más rápidos. De todas formas, si queréis que hagamos un tutorial sobre esto, nos lo hacéis saber.

Como podéis ver en el captura siguiente, he creado un grupo de campos «Datos de contacto» y en el he creado 3 campos sencillos:

  • Dirección
  • Teléfono
  • Email

Y lo más importante para este tutorial. En el apartado «Ubicación» establecemos la regla siguiente:

Mostrar este campo de grupos si «Página de opciones» «es igual a» «Options».

Recordemos que «Options» es el nombre de la página de opciones que hemos creado y recordemos también que con el código que hemos introducido no hemos establecido ningún nombre específico a nuestra página de opciones por lo que Advanced Custom Fields establece el nombre por defecto.

Ahora comprobamos si esto que acabamos de hacer ha funcionado correctamente y volvemos a nuestro menú «Options» para ver lo siguiente:

Fácil ¿verdad?

Esto ha sido más fácil de lo que seguramente esperabais, ¿A que si?

Ahora os estaréis preguntando sobre cómo establecer el nombre de la página a nuestro gusto, cómo añadir más campos, cómo crear sub-páginas de opciones, cómo crear varias páginas de opciones y muchas cosas más.

No os preocupéis porque a lo largo de este tutorial veremos estas opciones y, en cualquier caso, si tenéis alguna duda de algo de esto, no dudéis en poneros en contacto con nosotros e intentaremos ayudaros en todo lo que podamos.

Bueno, ahora vamos a continuar y como he comentado al comienzo vamos a ir poco a poco por lo que a continuación vamos a cambiar el nombre de la página de opciones a uno que nos guste.

Establecer el título de la página de opciones

Como ya suponía, no hace mucha gracia una página de opciones con el nombre de «Options».

Seguramente necesitemos ponerle un nombre o título que nos permita identificarlo o lo que es más importante, que permita identificarlo correctamente a nuestros clientes o personas que se encargarán de la gestión de esta página web que estamos desarrollando.

Para hacer esto, vamos a revisar un poco las opciones de que dispone la función acf_add_options_page().

En la documentación de esta función se explica muy bien los posibles parámetros que acepta pero vamos a hacerlo por pasos si os parece bien.

Uno de los argumentos que acepta la función acf_add_options_page() es el título de la página y si sólo queremos hacer eso, establecer el título a uno en concreto, no necesitamos pasarle un array con argumentos.

Además, si solo especificamos un parámetro en la llamada a la función acf_add_options_page() por defecto establecerá el título, el nombre y el slug de esta página de opciones.

Para no liarnos más, pongamos que queremos cambiar o establecer el título y nombre de la página de opciones a «Opciones Generales«. Por poner un ejemplo. Para ello basta con pasarle este texto entre comillas como parámetro a la función de la siguiente forma:

Eso si, si lo que habéis hecho es cambiar el código que hemos escrito antes, como yo, acordaos de modificar la regla de ubicación en el grupo de campos de Advanced Custom Fields porque si no, nos dará error al acceder a esta página de opciones o no nos mostrará nada puesto que no tiene ningún grupo de campos asignada.

De esta forma, ahora tendríamos algo como lo siguiente:

Bien, hasta ahora creo que os estará gustando porque es muy sencillo crear una página de opciones con Advanced Custom Fields, ¿verdad? Al contrario de lo que podrías estar pensando y al contrario de crear una página de opciones sin ayuda de plugins.

Por cierto, si os interesa saber cómo crear una página de opciones sin utilizar ACF, nos lo comentáis y lo organizamos para crear un buen post sobre esto.

Ahora vamos a ver qué argumentos le podemos pasar a la función acf_add_options_page() antes de ver otras cosas interesantes.

Parámetros y argumentos de acf_add_options_page()

Seguro que a estas alturas ya estáis emocionadísimos/as de lo que estamos haciendo y con ganas de saber más.

La función admite un parámetro que puede ser el título de la página de opciones como hemos visto anteriormente.

Pues bien, puede ser ese parámetro pero también podemos pasarle un array con varios argumentos donde le podemos indicar más opciones.

Lo que está claro es que si no necesitamos más, con pasarle el título de la página de opciones, lo hacemos como lo hemos hecho y listo pero en alguna ocasión vamos a querer configurarlo un poco más a nuestro gusto y necesidades.

Como digo, los posibles argumentos son:

Si nos fijamos un poco en las opciones de que disponemos, seguro que podemos ver que nos convendría utilizar más de una en más de una ocasión y no hacerlo como lo hemos hecho al principio.

A continuación vamos a utilizar varias de esas opciones para configurar la página de opciones a nuestro gusto.

Crear página de opciones detallada

Como ya hemos comentado anteriormente, podemos pasarle un array con una serie de opciones para establece la configuración de nuestra nueva página de opciones.

Por supuesto no hace falta utilizar todas y cada una de ellas, dependerá de cada caso y seguramente, a base de ir haciendo varias, nos acostumbraremos a usar siempre o casi siempre las mismas.

A continuación podemos ver cómo se crear una página de opciones pero con alguna opción más:

Si nos fijamos en el código anterior podemos ver que estamos especificando diferentes títulos para la página de opciones y la opción del menú lateral, como podemos ver en la imagen siguiente:

Y es más, si nos fijamos en la url del navegador cuando estamos en la página de opciones, veremos que tiene el slug que le hemos indicado:

Muy interesante, ¿verdad?

Para no quedarnos aquí con ganas de más, vamos a ver ahora cómo crear páginas de opciones que contengan sub-páginas. Seguro que os interesa también.

Crear sub-páginas de opciones

Como decíamos hace un momento, seguro que nos puede interesar crear varias páginas de opciones, esto lo podemos hacer sin problemas pero lo ideal puede ser crear una opción en el menú y que se desplieguen varios menús o varias páginas de opciones.

Personalmente creo que si aplicamos esta metodología en nuestros desarrollos, estoy seguro de que el cliente lo agradecerá mucho y estará contento. De eso se trata ¿no? De hacer las cosas bien.

Pues bien, un casi típico que podemos ver o necesitar a la hora de crear sub-páginas de opciones puede ser crear varias por ubicación. Es decir, una para los ajustes del header, otra para los ajustes de la página de inicio y otra para los ajustes del footer.

Esto es solo un ejemplo y depende mucho del tipo de proyecto al que nos estemos enfrentando. No es lo mismo una web corporativa sencillita que por ejemplo, una web para un colegio. Estaremos de acuerdo en que seguramente una web para un colegio tendrá varios CPTs, campos personalizados, etc…

Es por eso que digo que esto depende mucho del tipo de proyecto al que nos vayamos a enfrentar y pensar siempre en el cliente y en el día de mañana porque seguramente quiera hacer cambios.

Entonces, para el caso de crear una sub-página de opciones, utilizaremos la función acf_add_options_subpage() cuyo funcionamiento es similar a la función que hemos utilizado hasta ahora para crear las páginas de opciones, es decir, le podemos pasar un solo parámetro de tipo ‘string’ que hará las veces de ‘page_title‘, ‘menu_title‘ y ‘slug‘. Vamos, como lo que hemos hecho antes.

En el caso de la función acf_add_options_subpage()   utilizaremos una opción o argumento para indicar qué página es la página «Padre«. Es decir, tenemos que indicar de qué opción del menú hereda esta sub-página que estamos creando.

Pongamos el ejemplo que hemos comentado antes en el cual tenemos una opción de menú «Opciones Generales» y debajo de esta tendremos las siguientes sub-páginas:

  • Cabecera.
  • Página de inicio.
  • Pié de página.

Pues bien, en este caso debemos de indicar en la creación de cada una de estas sub-páginas de opciones que la página de opciones «Padre» es «Opciones Generales» y lo haremos usando la opción «parent_slug» que indicará el slug de la página padre.

Pero bueno, seguro que lo vemos mejor con la práctica.

A Continuación tenemos el código para crear esta estructura de páginas de opciones:

  • Opciones Generales
    • Cabecera
    • Página de inicio
    • Pié de página

A continuación el código:

Este código es un poco más largo pero no es nada complicado entenderlo. Vamos a intentar explicarlo paso a paso.

En primer lugar podemos ver que se crea una página de opciones con la función acf_add_options_page() pero solo le indicamos el título del menú, slug y algo muy importante en este caso que no habíamos explicado hasta ahora. Se trata de la opción «redirect«.

Con la opción redirect lo que hacemos es indicarle que esta página de opciones no se abrirá. Vamos, como si no existiese la página. Lo que hará si está a ‘true‘ es redireccionarlo a la primera sub-página hija que encuentre. En este caso será la sub-página «Ajustes de Cabecera«.

Claro que podemos establecer el valor de «redirect» a ‘false’ pero personalmente creo que si tenemos sub-páginas, es más claro para los usuarios y clientes que esta no tenga página como tal y nos mande a la primera sub-página de opciones que encuentre.

Otra cosa que podemos ver es que en cada sub-página de opciones hemos indicado quién es su página «padre«. En los tres casos es «ohyd_opciones_generales«.

Todo esto que hemos hecho hace un momento lo podemos ver en la siguiente imagen:

A partir de aquí, solo depende de lo que necesitemos hacer y cómo queremos mostrárselo a nuestros clientes.

El Video

Opciones traducibles

En este tutorial, si os fijáis, no he puesto en ninguna de las opciones que hemos creado la función de traducción para que estas opciones sean traducibles.

Cuando digo que las opciones sean traducibles me refiero a su contenido, de esta manera podemos dejar listas para traducción, todas las opciones que hemos creado.

Ya… Es posible que nuestro proyecto solo sera para un idioma pero yo os aseguro que no cuesta mucho incluir la función de traducción en cada una de las opciones.

Creo que deberíamos hacer esto siempre. Tal vez el día de mañana nos haga falta y para lo poco que cuesta, merece la pena.

A continuación podemos ver un par de opciones que incluyen la función de traducción:

No quiero ahondar en esto ahora mismo por lo que simplemente comentaré que la función de traducción tendría este aspecto:

__(‘texto de la opción’, ‘textdomain’)

Los guiones delante del símbolo de abrir paréntesis (si, son dos) son guiones de subrayado.

En cuanto al ‘textdomain’ sirve para identificar o agrupar las cadenas para traducirlas más adelante. Bien mediante PO – MO o bien a través de algún plugin.

Como ya digo, no quiero liarme con esto porque sino, no acabaríamos y este no es el tema que nos ha traído aquí.

De todas formas, si queréis que hagamos algún tutorial sobre esto o cualquier otra cosa que tenga que ver con el desarrollo WordPress. Ya sabéis, dejadnos un comentario o decídnoslo de cualquier otra manera.

¿Y luego qué?

Con este título me refiero a que seguramente estéis pensando en que todo esto está muy bien pero ahora faltaría lo más importante, que no es más que las opciones y los grupos de opciones.

Seguramente crearemos varios grupos de opciones y los asignaremos a las páginas de opciones que hemos creado para que en cada página aparezcan cada una en el sitio o página correspondiente. Pero esto es bien sencillo y seguro que lo hacéis bien a la primera o a la segunda.

Otra cosa que falta es el cómo recoger estos datos desde nuestro código para mostrarlo pero esto lo dejaremos para otro tutorial. De todas formas no tiene nada raro. Se comportan igual que el resto de opciones de ACF.

Si queréis que hagamos más tutoriales como este. Sobre ACF o sobre cualquier otra cosa relacionada con el desarrollo WordPress, no tenéis mas que decírnoslo. Dejarnos un comentario en esta entrada para que sepamos a qué nos enfrentamos. Lo valoraremos y seguramente algo haremos.

Hay un plugin

Pues si, existe un plugin o extensión para Advanced Custom Fields que nos permite hacer esto de manera más sencilla.

El plugin en cuestión es: Advanced Custom Fields: CTP Options Page

Tengo que decir que aún no he probado este plugin pero por su descripción parece que puede ser interesante usarlo porque permite hacer justo lo que hemos explicado en este tutorial.

Si os parece, me lo apunto para hacer un tutorial sobre cómo hacer páginas de opciones con este plugin, ok?

De todas formas, si alguno/a de vosotros/as lo habéis probado ya, os agradecería que compartierais vuestra experiencia con él.

Conclusión

Crear páginas de opciones para nuestros clientes es muy buena idea.

Tenemos que tener en cuenta siempre a nuestro cliente, darle todas las facilidades posibles para que el día de mañana no tenga problemas y no nos llame cada dos por tres para cambiar alguna cosa que podrían hacer ellos de manera sencilla si se lo dejamos todo a pedir de boca.

Además, no me digáis que no tiene mejor aspecto el desarrollo de una web con una página de opciones. Es algo que nos puede diferenciar de la competencia, ¿verdad?

Y para terminar… también puede servirnos para nosotros mismos. Si vamos a llevar el mantenimiento o cambios de esa web, será mucho más sencillo si lo hemos dejado todo bien organizado y listo para la realización de los cambios de manera fácil y rápida.

Y por último… No me olvido de aquellos/as a los/as que les gusta hacer esto sin plugins. No os preocupéis porque lo tengo en mente. He hecho este tutorial porque me parece una buena forma de hacer para la mayoría de los/as desarrolladores/as pero ya lo haremos «a mano» y sin Advanced Custom Fields».

Ya está. Espero que os guste este tutorial y lo pongáis en práctica en la medida y necesidades de cada uno/a.

Cualquier duda, apreciación, sugerencia, etc… dejadnos un comentario para que lo sepamos.

Hasta el próximo!

5 comentarios sobre “Cómo crear páginas de opciones en WordPress con Advanced Custom Fields”

  • Muy buen artículo para personalizar la configuración de datos muy comunes que hay en toda web.

    Si publicáis una aproximación sin plugin, sería genial, permite ver la diferencia entre los dos métodos, y así poder decidir cuándo es mejor uno u otro, pros y contras de elegir uno u otro.

    Un gustazo veros publicar este tipo de contenidos.

    Saludos

    • Muy buenas, Gabri.

      Agradecemos tus palabras y tal…

      En cuanto a lo de hacerlo sin plugins, nos lo apuntamos para hacer pero ya te digo desde ya que la diferencia es que no utilizas ningún plugin con el beneficio que eso supone pero claro, el desarrollo es un poco más lento e incluso un poco más complejo.

      Pero como digo, nos lo apuntamos en la lista de «peticiones» para hacerlo un día con calma.

      Muchas gracias y nos vemos!

    • Muy buenas, Madrillano!

      El post está enfocado en la creación de páginas de opciones en WordPress con ACF y claro, lo que tu comentas daría para otro u otros posts bien largos.

      Me lo apunto para hacer algo detallado, pero dame tiempo porque ACF es un mundo…

      De todas formas, el acceso a estas opciones de las páginas de opciones de ACF es similar al resto de opciones que se pueden crear con ACF, todo radica en el tipo de campo, por lo demás, es similar.

      Te dejo enlace a la documentación de ACF para que le des una vuelta, ok?

      https://www.advancedcustomfields.com/resources/

      Mírate la función get_field() que es la que más te puede interesar, posiblemente.

      Venga, mucho ánimo!!

Deja una respuesta

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

Puedes usar estas etiquetas y atributos HTML:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>