Cómo hacer un pie de página adhesivo en WordPress: guía detallada

Existen numerosos métodos para crear elementos pegajosos dentro de WordPress. La mayoría implica jugar con CSS personalizado o usar complicados creadores de páginas de terceros o creadores de sitios web completos.

Y la mayoría de ellos cobrarán una tarifa que etiquetará estas funciones avanzadas como complementos premium.

El hecho de que algo parezca complicado no significa que deba serlo.



 

Cómo hacer un pie de página adhesivo en WordPress

Dos complementos que agregan una barra de pie de página adhesiva a WP son el menú inferior fijo y la barra de notificación WPFront. También puede usar CSS personalizado para hacer el trabajo. Los temas premium pueden tener 'ganchos de elementos' que se pueden usar para hacer un pie de página fijo. Para evitar el desplazamiento infinito, reubique el contenido del widget de pie de página en la barra lateral.

 

Cómo crear un menú inferior móvil fijo para WordPress

Aplicar el principio KISS. Manténgalo simple, estúpido.

 

Instale y active el complemento del menú inferior fijo

Después de todo, ¿qué es un pie de página fijo? Es un menú inferior fijo.

Comience con el complemento de menú inferior fijo.

Este complemento le permite agregar de tres a cinco enlaces en la parte inferior de sus páginas. Ese es el máximo que debería usarse para dispositivos de pantalla pequeña de todos modos.

Más dificultaría la navegación.

Una vez activado, la etiqueta del menú inferior fijo se agrega a su menú de 'configuración' en la barra lateral izquierda.

Haga clic en el elemento del menú para ir a la página de configuración para configurar su menú inferior.

Como esto será para pantallas más pequeñas, necesitará íconos. Hay algunas opciones.

Puede actualizar a un complemento para agregar íconos o hacer clic en los enlaces para ir a fuentes gratuitas. Google Fonts y Font Awesome están vinculados. Todas las fuentes de Google son gratuitas y de código abierto.

Alternativamente, quédese con los Dashicons que ya están codificados para WordPress.

Una vez que configure sus enlaces, desplácese hacia abajo y reduzca el ancho máximo de la pantalla a 760 px. Puedes ir más pequeño.

El motivo de realizar este ajuste de tamaño de pantalla es para que el menú fijo solo se muestre en móviles y tablets.

En los escritorios (siempre que su tema tenga barras laterales) habrá enlaces de navegación visibles. La ventaja de fijar una barra de pie de página en la pantalla es habilitar los botones de navegación permanentes.


 

Cómo hacer una barra de notificación de pie de página fijo

Si solo desea colocar una barra flotante adhesiva en la parte inferior de las páginas para mostrar mensajes promocionales o dirigir el tráfico a su contenido principal (como ejemplos), la barra de notificaciones es la forma más sencilla de hacerlo.
 

Use el complemento de la barra de notificaciones de WPFront

La parte de este complemento a usar es la fijación de posición.

Para habilitar la barra de pie de página flotante, seleccione la opción para fijar la barra en la posición inferior.

  1. Haga clic en habilitar
  2. Cambie la posición de 'arriba' a 'abajo'.
  3. Marque la casilla para habilitar 'fijo en la posición', que es lo que lo fija en la parte inferior de la pantalla.
  4. Mostrar en dispositivos: seleccione 'dispositivos pequeños' si solo desea que la barra se muestre en teléfonos y tabletas. Habilitarlo para todos los dispositivos también mostrará el pie de página adhesivo en el escritorio.
  5. Escriba su mensaje en el área de texto que desea mostrar en la barra de pie de página.

Por ejemplo,

Oferta especial para gerentes: 25 % de descuento en productos cuidadosamente seleccionados. Ver ofertas.

El texto 'Ver ofertas' se puede colocar dentro de un botón que se vincula a una página de ventas o categoría de ofertas en su sitio.
 

Cómo arreglar el pie de página de WP en la parte inferior de las páginas de WordPress con CSS

La mayoría de los temas de WordPress ya tienen menús de pie de página o áreas de widgets para mostrar el texto del pie de página.

Para esos, puede agregar un bloque de CSS a su personalizador de temas para arreglar el pie de página en la parte inferior de cada página.

El código para hacer eso es:

.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: black;
color: white;
text-align: center;
}

Los colores, los tamaños y la alineación del texto se pueden cambiar para adaptarse a sus preferencias.

 

