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

Hay muchas formas de crear elementos pegajosos en WordPress. La mayoría implica confusión con CSS personalizado o el uso de sofisticados creadores de páginas de terceros o creadores de sitios web completos.

La mayoría de ellos cobrará una tarifa por etiquetar estas características de primera clase como complementos de primera clase.

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

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

Dos complementos que agregan cintas adhesivas al pie de página de WP son el menú inferior fijo y la barra de notificación de WPFront. También puede usar CSS personalizado para hacer el trabajo. Los temas premium pueden tener "ganchos de elementos" que se pueden usar para crear pies de página fijos. Para evitar el desplazamiento interminable, mueva el contenido del gadget al pie de página en la barra lateral.

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

Aplicar el principio KISS. Sé simple, tonto.

Instale y active el complemento de menú inferior fijo

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

Comience ajustando el complemento del menú inferior.

El complemento le permite agregar de tres a cinco enlaces en la parte inferior de la página. Sin embargo, este es el valor máximo que debe usarse para dispositivos de pantalla pequeña.

Además, sería difícil de navegar.

Cuando está habilitado, la etiqueta del menú inferior fijo se agregará al menú Configuración en la barra lateral izquierda.

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

Dado que esto funcionará en pantallas más pequeñas, necesitará íconos. Hay varias opciones.

Puede actualizar a un complemento que agrega íconos o hacer clic en el enlace para ir a recursos gratuitos. Google Fonts y Font Awesome están vinculados. Todas las fuentes de Google son gratuitas y de código abierto.

Alternativamente, apéguese a Dashicon, que ya está encriptado para WordPress.

Después de configurar la conexión, desplácese hacia abajo y reduzca el ancho máximo de la pantalla a 760 píxeles. Puedes hacerte más pequeño.

El motivo de este cambio de tamaño de la pantalla es que el menú fijo se muestra solo en teléfonos y tabletas.

Los enlaces de navegación aparecerán en el escritorio (si su tema tiene una barra lateral). La ventaja de adjuntar la barra de pie de página a la pantalla es que activa los botones de navegación permanentes.

Cómo hacer una nota adhesiva para notificaciones en el pie de página

Si solo desea colocar una barra flotante adhesiva en la parte inferior de la página para mostrar promociones o dirigir el tráfico a su contenido principal (por ejemplo), la barra de notificaciones es la forma más fácil de hacerlo.

Uso del complemento de la barra de notificaciones de WPFront

La parte que utiliza este complemento es el posicionamiento.

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

1. Haga clic para activar
2. Cambie la posición de "Arriba" a "Abajo".
3. Marque la casilla para activar Anclar a la posición, por lo que está anclado en la parte inferior de la pantalla.
4. Mostrar dispositivos: seleccione Dispositivos pequeños si desea mostrar la barra solo en teléfonos y tabletas. Habilitarlo para todos los dispositivos también muestra un pie de página adhesivo en el escritorio.
5. Ingrese su mensaje en el área de texto que desea mostrar en la barra de pie de página.

Por ejemplo,

Especial para el gerente: 25% de descuento en productos cuidadosamente seleccionados. Ver ofertas.

El texto "Revisión de la transacción" se puede colocar en un botón que lleva a una página de ventas o categoría de la transacción en su sitio web.

Cómo fijar un pie de página de WP en la parte inferior de una página de WordPress usando CSS

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

Para ellos, puede agregar algo de CSS al personalizador de temas para fijar el pie de página en la parte inferior de cada página.

El código para esto es:

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

El color, el tamaño y la alineación del texto se pueden cambiar a tu gusto.

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

Esto requiere codificar su tema de WordPress para usar ganchos de WordPress.

La mayoría de los temas que proporcionan marcos con una amplia selección de subtemas suelen ser temas de múltiples ganchos.

Independientemente del tema que utilice, consulte la documentación en la Guía de ganchos visuales o algo similar en su sitio web.

El gancho de WordPress que su tema debería admitir es footer-after o after-footer.

Lo que desea es codificar el tema para el elemento que desea activar después de cargar el pie de página, pero antes de que finalice el HTML.

Algunos temas no admiten esta característica.

• Framework Genesis hace esto, 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".
• Los temas de Divi no son compatibles con esto.
• Los temas de Kadence están disponibles, pero solo en la versión Pro.

Verifique primero su tema, ya que esto solo funcionará con temas que están codificados para ganchos.

Puede ser difícil averiguar dónde registrar ganchos para diferentes temas de WordPress, así que si no tiene un tema que admita ganchos de elementos, pruebe con uno que sí lo haga.

La configuración de la URL del icono personalizado es la misma que usa para anclar el complemento del menú inferior.

• Insertar un diseño de 3 columnas
• Añadir un icono a cada columna
• Vincula los íconos a las páginas que deseas visitar.

Si su tema admite ganchos, el fragmento de código que puede usar para agregar al pie de página fijo de los dispositivos móviles 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='####']" );
}

Si "Insertar nombre del tema" está en el código anterior, reemplácelo con el fragmento de código en el pie de página de su tema después de él.

Para el tema de Kadence será kadence_after-footer, para el tema de Astra será astra_after-footer y para el marco de Génesis el código será genesis_after_footer.

Cómo hacer un pie de página adhesivo en temas de WP con Infinite Scroll

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

Una solución es hacer lo que hizo Twitter moviendo el widget de pie de página a la barra lateral.

Asegúrate de que permanezca visible moviendo lo que quieras en el pie de página al último widget en la barra lateral y haciéndolo "pegajoso".

Widgets anclados Q2W3 usando WordPress

Esto le permite mover todo a la barra lateral y mantenerlo visible.

Vaya a Complementos> Agregar nuevo> Buscar widgets anclados Q2W3 para WordPress.

Para instalar y activar está Thomas Meyer de Max Bond.

Después de la instalación, cuando vaya a la sección de widgets, aparecerá una nueva casilla de verificación donde puede elegir crear un "widget adjunto".

Cada widget se puede ajustar. Sin embargo, ajuste solo el último widget de cada sección para evitar que se superpongan.

Para incluir un número seleccionado de páginas, use el gadget Páginas, luego use la función Excluir identificación de página para limitar el número de páginas que se muestran solo al contenido básico.

Recuerde que cuando los visitantes llegan a su pie de página, esta es su última oportunidad de mostrarles lo que pueden necesitar. Incluye información relevante en el pie de página.

... enlace a su página de contacto, horario de apertura, 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 este sea el último widget que se muestre y permanezca visible en una posición fija.

Para los sitios de empresas locales, el pie de página también es la sección que contiene los datos NAP para SEO. Este es el "nombre, dirección y número de teléfono" de su empresa.

Si desea que sus enlaces aparezcan uno al lado del otro, en lugar de como una lista de enlaces, use el Gadget HTML personalizado, luego cree enlaces manualmente usando HTML para que se pueda hacer clic en sus enlaces. Texto clic a clic aquí.