En el panorama de desarrollo web, la eficiencia y la experiencia del usuario son elementos cruciales que constantemente buscamos mejorar. En este contexto, la implementación de código personalizado asume un papel protagónico, ofreciendo soluciones específicas y eficaces.
En este artículo, exploraremos un código en particular que agrega un menú móvil en el footer de un sitio WordPress. Esta función, sin alardes innecesarios, se enfoca en proporcionar una navegación intuitiva y accesible para los usuarios que exploran tu sitio desde dispositivos móviles. Analizaremos las ventajas prácticas de adoptar este enfoque, destacando cómo esta implementación específica puede potenciar la usabilidad y brindar un aspecto moderno a tu plataforma. Sin más preámbulos, sumérgete en los detalles de esta función y descubre cómo puede mejorar la experiencia del usuario de tu sitio web de manera eficaz.
Código PHP
El siguiente código tienes que agregarlo en el functions.php de tu tema hijo o utilizar un plugin como CODE SNIPPETS. (Copia a partir de la línea 3).
<?php
// Función para agregar el móvil en el pie de página
function fran_salas_menu_fijo_agregar_menu_movil() {
?>
<div id="mobile-bottom-menu">
<a href="#"><img src="https://listinghive.instawp.xyz/wp-content/uploads/2023/12/icons8-about-us-50.png" alt="Icono 1"></a>
<a href="#"><img src="https://listinghive.instawp.xyz/wp-content/uploads/2023/12/icons8-contact-50.png" alt="Icono 2"></a>
<a href="#"><img src="https://listinghive.instawp.xyz/wp-content/uploads/2023/12/icons8-services-50.png" alt="Icono 3"></a>
<!-- Agrega más imágenes según sea necesario -->
</div>
<?php
}
// Añade la acción para ejecutar la función en el pie de página
add_action('wp_footer', 'fran_salas_menu_fijo_agregar_menu_movil');Lenguaje del código: HTML, XML (xml)Comprendiendo el Código PHP
- Función
fran_salas_menu_fijo_agregar_menu_movil():- Esta es una función de PHP que utiliza la sintaxis de apertura y cierre de etiquetas
<?phpy?>para intercalar código PHP y HTML. - Dentro de la función, se define un contenedor
<div>con el identificadormobile-bottom-menu. - Dentro de ese contenedor, hay tres enlaces
<a>con imágenes<img>, cada uno representando un ícono de menú. - Las imágenes están vinculadas a través de los atributos
srccon URLs específicas. - Puedes agregar más enlaces e imágenes según sea necesario, simplemente replicando la estructura para cada ítem del menú.
- Esta es una función de PHP que utiliza la sintaxis de apertura y cierre de etiquetas
- Acción
add_action('wp_footer', 'fran_salas_menu_fijo_agregar_menu_movil'):- En WordPress,
add_actionse utiliza para agregar funciones (o «acciones») a eventos específicos. - En este caso, la función
fran_salas_menu_fijo_agregar_menu_movilse añade al evento'wp_footer', que representa el pie de página de WordPress. - Cuando se carga la página y se genera el pie de página, la función
fran_salas_menu_fijo_agregar_menu_movilse ejecutará automáticamente.
- En WordPress,
En resumen, este código crea una función que define un menú móvil con íconos específicos y luego vincula esa función para que se ejecute en el pie de página de un sitio WordPress. El menú móvil parece estar diseñado para mostrar enlaces a secciones específicas del sitio web, como «Acerca de nosotros», «Contacto», y «Servicios».
Código CSS
El siguiente código tienes que agregarlo en el style.css de tu tema hijo o en la configuración de tu tema Apariencia – Personalizar – CSS Adicional.
/* mobile-bottom-menu.css */
/* Estilos para el menú fijo en la parte inferior en dispositivos móviles */
#mobile-bottom-menu {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-around;
padding: 10px;
z-index: 1000;
background-color: white; /* Puedes ajustar el color de fondo si lo deseas */
}
#mobile-bottom-menu a {
text-decoration: none;
}
#mobile-bottom-menu a img {
width: 30px; /* Ajusta el tamaño de las imágenes según sea necesario */
transition: transform 0.3s ease-in-out; /* Agrega un efecto de transición */
}
#mobile-bottom-menu a:hover img {
transform: scale(1.2); /* Ajusta la escala del icono al pasar el mouse */
}
/* Ocultar el menú en dispositivos de escritorio */
@media only screen and (min-width: 768px) {
#mobile-bottom-menu {
display: none;
}
}
Lenguaje del código: CSS (css)Comprendiendo el Código CSS
- Estilos para el contenedor
#mobile-bottom-menu:position: fixed;: Fija el menú en la parte inferior de la ventana del navegador, de modo que permanezca visible incluso al hacer scroll.bottom: 0;: Coloca el menú en la parte inferior de la ventana.left: 0;: Alinea el menú a la izquierda de la ventana.width: 100%;: Establece que el menú ocupe el ancho completo de la ventana.display: flex;: Usa el modelo de caja flexible para el diseño.justify-content: space-around;: Distribuye equitativamente los elementos hijos a lo largo del eje principal (horizontalmente en este caso), dejando espacios iguales entre ellos.padding: 10px;: Agrega un relleno de 10 píxeles alrededor de los elementos dentro del menú.z-index: 1000;: Define la profundidad del menú en el eje z, asegurando que esté por encima de otros elementos.background-color: white;: Establece el color de fondo del menú como blanco. Puedes ajustar este valor según tus preferencias.
- Estilos para los enlaces
#mobile-bottom-menu a:text-decoration: none;: Elimina la decoración de subrayado de los enlaces.
- Estilos para las imágenes dentro de los enlaces
#mobile-bottom-menu a img:width: 30px;: Define el ancho de las imágenes de los íconos.transition: transform 0.3s ease-in-out;: Agrega un efecto de transición suave de 0.3 segundos al aplicar la propiedad de transformación.
- Estilos para las imágenes cuando el mouse está sobre los enlaces
#mobile-bottom-menu a:hover img:transform: scale(1.2);: Aumenta la escala de la imagen a 1.2 veces su tamaño original al pasar el mouse sobre el enlace, creando un efecto de aumento.
- Estilos de ocultamiento para dispositivos de escritorio
@media only screen and (min-width: 768px):- Dentro de un bloque de medios (
@media), se establece que el menú (#mobile-bottom-menu) se oculte cuando el ancho de la pantalla sea igual o superior a 768 píxeles, lo que indica dispositivos de escritorio o pantallas más grandes.
- Dentro de un bloque de medios (
En resumen, este CSS proporciona estilos para un menú móvil visible en la parte inferior de la página en dispositivos móviles, con efectos de transición y aumento al interactuar con los íconos. Además, oculta el menú en dispositivos de escritorio para evitar duplicación con otros menús.
En el transcurso de este artículo, hemos explorado la implementación de un código ingenioso que eleva la experiencia del usuario en sitios WordPress al agregar un menú móvil en el footer. Este enfoque, que prioriza la eficiencia y la funcionalidad, presenta ventajas palpables: desde una navegación simplificada hasta un diseño moderno que se integra armoniosamente en la estética del sitio.
La adaptabilidad y control que ofrece esta solución de código personalizado se convierten en herramientas valiosas para los propietarios de sitios web que buscan destacarse en la entrega de una experiencia excepcional a sus usuarios.
Si encuentras que este código no se ajusta a tus necesidades y requieres modificaciones específicas para que se integre perfectamente con tu proyecto, no dudes en contactarme.
Estoy aquí para ayudarte a optimizar tu presencia en línea. Visita mi enlace de servicios en PluginsWeb para obtener asistencia personalizada y llevar tu sitio web al siguiente nivel.
Nos vemos en el siguiente tutorial.
Un saludo.
Deja tus opiniones o dudas en los comentarios.