Menus Personalizados en WordPress

Desde hace relativamente poco, WordPress ofrece en sus funciones la posibilidad de crear menús dinámicos para nuestras páginas. Dichos menús los podemos integrar en nuestros themes de forma muy sencilla. Bien, hoy toca hablar justo de eso: de los menús dinámicos en WordPress.

¿Cómo crear un menú?

menus002Esto no es nada complicado, ni siquiera implica desarrollar. Simplemente desde “Apariencia” > “Menús” podemos acceder a la sección de creación de Menús.

Lo primero que debemos hacer es crear un menú nuevo. No podremos hacer nada hasta que no escribamos un nombre de menú y pulsemos en Guardar.

Luego podemos añadir entradas, páginas, categorías, tipos personalizados, taxonomías personalizadas, y todo lo que se nos ocurra y que ya hayamos creado simplemente desde la sidebar izquierda, seleccionando lo que queremos y añadiéndolo al menú. También podemos crear nuestros propios enlaces desde la caja “Enlaces personalizados” (la segunda caja empezando por arriba).

Es muy interesante que veamos todas las opciones de los menús. Para ello, arriba del administrador a la derecha, pulsamos en Opciones de Pantalla para desplegar las opciones. Podemos marcar y desmarcar los tipos que no queremos ver en esta pantalla, y podemos seleccionar las opciones que podemos rellenar. Estas son:

  • Destino del enlace (indica si se abre en una ventana nueva o no)
  • Clases CSS (para el menu)
  • Relación con el enlace (XFN)
  • Descripción

Suele ser util tener las opciones visibles para poder seleccionar, por ejemplo, que nuestro enlace se abra en una ventana/pestaña nueva.

Una vez que hemos añadido los elementos al menú, podemos reordenarlos o estructurarlos simplemente arrastrando en el panel central los elementos.

Es muy importante que os acordéis de pulsar en “Guardar menú“, ya que los cambios no se guardan automáticamente como ocurre con los widgets. Podemos tener todos los menús que queramos, para luego añadirlos a Widgets o establecerlos directamente en el Theme.

Añadiendo mi menú a un Sidebar

Esto tampoco es difícil. Ahora vamos a la sección “Apariencia” > “Widgets”, y arrastramos del panel central el Widget “Menú personalizado” a la sidebar que queramos. Aquí, si queremos, establecemos un título, y esto sí es importante, seleccionamos en el desplegable el menú que queremos que aparezca en este Widget de entre los que hemos creado.

Mostrando un menú directamente en el theme

Para añadir un menú concreto al theme de forma explícita, tenemos wp_nav_menu. Simplemente, completamos los parámetros con lo que queremos mostrar en nuestro menú, y mediante esta función aparecerá en pantalla:

	// Argumentos opcionales para mostrar un menú
	$args = array(
		"theme_location"=>"",	// Esto se verá más adelante, la posición debe estar registrada con register_nav_menu para poder seleccionarla.
		"menu"=>"",				// Acepta, en este orden, id, slug o nombre del menú a mostrar.
		"container"=>"div",		// Dentro de qué elemento se engloba el menú. Admite div y nav. Para no englobarlo en nada, usar false.
		"container-class"=>"",	// Atributo class del container establecido antes.
		"container-id"=>"",		// Atributo id del container establecido antes.
		"menu_class"=>"menu",	// Atributo class del elemento ul que engloba al menú. Es posible establecer múltiples clases separadas por espacios.
		"menu_id"=>"",			// Atributo id del elemento ul que engloba al menú. Por defecto será menu-{menu slug}.
		"echo"=>true,			// Si lo que queremos es guardar el menú en una variable, establecemos este valor en 0.
		"fallback_cb"=>"wp_page_menu",	// ¿Qué pasa si el menú que estamos definiendo no existe? Que la función aquí definida se llamará. Por defecto, wp_page_menu. false para no llamar a nada.
		"before"=>"",			// Texto antes del <a>
		"after"=>"",			// Texto después del </a>
		"link_before"=>"",		// Texto antes del texto del enlace
		"link_after"=>"",		// Texto después del texto del enlace
		"items_wrap"=>"<ul id='%1$s' class='%2$s'>%3$s</ul>",		// Formato de la cadena de una expresión con sprintf. Incorpora otros parámetros: %1$s es el valor de "menu_id", %2$s es el valor de "menu_class", y %3$s el valor de la lista de items. Podemos omitir un token para que no aparezca.
		"depth"=>0,				// Niveles de jerarquía incluidos en el menú. Por defecto, 0, que implica a todos los submenús. -1 rompe la jerarquía y muestra todos los menús y submenús en un menú simple no jerárquico.
		"walker"=>""			// Objeto walker a usar (debe ser un objeto, no un string)
	);
	wp_nav_menu($args);	// Llamamos al menú

