En este artículo vamos a aprender como crear una sección de imagen de portada con texto adaptativo con Advance Custom Fields en Genesis Sample.
Pero…¿que quiere decir texto adaptativo? Pues, no es más que llevar la adaptabilidad al tamaño de la pantalla de otros elementos, al texto. En otras palabras, el texto aumentará o disminuirá de tamaño progresivamente, dependiendo del dispositivo donde visionemos la web. Por supuesto, podremos marcar un máximo y un mínimo.
Nota: Este tutorial está hecho y probado sobre Genesis Sample, pero con laguna pequeña modificación, tendría el mismo resultado en cualquier Genesis Child Theme.
Aunque en la mayoría de Genesis Child Themes se suele trabajar con áreas de widgets, no es la única manera que hay. Me refiero sobre todo a esas portadas modulares de algunos themes.
Algo que facilita mucho la vida al usuario, son los campos personalizados. Una vez creados y maquetados, ya bien sea en la portada o en cualquier otra parte de la web, el usuario, sabiendo donde editarlos, solo tiene que cambiar el contenido del campo.
Y el mejor plugin para crearlos y administrarlos, sin duda es Advance Custom Fields.
Veamos como hacer todo esto.
Añadimos un nuevo tamaño de imagen
Antes de crear nada añadiremos un nuevo tamaño de imagen. Esto lo haremos para que la imagen de portada se comporte como queremos.
Añade este snippet al archivo functions.php de Genesis Sample.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
Crear los campos con Advance Custom Fields
Para seguir con el tutorial, necesitamos tener instalado el plugins Advance Custom Fields. Es gratuito y está en el repositorio. Lo instalamos como cualquier otro plugin y lo activamos.
Lo primero será crear un grupo de campos personalizados con sus reglas de ubicación para determinar donde se utilizarán los campos de ese grupo. Y dentro de este grupo crearemos los campos necesarios.
Iremos a Campos personalizados → Añadir nuevo y crearemos el grupo.
Yo he creado un grupo llamado Destacado Portada. En este grupo he creado 3 campos personalizados. Uno de imagen y dos de texto. De los dos de texto será uno para el título y otro para el párrafo explicativo.
Es importante que os fijéis en la ubicación. Dado que la sección destacada, sólo se mostrará en la portada, tiene sentido que los campos a rellenar se muestren sólo cuando editemos la página de Inicio. Pues para eso es la regla que he creado.
Y aunque la captura se corta un poco, ya os digo que el resto de información la he dejado en blanco.
Rellenamos los campos
Si ahora editamos la página de Inicio, veremos que aparece una cajita con los campos personalizados que hemos creado. Ya sólo falta rellenarlos. Subimos una imagen y ponemos algo de testo en los otros dos campos.
Mostramos los campos en la portada
Los campos están creados para la página de Inicio y los hemos rellenado con información. Pero aún no hemos hecho nada con esa información.
Crearemos el template para la página de inicio. Se llamará front-page.php. No es un nombre aleatorio. Es importante que se llame así. Si echáis un vistazo a la jerarquía de WordPress, veréis que es uno de los archivos buscados en la carga de la web. Así que aseguraos de que lo escribís bien :).
En el incluiremos este snippet con el que crearemos una estructura HTML en la que insertaremos los datos de cada campo para luego darle forma con algo CSS.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
Y como he avisado en otras ocasiones, asegúrate de incluir la etiqueta <?php en el template.
Texto adaptativo con CSS
Llevo tiempo experimentando con el texto adaptativo. No es algo necesario, ni que a la larga se vaya a implementar en todas las webs. Al contrario, creo que se dará el salto directamente al las tipografías variables. Pero no está demás saber que existe y usarlo de vez en cuando.
Para dar forma a todo y agregar esas propiedades adaptativas al texto, añade esta porción de código CSS al final del archivo styles.css de Genesis Sample.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
Conclusiones
Trabajar con Campos personalizados es muy gratificante. No sólo por la facilidad que le brinda al cliente para editar el contenido de su web, sino por la sencillez y organización de trabajo que te ofrece el plugin Advance Custom Fields.
Si queremos implementar esto en otro Child theme distinto, sería el CSS sobre todo lo que habría que retocar. Y cuidar mucho las media queries.
Y para cualquier pregunta o sugerencia de nuevos snippets o personalizaciones de themes, por favor deja un comentario abajo. Feliz Día! 🙂