Cómo crear estructuras de menú personalizadas en WordPress

WordPress tiene una estructura de navegación incorporada automática que crea sus menús para usted. Incluye páginas y categorías. Los colocará en tu menú principal sin que tengas que hacer nada más que crear la página o una publicación dentro de la categoría. Esto funciona muy bien si solo tiene unas pocas páginas y categorías, pero después de un tiempo puede comenzar a salirse de control. Además, el hecho de que pueda manejar su navegación automáticamente no significa que deba permitirlo.

WordPress manejará sus menús por usted automáticamente sin ninguna entrada de usted, pero si realmente desea aprovechar al máximo la estructura de su menú, puede crear sus propios menús personalizados. Los menús personalizados le permiten tomar el control total sobre su estructura de navegación y pueden darle a su sitio una apariencia más limpia y profesional.

Tipo de Menús

Hay varios tipos diferentes de menús. Los tipos de menú que puede usar dependen de las características de su tema. Los tipos de menú populares incluyen:

• Menú principal: este aparece debajo del encabezado. Debe incluir su navegación principal y las páginas que esperan sus visitantes según el tipo de sitio web que tenga: inicio, sobre, contacto, blog, cartera, etc.
• Menú secundario: este aparece sobre el encabezado. Esto debe incluir enlaces y páginas que desea ofrecer a sus lectores en una ubicación conveniente, pero no necesariamente en su estructura de navegación principal. Pueden ser artículos como tutoriales, un carrito de compras, etc.
• Barra lateral: sus menús personalizados se pueden colocar en la barra lateral utilizando el widget de menú personalizado. Puede usar tantos widgets como desee y colocar cualquier menú en ellos.
• Pie de página: puede crear un menú solo para su pie de página. Este menú generalmente tiene menos información que su menú principal. Dependiendo de las necesidades de su sitio, generalmente contiene inicio, acerca de, contacto, blog, etc. Si su sitio incluye ofertas de trabajo, un programa de afiliados y sitios hermanos, también podrían incluirse aquí.
• Menú de enlaces sociales: este es un menú especial que se encuentra en temas como Twenty Fifteen que coloca sus enlaces de redes sociales en su barra lateral. Si el tema reconoce la red social, proporcionará el icono adecuado. De lo contrario, mostrará los nombres como texto (según cómo haya etiquetado el enlace).

Los menús principal y secundario son los más populares entre los temas de WordPress. Lo que aparece en ellos realmente depende del enfoque de su sitio. El enfoque principal de su sitio debe aparecer en el menú principal. Debe tener sentido para sus visitantes y ser lo que esperan ver.

Por ejemplo, si tiene una tienda, su carrito de compras debe estar en el menú principal. Si tiene un sitio de cartera pero también vende algunas cosas, entonces su cartera debe estar en su menú principal y el carrito de compras debe estar en el menú secundario. Solo piense en dónde encaja lógicamente y colóquelo en consecuencia.

Creación de sus propios menús personalizados

WordPress facilita la creación manual de sus propios menús personalizados. Puede crear, ajustar y aplicar menús desde el back-end, y puede seleccionar sus menús desde el front-end para verlos y probarlos antes de publicarlos.

Creación de los menús desde el back-end

En el back-end, ve a Apariencia y selecciona Menús. En la parte delantera, vaya a Personalizar y seleccione Navegación.

En la pantalla del menú, seleccione crear un nuevo menú, asigne un nombre al menú y haga clic en el botón Crear menú.

Ahora está listo para comenzar a agregar la estructura de navegación. A la izquierda tiene cuadros para Páginas, Enlaces personalizados y Categorías. Puede utilizar todos estos como enlaces en su menú personalizado. En el medio tienes algunas opciones. Puede permitir que todas las páginas nuevas se agreguen automáticamente a la estructura del menú o dejar esto sin marcar si desea tener más control y elegir las páginas y categorías usted mismo.

Paginas

