Menus Personalizados en WordPress

WordPress   |   18 Comentarios

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ú?

Esto 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

En 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?

(2 votos, promedio: 5,00 sobre 5)

Loading...

Suscríbete. Déjanos tu email y recibe contenido genial cada mes