Temas (VII) Crear un tema, introducir el menú

Posted by On noviembre 16, 2015 1 Comment

Muchos de los sitios que se hacen en WordPress (actualmente WP refleja el 25% de la red), son tratados como CMS por lo que los menús deben de ser algo más que las páginas que se escriben, pueden ser categorías, enlaces específicos… por esa razón es por lo que necesitamos introducir un menú y no utilizar una lista de las páginas como se hacia antiguamente utilizando wp_list_pages(‘title_li=’) 

Por defecto nuestro tema no muestra ningún menú, de hecho aunque hemos puesto un nav solo le hemos marcado que esa es la posición donde irá el menú, de modo que tenemos que configurar que aparezca por que ahora mismo ni tan siquiera nos aparece en el panel de control la opción de configurarlo.

Para introducir el menú dentro de nuestro tema de WordPress, lo que tenemos que hacer antes de nada es registrarlo en nuestro archivo functions.php añadiendo la siguiente línea:

register_nav_menu('principal', 'Menú de navegación principal');

Con esto hemos registrado el uso de un menú y ya podemos editarlo desde el panel de control.

Como vemos la función register_nav_menu() tiene dos parámetros:

  • El identificador con el que colocaremos nuestro menú en el navegador, tal y como veremos más abajo
  • El texto que nos aparecerá en el panel de control para poder identificarlo nosotros.

Esta función tiene algunas utilidades más, de modo que si quieres saber más te remito al codex de WordPress a su apartado register_nav_menu()

Pero aunque tengamos nuestro menú creado aun no se muestra en nuestro tema, para ello debemos de utilizar otra función llamada wp_nav_menu() que es la encargada de mostrar el menú en nuestra web para lo cual debemos de poner la función donde queramos de nuestra plantilla del siguiente modo:

<?php wp_nav_menu(); ?>

Si quieres obtener información adicional sobre wp_nav_menu() puedes acceder a su apartado del codex de wordpress desde aquí.

Necesito introducir más de un menú en mi tema

Puede ser interesante tener más de un menú en nuestro tema, por ejemplo imaginemos que queremos tener un menú al principio de la web y otro debajo del logo y la descripción, con lo que hemos visto hasta ahora eso no es posible, pero en realidad es muy sencillo hacerlo, tan solo habría que registrar más menús utilizando en este caso la función register_nav_menus() que lleva como argumento un array donde cada elemento hace referencia a cada menú. Veámoslo:

register_nav_menus(array(
	'principal' => __('Menú principal', 'Voyager'),
	'secundario' => __('Menú secundario', 'Voyager')
	));

Como vemos la función no tiene mucha diferencia de lo que hemos visto hasta ahora, de modo que se introduce el identificador y luego como se reconocería para el administrador, de esta forma ya comenzarían a abrirse los diferentes menús en el panel de control.

Pero si aún así quieres saber más de la función register_nav_menus() solo tienes que acceder al codex.

Ahora hay que indicarle a WordPress donde queremos que aparezca cada uno de nuestros menús, en este caso dos, pero podrían ser más. Para ello volvemos a utilizar la función wp_nav_menu() aunque en esta ocasión si hay que indicarle por medio de un argumento que menú es el que debe de recoger de la siguiente forma:

<?php wp_nav_menu(array('theme_location' => 'secundario')); ?>
<?php wp_nav_menu(array('theme_location' => 'principal')); ?>

De este modo le decimos a WP en que parte del tema debe de introducir el menú.

Si nosotros utilizáramos un único menú en nuestro tema (el que estamos construyendo como ejemplo) nuestro header.php quedaría así:

<!DOCTYPE html>
<html <?php language_attributes();?>>
<head>
	<meta charset="<?php bloginfo('charset')?>">
	<title><?php wp_title(' | ', true, 'right');?><?php bloginfo('name')?></title>
	<?php wp_head();?>
</head>
<body>
<header>
	<img src="http://www.creabytes.com/media/servicios-logo.png" atl="logo">
        <h3><?php bloginfo('name');?></h3>
        <h4><?php bloginfo('description');?></h4>
</header>
<nav>
	<?php wp_nav_menu(); ?>
</nav>
<main>
        <section id="cuerpo">

Así ya tendríamos nuestro menú en pantalla, con tan solo una falta, hay que darle estilos y convertirlo en responsive para poder trabajar con él en modo navegador y no como una lista, pero como se suele decir eso es otra historia…