Seleccione la pestaña Páginas en la ventana izquierda si aún no está abierta. Para agregar páginas al menú, seleccione todas las páginas que desee y haga clic en Agregar al menú.

Si desea que se organicen de manera diferente, simplemente arrastre y suelte el elemento del menú que desea mover a su nueva ubicación. Incluso puede convertirlo en un subelemento de otro elemento del menú arrastrándolo y soltándolo a la derecha debajo del elemento del que desea que sea un subelemento.

Puede seleccionar la flecha de la derecha para abrir el elemento y realizar ajustes, como cambiar el nombre y la ubicación. También puede eliminar el elemento de la estructura del menú aquí.

Enlaces personalizados

Para agregar enlaces personalizados, abra Enlaces personalizados en la ventana de la izquierda, agregue la URL que desee y seleccione Agregar al menú. Puede crear cualquier tipo de enlace que desee y hacer que forme parte de la estructura de su menú. Así también se crean enlaces para el menú Enlaces sociales.

Luego puede arrastrarlo y soltarlo donde desee en la estructura del menú.

Categorías

Eliges y agregas categorías de la misma manera que eliges y agregas páginas en la ventana izquierda. Actuarán de la misma manera que lo hacen las páginas y los enlaces en el menú.

Guarde su menú

Una vez que le guste su nueva estructura de menú, guárdela y luego podrá usarla.

Administrar ubicaciones

Hay dos formas de usar su menú desde el back-end.

Configuración del menú

En la pantalla donde creó el menú, hay un grupo de casillas de verificación en Configuración del menú. Puede seleccionar cualquier menú y luego seleccionar dónde se utilizará. Puedes seleccionar tantos como quieras. No olvides guardarlo.

Administrar ubicaciones

Seleccione la pestaña Administrar ubicaciones. Aquí puede elegir qué menú usar en los cuadros desplegables. No tienes que usarlos todos. Una vez que haya elegido cuál de sus menús se usará, simplemente presione guardar y acaba de actualizar la estructura de su menú.

Widget

WordPress también tiene un widget de menú personalizado que puede arrastrar y soltar en sus barras laterales. Desde aquí puedes seleccionar tu menú.

Pruebas

Aquí hay un vistazo a mi menú de prueba y al widget de la barra lateral. Lo siguiente que debe hacer es probar cada elemento para asegurarse de que funciona sin problemas e intuitivamente. No olvides este paso. Es muy importante probar su menú para ver si funciona de la manera prevista. Obviamente, estos no son títulos de menú que deba usar en su sitio web.

Uso del front-end para una vista WYSIWYG

Para modificar la estructura de su menú desde el frente, vaya a Apariencia y seleccione Personalizar. Una vez que llegue a la parte delantera, elija Navegación. Desde aquí puedes elegir tus menús. La ventaja de esta vista es que puede ver los cambios inmediatamente antes de guardarlos. De esta manera puedes decidir si te gusta antes de comprometerte. Desafortunadamente, este sistema no te permitirá crearlos.

Personaliza la apariencia con temas como Divi

Algunos temas, como Divi 2.4 de Elegant Theme, le brindan herramientas para que pueda realizar ajustes en la apariencia de sus menús desde el frente y ver sus efectos de inmediato. De esta manera, sabrá lo que verán sus visitantes antes de guardarlo.

Aquí hay un vistazo a los ajustes del menú de Divi. Puede realizar estos mismos ajustes para cambiar la apariencia de cada elemento del menú.

Personalización aún más: uso de complementos para modificar sus menús

Hay muchos complementos disponibles para WordPress que lo ayudan a modificar sus menús personalizados con nuevas características, apariencia y funcionalidad. Agregan muchos ajustes de CSS, los hacen receptivos e incluso los hacen más rápidos. Aquí hay un vistazo a algunos de los complementos más populares.

Widget de asistente de menú personalizado

