Muchos sitios ofrecen contenido infinito, lo que hace imposible acceder a la información del pie de página y el usuario no puede ver información relevante como la política de privacidad, cookies u datos de contacto. Un footer fijo en WordPress conseguiría solucionar el problema, pudiendo mostrarlo u ocultarlo según la necesidad.
Footer fijo con acción de ver/ocultar
El proceso como se describe en el vídeo es muy sencillo, básicamente hay que colocar un botón en el footer que active la visualización u ocultación del pie de página o footer fijo.
Todos los temas disponen de un identificador (id) añadido a una etiqueta html que identifica el espacio que ocupa el footer. Esta etiqueta hay que localizarla para utilizarla en el script que crea la acción de mostrar o no el footer fijo.
Códigos necesarios para crear el footer fijo en WordPress
Aunque estos códigos están orientados a ser utilizados en el tema Divi de WordPress, se pueden adaptar perfectamente para ser utilizados en cualquier tema o plantilla.
Si decides utilizarlo en un tema diferente, sólo tienes que modificar las etiquetas de los identificadores HTML que hacen referencia al botón y al footer.
Código del botón HTML
Este código se coloca dentro del archivo footer.php del tema hijo. Es importante utilizar un child theme o tema hijo para evitar perder los cambios con futuras actualizciones.
Lo colocaremos justo antes de la etiqueta de cierre "body".
1 | <button class="botonlegal" id="botonfooter">Textos legales y más</button> |
- - Es la clase que ayudará a dar el aspecto visual al botón. Se puede utilizar cualquier nombre siempre que lo cambiemos en el resto de códigos.1class="botonlegal"
- - Este identificador hace que sólo este botón realice la acción que se crea con el código del script.1id="botonfoote"
CSS de las hojas de estilo
Las líneas de las hojas de estilo se colocan en la pestaña "CSS adicional" del personalizador de WordPress.
Si sabes un poco de CSS puedes crear el aspecto visual que más te guste modificando o añadiendo más código al de abajo.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | .botonlegal { position: fixed !important; bottom: 10px; right: 10px; cursor:pointer; cursor: hand; z-index: 9999; color: #000 !important; padding:3px 5px; background: #ffffff; border: 1px solid #ccc; box-shadow: 2px 2px 5px rgba(0,0,0,0.4); } .botonlegal:hover { background:#e1e1e1; } #main-footer { position: fixed; bottom: 0; width: 100%; z-index:9998; display: none; } |
El identificador "#main-footer" corresponde al tema Divi, si está utilizando otro tema o plantilla tienes que localizar el nombre que utiliza tu tema, en el vídeoestá explicado cómo se hace.
Script para ver/ocultar el footer fijo
El tema divi, al igual que muchos temas premium o de pago, permiten insertar código desde la configuración del tema, sin necesidad de editar archivos externamente.
Desde las opciones de Divi, en el apartado "integración", habilitamos el código de la cabecera y lo pegamos en la casilla correspondiente.
Si has decidido modificar el nombre de la clase (class) o el identificador (id) del botón, fíjate bien y cámbialo en este código también.
Si tu tema no dispone de este tipo de configuración para añadir código, puedes instalar un plugin que te permita colocar el código sin problemas, como "Simple Custon CSS and JS".
Si tu tema utiliza otro nombre diferente, también debes cambiarlo aquí.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <script> jQuery(function($){ //Ocultar / Mostrar bloque $("#botonfooter").click(function() { $("#main-footer").fadeToggle(0); },function(){ $("#main-footer").fadeToggle(0); }); //Cambiar texto boton $('.botonlegal').click(function(){ var $this = $(this); $this.toggleClass('.botonlegal'); if($this.hasClass('.botonlegal')){ $this.text('Cerrar'); } else { $this.text('Textos legales y más'); } }); }); </script> |
Espero que os sirva compañeros, y si puedo ayudaros en algo, dejad los comentarios más abajo.
0 comentarios