Cómo agregar un menú de panel deslizante en temas de WordPress

Si es un desarrollador de WordPress o un diseñador de temas de WordPress, es posible que desee agregar un menú personalizado en su editor de temas para controlar las opciones del menú. Sin embargo, el panel de administración de WordPress no tiene una opción de menú de panel deslizante de forma predeterminada . Esto significa que debe recurrir a un complemento o plantilla de terceros para agregar esta función a sus temas. Por eso, hoy vamos a explicar cómo agregar un menú de panel deslizante en los temas de WordPress.

Menú de panel deslizante en temas de WordPress: ¿por qué incluirlo?

Hay muchas razones por las que incluir un panel lateral puede ser importante. La primera razón es que a los visitantes les resultará más fácil navegar por su sitio de WordPress si se toma el tiempo de desarrollar menús intuitivos. La segunda razón es que los paneles deslizantes son necesarios para los dispositivos móviles. Por lo tanto, debe asegurarse de tenerlos si desea que su sitio web funcione bien en dispositivos móviles . Sin embargo, si muchos de los usuarios de su sitio van a usar dispositivos móviles, es esencial probar el diseño del menú en estas pantallas más pequeñas antes de lanzar WordPress. Afortunadamente, cuando se ven en un dispositivo móvil, los estilos predeterminados de muchos temas de WordPress mostrarán menús compatibles con dispositivos móviles. Un menú receptivo a pantalla completa o un menú de panel deslizante dinámico en los temas de WordPress puede ser un buen toque para personalizar aún más la navegación móvil. Por esta razón, examinemos la integración de un menú de panel deslizante en los temas de WordPress.

Paso uno: instale el complemento de menú receptivo

Instalar y habilitar el complemento Responsive Menu es el primer paso. Hay dos versiones diferentes de este plugin, una de pago y otra gratuita . Si bien la versión paga de Responsive Menu ofrece algunos extras agradables como lógica condicional y más opciones de temas, usaremos el complemento de código abierto para este tutorial. Al activar el menú receptivo, vaya a Menú receptivo > Menús. Tan pronto como esté allí, suba a la barra de herramientas y presione el botón "Crear nuevo menú". Asigne un nombre a su nuevo menú y guarde su trabajo. No te preocupes si dice que está vacío.

Paso dos: elige el tema

El nuevo menú receptivo le proporcionará cuatro opciones de diseño diferentes. Puede comprar más temas si lo desea. Este tutorial utilizará el tema seleccionado por el sistema. Luego, puede continuar seleccionando la opción "Siguiente". Si aún no lo ha hecho, asigne un nombre a su menú receptivo y luego elija el tipo de menú de su tablero de WordPress que desea que aparezca en la barra lateral. Seleccionamos la opción 'Navegación' por el bien de este tutorial.

Si desea que sus visitantes solo vean el nuevo menú del panel deslizante, también puede optar por ocultar el menú predeterminado que aparece con su tema de WordPress. Para hacer esto, use el área etiquetada como "Ocultar menú de tema" para ingresar algún código CSS. Haga clic en el botón "Saber más" para obtener más información sobre cómo ingresar el código apropiado para el tema elegido. La edición Pro agrega algunas opciones de personalización más para el usuario.

Paso tres: configurarlo

Una vez que haya ajustado los parámetros a su gusto, puede generar su menú haciendo clic en el botón "Crear menú". Una vez que haya hecho esto, encontrará una vista previa de su sitio a la derecha, con opciones para cambiar al modo móvil, tableta o escritorio en la parte inferior . A la izquierda, verá más configuraciones para la personalización. Tome nota del idioma que aparece arriba de las opciones del menú. Tanto el título del menú como una línea de "Contenido adicional", como lo etiqueta el complemento, se muestran aquí.

Seleccione "Menú móvil" y luego "Contenedor" en el menú lateral para realizar cambios u ocultar el texto. En el área de Texto del título, puede ingresar cualquier cosa, desde "Menú principal" hasta "Navegación". Para deshabilitar la barra de título, simplemente cambie el interruptor con la etiqueta "Título" a la posición de apagado. Una vez que hayas hecho eso, ve a la opción 'Contenido adicional'. Tiene la opción de desactivar esta función o reemplazar el texto con cualquier otra cosa. Cuando haya terminado de personalizar el menú, no olvide hacer clic en el botón "Actualizar" en la parte inferior de la página.

Antes de comenzar, es importante realizar algunas pruebas preliminares. Para asegurarse de que todo funcione correctamente, es posible que desee utilizar un navegador diferente de los que normalmente utilizaría para acceder a su sitio. En este ejemplo, utilizamos el navegador Google Chrome. Para acceder al sitio en dispositivos móviles, descargamos una aplicación llamada " Internet Explore para Android". Copiamos y pegamos la URL de este sitio en la aplicación y los resultados fueron asombrosos. Descubrimos que el menú tenía el formato correcto tanto en orientación horizontal como vertical, y que todos los enlaces funcionaban como se esperaba. Sin embargo, su kilometraje puede variar cuando se trata de dispositivos móviles. Lo alentamos a que pruebe su menú en tantos dispositivos y navegadores como sea posible antes de publicarlo. Si encuentra algún problema, ahora es el momento de solucionarlo.

Paso cinco: ir en vivo

Una vez que se ha probado el menú y está satisfecho de que todo funciona según lo planeado, es hora de ponerlo a disposición del público. Haga clic en el ícono de menú en la esquina superior derecha de su sitio y seleccione "Configuración de menú" en el menú desplegable. Verá una lista de elementos con el título "Menú móvil" en la parte superior de la lista. Aquí es donde ingresará la dirección web para su página de complemento de menú móvil. Una vez hecho esto, haga clic en "Guardar cambios" y espere unos segundos para que los cambios surtan efecto. ¡Eso es todo!

Conclusión

Ahora que sabe cómo agregar un menú de panel deslizante en los temas de WordPress, vaya y pruébelo en su propio sitio. Y ahora, si alguna vez desea actualizar su sitio web con menús adicionales, ya sabe cómo hacerlo . Con suerte, este artículo te ayudó a aprender una nueva habilidad y no te dejó abrumado.