Con esto, nuestro menú debería aparecer correctamente en pantalla.

Definiendo zonas de menús

menu001En algunos Themes habréis visto que, en “Apariencia” > “Menú”, podemos seleccionar el menú “por defecto” para una ubicación. Esto nos va a permitir seleccionar un menú cualquiera para una posición dentro de nuestra web, y podremos cambiarlo cuando queramos.

En primer lugar, debemos crear una función para registrar la zona. Recuerda que debes incluir este trozo de código bien en el archivo functions.php del Theme, o bien, en un plugin (recomendado).

Por ejemplo, vamos a crear un menú llamado “Menu Superior”.

function register_menu_header(){
	register_nav_menu('header-menu','Menu Superior');
}
add_action('init','register_menu_header');

Lo que hemos hecho es decirle a WordPress que la posición ‘header-menu’ existe y es válida, mediante la función register_nav_menu.

Ahora pasamos por “Apariencia” > “Menús” y nos aparecerá en el sidebar izquierdo una caja parecida a la que vemos en la imagen que acompaña a esta sección. Aquí podemos seleccionar un menú y asociarlo a la posición “Menú Superior”.

No hemos acabado, claro. Ahora tenemos que mostrar en nuestro theme el menú. Para ello, abrimos el archivo php del lugar donde va el menú (por ejemplo, header.php), y llamamos a la función wp_nav_menu. Esta vez, podemos llamarla estableciendo en theme_location “header-menu”, o, si no tenemos que cambiar ninguna otra opción, simplemente así:

wp_nav_menu('header-menu');

Con esto, wp_nav_menu busca el menú de la posición header-menu y lo muestra en pantalla. Las jerarquías se mostrarán de una determinada forma u otra según vuestro CSS.

Preguntas y respuestas

¿Puedo mostrar mis entradas de tipos personalizados en el menú?

Claro que sí: en la sidebar izquierda del formulario de creación de menús vemos varias cajas. Si vamos bajando, veremos que podemos añadir elementos de nuestros tipos personalizados.

¿Por qué sólo veo las últimas entradas?

Porque en cada caja hay dos pestañas: Últimas Entradas y Ver Todas. Pulsa en Ver Todas para ver una lista de todos los elementos que puedes añadir (que son los que existen en tu WordPress).

Tengo mi página en bilingüe y quiero tener un menú específico para cada idioma. ¿Puedo?

Sí, siempre que el plugin de multilenguaje que utilices lo permita. Polylang, por ejemplo, lo permite, a su modo. Con Polylang, la caja de menús por Ubicación cambia y aparece un enlace a las opciones de Menús de Polylang (también podemos acceder desde “Ajustes” > “Idiomas”, pestaña “Menús”). Aquí nos permite seleccionar, por ubicación e idioma, el menú que queremos establecer.

¡Tengo más preguntas!

Aquí abajo tienes un formulario de comentarios para preguntarnos lo que quieras, o siempre puedes pasarte por la sección “Contacto” 🙂 No dudes en preguntarnos, y te ayudaremos en lo que podamos.

“No uses las manos para hacer cosas que pueden
hacerse eficientemente con un ordenador”

.- Tom Duff

¿Te ha gustado el artículo?
1 Star2 Stars3 Stars4 Stars5 Stars (1 votos, promedio: 5,00 sobre 5)
Loading...
Artículo escrito por

¡Exprésate! Dejanos tu comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

18 Comentarios

Álvaro Muñoz

Hola María, La opción no está en ese apartado. Para ponerlo en el footer debes abrir el editor de archivos [Apariencia > editor] y buscar el archivo que sea footer.php. Una vez en ese archivo podrás hacer las modificaciones oportunas. Espero que te sirva

Maria

Buenos días! buenas explicaciones :). Mi problema es que no se como cambiar un item del menú principal al menú del footer, o no está la oción o yo no lo veo. un saludo y muchas gracias.

Sergio

Hola, tengo un problema y me gustaria saber si alguien me puede ayudar. En mi caso es una onepage en español y otra en ingles, y he creado un menu para cada una mediante anclas. Necesito saber como puedo poner cada menú en su pagina. Garcias de antemano.  

johan

Hola, Estoy creando mi propio tema para wordpress pero tengo problemas con los submenus, no se visualizan como desplegables

Color

Buenas: Mi consulta es sobre si es posible utilizando qtranslate para un sitio en varios idiomas, que en un idioma en particular aparezca un ítem mas en el menú. O sea si en todos los idiomas el menú tiene 5 elementos, salvo en 1 idioma en el que debe tener 6 elementos. Es posible esto? como se hace? Desde ya muchas gracias.

jesus

