Hacer un panel de opciones para un tema con ACF

En este tutorial vamos a crear algo muy útil cuando estamos desarrollando un tema y es un panel de opciones para nuestro theme en WordPress con ACF.

La ventaja de hacer esto es que nuestro cliente podrá cambiar directamente los datos sin tener que llamarnos y estos cambios los reflejaremos directamente en la plantilla

Lo que vamos a hacer es añadir unas opciones en el panel de administración del wp-admin, para despues añadir una serie de parámetros. Como vemos ACF no se limita únicamente a campos personalizados en páginas, taxonomía o perfil de usuario, sino que también podemos generar nuestro propio panel de opciones para el tema.

Todo esto lo vamoa a hacer en 3 pasos

Código en Functions.php

Lo primero es irnos a nuestro cine ir a nuestro functions.php. El código lo pongo en el functions.php y no en un plugin aparte o en mu-plugins porque esto va a ser una opción del tema y esta opción únicamente estará disponible en este tema. En el resto de casos cuando loq que van a hacer es dar funcionalidad a la página web lo interesante es hacerlo a través de un plugin externo como os he explicado en otros vídeos.

El código que vamos a poner es muy sencillo y básicamente es este

 

Lo primero que hacemos es comprobamos que la función de ACF de añadir páginas de opciones está disponible, después añadimos una página de opciones, vamos a tener una página principal y una sub página

que está anidada está ahora lo veréis muy sencillito en nuestro caso esto va a ser una opción para el future cambiamos esto en la página en la opción de su página si os fijáis esto es su página y esto es página para verlo mira vamos a comentar esto y nos vamos a ir a la página web aquí en la página web vemos que nos ha añadido un thin settings cuando pulsamos pues bueno dentro no tiene ningún campo todavía porque lo tenemos que crear con hace efe si lo que hacemos es activamos el sub la página de la sub página de opciones de esta forma aquí nos crea una página aquí una sub página la principal y la su página de put si queremos cambiar este icono porque no nos gusta esto se hace de una forma muy sencilla a través d añadiéndole un básico para contraer los básicos pues básicamente vamos buscamos das y con wordpress y ya está tenemos que copiar esto que es el título podemos elegir el que sea pues el mundo mira vamos a coger este vale pues así con esto nos vamos a nuestro código y aquí es donde añadimos este parámetro como lo añadimos de la siguiente forma lo que tenemos que hacer es añadir esta línea y con url y el nombre del icono que habíamos puesto guardamos y nos vamos a ver si se ha aplicado actualizamos y efectivamente ya nos ha puesto la bola del uno bueno pues ya tenemos esto ahora nos vamos a la parte de añadir hace efe lo que hacemos es añadir un nuevo grupo que le vamos a llamar hacer options y la magia bn aquí normalmente elegimos pues el gusto un post del se ha contratado tal y ahora lo que tenemos que hacer es venimos a la parte de abajo y marcar página de opciones con esto ya tenemos aquí las dos páginas que hemos creado la página y la sub página marcamos la su página podemos publicar para que no se nos borre siempre suelo guardar bastantes veces y ahora añadimos el campo pues el campo que vamos a poner vamos a poner dirección de la empresa por ejemplo y vamos a añadir otro que sea una imagen imagen de la empresa hasta que nos cambie y seguiremos aquí un campo de tipo de imagen y para no complicarnos que nos devuelva directamente la url muy bien actualizamos y nos venimos a la página de las opciones del router y ya lo tenemos aquí ahora simplemente pues rellenamos los datos y van barreda y seleccionamos una imagen está por ejemplo actualizamos y muy bien ya tenemos esos datos guardados en la base de datos pero ahora esto evidentemente no se refleja en la página principal para que se refleje en la página principal lo que tenemos es que tocar pues poner el código que es muy muy muy sencillo como es el código pues vamos a nuestro editor en mi caso visual estudio y nos vamos al footer que es donde queremos ponerle el texto aquí bueno en este caso no vamos a utilizar los q vamos a hacerlo bastante sencillo entonces para ello vamos a aquí lo que vamos a hacer es abrir el php varias cosas y añadimos la función d de hace efe cuales pues nada es muy sencilla para mostrarlo directamente si no queremos complicarnos es decir que aquí le ponemos el nombre de la variable y options perdón option sin singular lo cerramos vale entonces que tenemos que poner aquí en el hueco hemos dejado es el nombre de que le hemos dado enlace efe vale cuales os vamos a verlo nos venimos aquí y este dirección de la empresa y el otro es imagen de la empresa la venimos aquí dirección de la empresa y vamos a poner también la es la imagen de la empresa y vamos a ver la página estamos en la página actualizamos y nos lo ha puesto aquí le hemos dicho exactamente dónde o sea que nos lo ha puesto ahora pues bueno ya sabemos si lo queremos hacer más bonito pues podríamos hacer algo como por ejemplo no sé vamos a bajar esto lo primero que vamos a bajarlo un poquito aquí y esto como para ahora para que quede un poco más de tema mejor podemos poner un h1 y dentro pues ya le podemos poner esto esto está aquí haciéndolo un poco sobre la marcha o sea que no sé muy bien cómo ha quedado la imagen vamos a poner como src aquí imagen de temor borramos este php que ya no nos hace falta para que no nos de errores guardamos y vamos a ver si ha funcionado bien actualizamos la página y bueno pues aquí bajo nosotros pasado no pasa nada la cuestión aquí lo importante no es que donde lo muestres sino que estas opciones están en el panel de administración entonces le podemos generar a nuestro usuario un panel con todas las opciones que queramos ya sea un color por ejemplo los colores del sistema y esas variables las podemos coger desde aquí entonces él no tiene que tocar nada y es una manera mucho más sencilla simplemente cuando quiera editar algo pues bien aquí dice por ya no es esta empresa sino que el que oponer sl lo actualiza y sin tener que llamarnos a nosotros él directamente va a ver esos cambios reflejados en el sistema yo creo que es una funcionalidad muy interesante que lo tenemos es una funcionalidad muy interesante que no se suele utilizar y que bueno está disponible en la cdc pro pero sólo por esto por estas cositas ya nos valen la pena pagar la licencia para qué y quitar los problemas llamadas estos 5 minutos 10 minutos que nos supone cada cliente nos lo evitamos nada más esto es bueno es la página que creo que no le había enseñado todavía en el vídeo a un estado faltan muchos copies y faltan muchas cositas pero ya lo tenemos con su anuncio que voy a hacer análisis gratuitos de www pope2you entonces si lo queréis nada simplemente rellenar vuestros datos y os genera un informe personalizado con todas las cosas que tenéis que cambiar o al menos las principales cosas que tenéis que cambiar y si bueno si no si no queréis cambiarlo vosotros y simplemente queréis crear lo cambio por nada me lo decís y los género el presupuesto ya con todo y ya está así que bueno nada más espero que os sea útil y nos vemos en el siguiente vídeo muchas gracias hasta luego

Deja un comentario

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

Ir arriba