Cómo configurar un menú de WordPress con capacidad de respuesta móvil para su sitio










  • Debido a que muchas personas navegan por Internet desde teléfonos inteligentes y tabletas hoy en día, los diseños móviles son importantes. Un diseño receptivo hace que el sitio web se vea bien en prácticamente cualquier dispositivo que se utilice, desde tipografía hasta imágenes. Sin embargo, un menú de WordPress con capacidad de respuesta móvil también debe ser parte del sitio.

    Al mirar algunos sitios web en un teléfono inteligente, los elementos del menú simplemente no se ven bien. A veces, el texto está desalineado o simplemente hay demasiadas opciones que llenan toda la pantalla. Esto puede ser fácilmente una distracción para muchos visitantes. Un menú de navegación personalizado puede ser la solución perfecta para esos problemas.

    Hoy, le mostraré cómo agregar un menú de navegación que se vea atractivo en prácticamente cualquier dispositivo. Además, te mostraré cómo hacerlo sin una sola línea de código.

    Uso de temas para menús receptivos

    Una de las formas más fáciles de implementar un menú receptivo elegante es usar el tema correcto. Muchos desarrolladores de hoy automáticamente harán que esto sea parte del diseño general del tema. Desafortunadamente, no todos se tomarán el tiempo para incluir menús receptivos. Esto es especialmente cierto si desea utilizar un tema anterior creado antes de que la tecnología móvil se hiciera realmente popular.

    Para verificar si su menú es compatible con el diseño receptivo:

    Vaya al área de apariencia del panel de administración de WordPress.

    menú de apariencia

    Encuentra tu tema y haz clic en el botón «Personalizar».

    haga clic en el botón personalizar

    Una vez que se carga el personalizador, busque los íconos en la parte inferior izquierda que parecen pequeñas pantallas. Estos serán íconos para computadoras de escritorio, tabletas y teléfonos inteligentes.

    encontrar el icono para pantallas

    Haga clic en el icono de «tableta» o «teléfono» para mostrarle cómo se ve el tema en dispositivos similares.

    elegir tableta o teléfono

    Preste atención al área de menú de su sitio. ¿Se encoge en una serie de tres líneas horizontales? Este es el ícono universal para elementos de menú en dispositivos móviles. Si este es el caso, entonces realmente no necesita hacer mucho ya que su tema es compatible con un menú de WordPress que responde a dispositivos móviles.

    icono de menú universal

    Si su diseño no ajusta el menú en una vista móvil, puede considerar cambiar su tema de WordPress . Sin embargo, no hay nada de malo en mantener la apariencia de su sitio web tal como está. En un momento, le mostraré algunas alternativas para usar en caso de que no le guste cómo se ve el menú en su sitio.

    Por otro lado, la actualización a un nuevo tema también puede ser beneficiosa por otras razones. Los problemas de compatibilidad, el soporte de seguridad y las funciones de personalización disponibles son solo algunas de las razones por las que puede considerar una actualización de su plataforma actual.

    Uso del complemento de menú receptivo

    Ya sea que necesite un menú de navegación personalizado para dispositivos móviles o que no le guste el aspecto del actual, Responsive Menu tiene un buen diseño a considerar. No solo se ajustará automáticamente al tamaño de la pantalla, sino que también tiene algunos matices de fondo que son atractivos.

    Por ejemplo, puede darle al menú su propia imagen de fondo para agregar más atractivo visual.

    Para usar el menú receptivo:

    Vaya al área de complementos de su panel de WordPress.

    área de complementos

    Haga clic en el botón «Agregar nuevo» en la parte superior.

    haga clic en agregar nuevo

    Busque «Menú adaptable» en el campo de texto de la derecha.

    buscar menú receptivo

    Instalar y activar el complemento.

    instalar menú receptivo

    Se agregará un nuevo control a la barra de administración izquierda de WordPress llamado «Menú receptivo». Haga clic aquí para abrir la configuración.

    configuración del menú

    El complemento le brinda un gran control cuando se trata de crear un menú de navegación personalizado.

    Configuración inicial : en esta área, puede cambiar cuándo el menú se adapta a dispositivos móviles en términos de ancho de píxel. También tiene la capacidad de usar un menú personalizado que creas en WordPress si quieres que se muestre algo más en su lugar.

    Menú : en el área «Menú», puede realizar cambios en el orden, los iconos, el ancho y otras modificaciones del texto. Es en esta sección donde agregaría una imagen de fondo diferente si desea darle más atractivo visual al diseño.

    Botón : este complemento le brinda control sobre muchos aspectos de los botones dentro de sus menús. Esto incluye cosas como animaciones, tamaños de contenedores, ubicaciones y más.

    Submenús : si tiene submenús en su diseño, el complemento también le da control sobre ellos. Los colores, las imágenes y los iconos se pueden ajustar. Sin embargo, algunas de las características más atractivas se limitan a la versión Pro del complemento.

    Técnico : en el área «Técnico», puede ajustar dónde se coloca el CSS y minimizar el código para mayor eficiencia. También puede configurar WordPress para que use un código abreviado para el menú receptivo si desea agregar el diseño a las páginas o publicaciones.

    CSS personalizado : para aquellos que tienen un manejo de programación en CSS, esta área es donde colocaría el código.

    Barra de encabezado: aunque todas estas opciones están reservadas para la versión Pro, puede modificar el diseño real del encabezado. Cosas como la ubicación del logotipo, los títulos, el texto, el tamaño y más están disponibles en esta pestaña del complemento.

    Menú único : esta función requiere que la opción de código abreviado esté activada y también está reservada para cuentas pagas. Esto controla los colores, los fondos y otras funciones del menú único si elige usar el código abreviado en lugar de la ubicación del menú del encabezado.

    Importar/Exportar : El sistema también viene con la capacidad de guardar su configuración. Puede importar, exportar o restablecer todas sus opciones con un par de clics del mouse.

    opciones de menú

    Una vez que haya hecho sus selecciones, haga clic en el botón «Opciones de actualización» en la parte inferior.

    Tenga en cuenta que este complemento no anula la capacidad de sus temas para crear un menú receptivo. En caso de que use esto con un tema receptivo, se mostrarán dos menús al mismo tiempo desde un dispositivo móvil. Deberá eliminar uno de ellos si desea evitar confundir a los usuarios.

    Sin embargo, es posible usar ambos simultáneamente sin causar demasiados problemas si cambia el menú que usa el complemento en lugar del control de navegación principal. Por ejemplo, puede dejar la navegación receptiva del tema sola mientras muestra un menú de categorías de contenido desde la navegación del complemento.

    Otros complementos a considerar

    Menú receptivo de WP

    menú responsivo de wp

    WP Responsive Menu es una buena adición para personalizar el diseño. Es totalmente receptivo y ofrece un panel de administración fácil de usar para la configuración. Al igual que el que mencioné anteriormente, WP Responsive ofrece personalización de colores, así como la posibilidad de incluir su logotipo. También puede configurar la navegación para que se abra en la parte superior, izquierda o derecha del sitio web.

    Menú fijo de WP

    menú pegajoso de wp

    Si desea un menú receptivo que sea fijo y desaparezca cuando los visitantes se desplazan, debe probar WP Sticky Menu. El complemento no solo responde, sino que también viene con el uso de imágenes de logotipos personalizados, íconos de redes sociales y un personalizador en vivo para ajustar la apariencia. Aunque no tiene tantas funciones como las herramientas anteriores, es una forma simple y efectiva de promover la navegación móvil.

    El diseño receptivo viene en una variedad de formas y tamaños con respecto a WordPress. Ya sea que se trate de una carga diferida para las imágenes o de la ubicación del menú, todo debe verse bien si desea atraer a los visitantes y complacer a los motores de búsqueda. Encuentre las herramientas que necesita para que su sitio sea compatible con dispositivos móviles.

    ¿Qué tipo de adiciones ha instalado en WordPress para promover el diseño receptivo? ¿Ha encontrado un tema perfecto que funcione bien en todos los dispositivos preparados para Internet?