Crear footer fijo en wordpress con botón de mostrar/ocultar

por | 0 Comentarios

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.

Suscríbete:

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».

Editor de tema insertar botón en footer fijo.
Código para el botón de ver/ocultar footer
  • – 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.
  • – Este identificador hace que sólo este botón realice la acción que se crea con el código del script.

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.

CSS añadido en el personalizador de WordPress
CSS añadido en el personalizador de WordPress

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í.

script para ver y ocultar el footer fijo
Colocación del script de la acción ver/ocultar

Espero que os sirva compañeros, y si puedo ayudaros en algo, dejad los comentarios más abajo.

VISITA MI CANAL DE YOUTUBE

Juan

Juan

Juan Martín es el autor del blog Ingresos Vía Web, una persona como tú que intenta ganarse la vida en internet. Trabajo en mi blog para convertir mi sueño de generar autoempleo en realidad y poder ayudar a quien quiera, a conseguir su sueño a través de mis contenidos. Si te parece interesante apúntate a mi newsletter.

0 comentarios

Enviar un comentario

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Al dejar un comentario se solicitan datos como tu email y nombre que se almacenan en una cookie para que no tengas que volver a completarlos en próximas visitas. Para enviar un comentario debes aceptar nuestra política de privacidad. Responsable de los datos: Juan Martín Pascual. | Finalidad: Controlar spam, gestión y moderación de comentarios. | Legitimación: Tu consentimiento expreso. |Comunicación de los datos: No se comunicarán a terceros salvo por obligación legal. | Destinatario: Base de datos alojada en SiteGround Spain S.L. dentro de la UE. Ver política de privacidad de Siteground. | Derechos: Acceso, rectificación, supresión, limitación, portabilidad y olvido de sus datos.

Más de lo mío en Youtube

Categorías

Recomendado para Afiliados de Amazon

AAWP Amazon Affiliate for WordPress
Azon Press

Esta web funciona gracias a:

Hosting WordPress de SiteGround

¿Quieres estar informado de lo que pasa en IVW?

Suscríbete y te aviso de las novedades

verificarprivacidad

Revisa tu bandeja de entrada o la carpeta de spam para confirmar tu suscripción. ¡Gracias por suscribirte!

Pin It on Pinterest

Share This
Ir al contenido