Este complemento gratuito agrega un widget de menú personalizado que puede usar en sus barras laterales o en su contenido mediante el uso de códigos cortos. Le da control total sobre los parámetros de su menú y le permite usar porciones específicas de sus menús personalizados. También agrega algunas clases personalizadas.

Puede mostrar porciones específicas del menú o el menú completo. También puede hacer que la salida sea condicional. Se mostrará como plano o jerárquico según el número de niveles que especifique. También puede modificar la salida con HTML.

La configuración del widget es fácil de usar. Elija el menú de un cuadro desplegable y seleccione filtros, respaldos, salida, contenedor, clases, enlaces y alternativa (este es otro nivel de condiciones). También le brinda un código abreviado para que pueda pegar sus menús en su contenido.

Menú acordeón Nextend

Este complemento le permite crear menús de estilo acordeón con control completo sobre los niveles de menú, colores, animación, etc., cada uno con sus propias configuraciones y máscaras. Tiene control sobre los niveles y estados de fuentes, fondos, colores, imágenes, etc. Acelera el sistema de menús mediante el uso de caché, proporciona varios tipos de animación, tiene niveles ilimitados de menús y proporciona 30 configuraciones.

Me gusta la forma en que funcionan los menús de acordeón. Puede expandirlos cuando quiera usarlos y luego ocultarlos para darle un diseño más limpio cuando no quiera verlos en la pantalla. El complemento es fácil de usar y configurar. Usted crea menús como lo haría con tipos de contenido personalizados. Luego puede arrastrar el widget a sus barras laterales y elegir el menú dentro del widget.

También hay una edición Pro que agrega tres temas y soporte. Los precios comienzan en $29.

Menú receptivo

Este complemento gratuito tiene 70 opciones para ajustar cómo se ven, se sienten y actúan sus menús. Puede ajustar los títulos, CSS, acciones, tamaños, animación, scripts y mucho más. Funciona muy bien para dispositivos móviles y tiene funciones para sacar el menú de un lado y establecer la ubicación del menú. Incluso minimizará el CSS y JavaScript de su menú. También puede agregar HTML personalizado e importar/exportar su configuración.

Hay muchos ajustes en la configuración, pero todos son fáciles de entender y ajustar. También hay un nivel avanzado de configuración, pero puede ignorarlo si lo desea. Incluye códigos cortos e incluso puede agregar el código PHP a su tema si lo prefiere.

Otros complementos para modificar menús

Aquí hay una lista de otros complementos que encontré interesantes. Agregan o modifican las características de sus menús y le permiten controlarlos de varias maneras.

• Menú Mega de WordPress
• Megamenú desplegable de CSS3
• Menú receptivo de WP
• Menús Font Awesome 4
• Códigos cortos en los menús
• Apariencia más rápida: menús
• Menú de comidas y bebidas
• Menús minoristas simples
• Purificar menús de WordPress
• Menú de widgets

Consejos para crear excelentes estructuras de menú

• Utilice sus menús para mantener organizada su estructura de navegación.
• Usa la menor cantidad de niveles que puedas. Piense en términos de Primaria y Secundaria.
• Use nombres que tengan sentido para los lectores sin que tengan que descifrar su código.
• Usa el método KISS. Recuerde: cuanto más simple, mejor. Los menús deben ser fáciles de usar e intuitivos.
• Revise las estructuras de menú de sus sitios favoritos y vea lo que le gusta y lo que no le gusta. Entonces haz el tuyo mejor.

Pensamientos finales

Agregar su propia estructura de menú personalizada es fácil y hará que su sitio de WordPress se vea y se sienta más profesional y evitará que su estructura se vea aleatoria. Solo toma unos minutos crear su propio conjunto de menús y puede verlos y probarlos antes de publicarlos. Sus visitantes apreciarán una estructura de menú que les permita navegar por su sitio de manera más rápida e intuitiva.

¡Tu turno! ¿Ha creado su propia estructura de menú personalizada? ¿Tienes algo que añadir? ¿Usas plugins para modificar tus menús? Cuéntanoslo en los comentarios a continuación.