Descubre cómo incluir en el personalizador de WordPress la posibilidad de fijar la cabecera y cambiar su transparencia para Maker Pro mediante código.
Por qué incluir una cabecera fija
La mayoría de los Genesis child themes de StudioPress cuentan con una cabecera fija, pero Maker Pro no es uno de ellos.
Sin embargo, mantener el header de la web siempre visible mejora la experiencia de usuario, ya que permite a las visitas acceder al menú en todo momento.
¿Quieres que se suscriba? ¿Prefieres que resuelva el carrito de la compra? ¿Te interesa que se ponga en contacto?
Da igual cuál sea el objetivo principal de la web. Tener la cabecera a mano mejorará la conversión de la página.
¿Y sabes que es aún mejor que un header siempre fijo?
Poder decidir si quieres mostrar la cabecera y elegir su grado de transparencia desde el propio personalizador de WordPress.
Resultado final del tutorial
Cuando lo apliques, obtendrás un nuevo apartado en el personalizador llamado Cabecera, con dos secciones:
- Un desplegable para decidir entre header relativo o fijo.
- Un deslizador que permite elegir su nivel de transparencia.
¿Lo mejor de todo? Podrás ver los cambios a tiempo real.
Suena bien, ¿verdad?
Aprende paso a paso como conseguirlo:
Instrucciones de código Genesis para agregar una cabecera fija desde el personalizador
1. Modifica el archivo customize.php
En primer lugar, introduce este snippet en la línea 13 del fichero customize.php.
Para ver este código y los otros 2063 snippets de esta web,
identifícate o suscríbete aquí.
Con este fragmento de código agregas las nuevas opciones al personalizador.
2. Crea un fichero cutomize.js
Ahora, crea un archivo customize.js en la ruta /lib/customizer/:
Para ver este código y los otros 2063 snippets de esta web,
identifícate o suscríbete aquí.
Con este 2º paso vinculas las acciones que se realizan en el personalizador de WordPress con la apariencia en CSS.
3. Modifica el archivo global.js
Introduce al final del fichero global.js en /js/:
Para ver este código y los otros 2063 snippets de esta web,
identifícate o suscríbete aquí.
Estos scripts son los encargados de añadir o eliminar las clases .fixed y .scroll a la cabecera y, por lo tanto, te permiten aplicar el diseño por CSS.
4. Crea un fichero class-wp-customize-opacity.php
Crea un archivo class-wp-customize-opacity.php y colócalo dentro de la carpeta /lib/inc/.
Para ver este código y los otros 2063 snippets de esta web,
identifícate o suscríbete aquí.
Este archivo es el encargado de controlar la opacidad de la cabecera.
5. Edita el fichero functions.php
Agrega este snippet al final del fichero functions.php:
Para ver este código y los otros 2063 snippets de esta web,
identifícate o suscríbete aquí.
Con esto añades las funciones que te permiten cambiar el aspecto de la cabecera según los ajustes que apliques desde el personalizador de WordPress.
6. Modifica el fichero style.css
Introduce este snippet en el apartado de Site Header:
Para ver este código y los otros 2063 snippets de esta web,
identifícate o suscríbete aquí.
Con este último código agregas los estilos de CSS que necesitas.
Conclusiones
¡Ya lo tienes!
Aunque necesitas modificar varios ficheros, si sigues este tutorial paso a paso, conseguirás añadir la funcionalidad de cabecera opcional en el personalizador de WordPress de forma sencilla.
Como resultado, tu nueva versión de Maker Pro tendrá incorporada la sección de Cabecera, donde podrás decidir entre header relativo o fijo y ajustar su grado de transparencia.
Esto será muy útil para tus clientes, ya que les permitirá realizar cambios de forma sencilla y ver el efecto a tiempo real.
¿Tienes alguna pregunta o quieres darme una sugerencia para próximos snippets? Déjala en los comentarios.
Ventajas de ser suscriptor.😉