Cómo crear una barra flotante adhesiva para dispositivos móviles con la integración de WooCommerce

Esto requiere que su tema de WordPress esté codificado para usar ganchos de WordPress.

La mayoría de los temas que proporcionan un marco con múltiples opciones de temas secundarios suelen ser los que tienen más ganchos.

Independientemente del tema que esté utilizando, eche un vistazo a la documentación del tema para obtener una 'guía de ganchos visuales' o algo similar en su sitio web.

El enlace de WordPress que su tema necesita admitir es 'pie de página después' o 'después del pie de página'.

Lo que desea es que el tema se codifique para que un elemento se active después de cargar el pie de página, pero antes de que finalice el HTML.

Algunos temas no admiten esta función.

  • El marco de Génesis lo hace, lo cual no es sorprendente ya que tienen más de 50 ganchos en el marco.
  • El tema Astra también tiene la función “astra_footer_after”.
  • El tema Divi no es compatible con esto.
  • El tema Kadence lo hace, pero solo en la versión Pro.

Verifique primero su tema porque esto solo se aplica a los temas ya codificados para ganchos.

Es difícil saber dónde registrar ganchos en diferentes temas de WordPress, así que si no tienes un tema que admita ganchos de elementos, prueba con uno que sí lo haga.

La configuración de las URL personalizadas con íconos es la misma configuración que usaría para el complemento del menú inferior fijo.

  • Insertar un diseño de 3 columnas
  • Añadir un icono para cada columna
  • Vincule los íconos a las páginas a las que desea que vayan.

Siempre que su tema admita los ganchos, el fragmento de código que puede usar para agregar al pie de página fijo móvil es...

add_action( '[insert_theme-name]_after_footer', '[insert_theme-name]_sticky_mobile_bottom_bar', 20 );
function [insert_theme-name]_sticky_mobile_bottom_bar() {
echo do_shortcode( "[reblex id='####']" );
}

Donde 'insertar nombre de tema' está dentro del código anterior, reemplácelo con el fragmento de código de pie de página posterior para su tema.

Para el tema de Kadence, sería kadence_after-footer, para el tema de Astra, sería astra_after-footer, y para el marco de Genesis, el código sería genesis_after_footer.
 

Cómo hacer un pie de página fijo en un tema de WP usando desplazamiento infinito

Para temas que usan desplazamiento infinito, el pie de página nunca se cargará hasta que no haya más contenido para cargar.

Una solución alternativa es adoptar el enfoque que hizo Twitter, que consiste en mover el widget de pie de página a la barra lateral.

Al mover el contenido que le gustaría en el pie de página para que sea el último widget en su barra lateral y hacerlo 'pegajoso' asegura que permanezca visible.
 

Use el widget fijo Q2W3 para WordPress

Esto le permite mover cualquier cosa a una barra lateral y mantenerla visible.

Vaya a complementos> Agregar nuevo> Buscar el widget fijo Q2W3 para WordPress.

El que hay que instalar y activar es By Thomas Maier, Max Bond.

Una vez instalado, cuando vaya a su sección de widgets, aparecerá una nueva casilla de verificación que puede seleccionar para crear un 'widget fijo'.

Cualquier widget se puede arreglar. Sin embargo, solo arregle el último widget en cualquier sección para evitar que los widgets se superpongan.

Para incluir un número seleccionado de páginas, use el widget de páginas y luego use la función de ID de página 'excluir' para limitar el número de páginas que se muestran solo a lo esencial.

Recuerde, cuando los visitantes llegan a su pie de página, es la última oportunidad de mostrarles algo que probablemente necesiten. Incluye información pertinente en tu pie de página.

… Enlaces a su página de contacto, horarios de apertura, una página de preguntas frecuentes, información de contacto, etc.

La solución de colocar el menú de pie de página en la barra lateral garantiza que sea el último widget que se muestre y permanezca visible en una posición fija.

Para un sitio web comercial local, el pie de página también es la sección para incluir los datos NAP de su empresa para SEO. Ese es su negocio 'Nombre, dirección y número de teléfono'.

Si prefiere que sus enlaces se muestren uno al lado del otro en lugar de como una lista de enlaces, use el widget 'HTML personalizado', luego cree los enlaces manualmente usando HTML para que se pueda hacer clic en sus enlaces. Texto en el que se puede hacer clic aquí.