hola amigos, tengo un web en dos idiomas y tengo un problema con los widgets del footer que no se pueden personalizar como los de la sidebar en las entradas.Me explico y es que en la página principal en el footer he puesto unos widgets que alguno al pinchar enlaza a una url.Pues bien cuando está en castellano enlaza a un url en castellano , pero cuando estoy en la web en euskera al pichar en esos widgets no me enlaza a un entrada en euskera que es lo que quiero si no a la misma de la página en castellano.Agradecería vuestra ayuda porqu no sé qué hacer.Repito que sólo me ocurre con los de la página principal.Saludos y gracias. mi web  es http://www.fqeuskadi.org

Pedro

Puse un menú personalizado en widget pero me sale todo desplegado y no desplegable. ¿Como puedo hacerlo desplegable?   gracias!!

Aldara

Un truco genial cambiar la configuración de la página para añadir elementos del menú, es increíble lo que simplifica todo. Gracias!!

Victor

Buenos días, tengo una pregunta: ¿debo cambiar de posición un menú, como se puede hacer por html puro, es decir por codigo?

Cristian

Hola como estas excelente tu tutorial, sabes estoya haciando una pagina en la cual trato de llevar menu html5 a wordpressy el submenu que se despliega de los item 2 y tres que vienen desde el admin de wodrpress siempre se despliegan desde el pimer item osea lo que deberia desplegarse en el sugundo item del menu tambien de despliega en el primer item, ojala pudiesen ayudarme desde ya gracias cabe mencioner que los estilos y js eta  todo ok <div class="site-menu right-menu visible-lg visible-md top-5"> <nav> <ul class="sf-menu bottom-0 list-unstyled clearfix"> <li class="menu-normal current-menu-item"> <li class="menu-normal"> <a href="#">Pre y Post Operatorio</a> <ul> <li><a href="#">Preguntas para su cirujano antes de operarse</a></li> <li><a href="#">Pasos a seguir antes de la cirugía</a></li> <li><a href="#">Pasos a seguir Post Operatorio</a></li> </ul> </li> </ul> </nav> </div> <!--fin menu solo html5--> <!--menu solo html5--> <div class="site-menu right-menu visible-lg visible-md top-5"> <nav> <ul class="sf-menu bottom-0 list-unstyled clearfix"> <li class="menu-normal current-menu-item"> <li class="menu-normal"> <a href="#">Pre y Post Operatorio</a> <ul> <li><a href="#">Preguntas para su cirujano antes de operarse</a></li> <li><a href="#">Pasos a seguir antes de la cirugía</a></li> <li><a href="#">Pasos a seguir Post Operatorio</a></li> </ul> </li> </ul> </nav> </div> <!--fin menu solo html5-->   menu wordpress <!--menu solo html5--> <div class="site-menu right-menu visible-lg visible-md top-5"> <nav> <ul class="sf-menu bottom-0 list-unstyled clearfix"> <?php wp_list_pages('title_li=&depth=2'); ?>     </ul> </nav> </div>    

José Miguel

Hola Rubén, gracias por tu explicación. Yo tengo un problema con el plugin Polylang. Al crear los diferentes menús para cada idioma, en concreto mi tema tiene dos (uno principal y otro secundario), sólo en el menú que fija como principal aparece como última opción de las de primer nivel del menú el Conmutador de idioma. Pero en el resto de menús principales del resto de idiomas no aparece, y no sé como puedo meterlo ahí con lo que cuando cambio a otro idioma en la web pierdo las banderas que permiten pasar de un idioma a otro. ¿Sabes que puede estar ocurriendo? Muchas gracias por tu ayuda.

Handerson William Marques

roberto

Muchas gracias! Buena explicación y traducción

Rosa

Hola, En el menú de la web que estoy construyendo necesito incluir un item que redirige a una página externa. La web es multilingüe y para cada idioma la URL del item es algo distinta (se le añade el distintivo del idioma). Estoy usando Qtranslate y en el editor de menús puedo incluir un item personalizado, pero en la URL no sé como indicar una distinta en función del idioma. ¡Muchas gracias por tu ayuda!

santiago vera

Hola, tengo un menú personalizado, el cuál lo agregué al sidebar. Mi problema es que las páginas asociadas a ese menú tienen un campo personalizado secColor con un valor especifico, y mi idea era que en el despliegue del menú personalizado, el background-color de cada item del menú tuviera ese color, y he buscado pero no he pillado alguna posible solución. hay alguna forma de armar el menu personalizado , si tuvieras alguna idea que me guie, te lo agradecería.

Alex Saab

Buen post! me ayudo mucho para configurar mi menu.

Juan Viñas

Quiza sea cosa del css de tu theme. Piensa que WordPress engloba cada widget dentro de divs concretos, así que probablemente sea eso.

María de Luján

HOla¡ he creado el widget de menu personalizado: ya sólo le tengo que decir el número de páginas en las que se tiene que mostrar. Pero no sé porqué me sale un recuadrito detrás del principal del widget. POrqué puede ser?