¿Cómo crear múltiples menús usando el tema TwentyTen?

Existen varios pasos para crear menús adicionales utilizando el nuevo sistema de menús en WordPress en el tema TwentyTen o cualquier tema de WordPress (algunos de estos pasos se pueden realizar en otro orden). Además, voy a recomendar encarecidamente que crees un tema hijo basado en TwentyTen en lugar de modificarlo directamente:

1. Crea un Tema Hijo basado en el tema Twenty Ten.

2. Registra una Ubicación del Tema en el archivo functions.php de tu tema.

3. Crea un Nuevo Menú usando la consola de administración de tu sitio web.

4. Asocia el Nuevo Menú y la Ubicación del Tema utilizando tu consola de administración.

5. Llama a wp_nav_menu() en el Archivo de Plantilla de tu tema donde deseas que aparezca el menú.

6. Estiliza tu Menú para que se integre visualmente con tu sitio.

¡Así que manos a la obra!

1. Crea un Tema Hijo

Crear un tema hijo es extremadamente sencillo y te brinda la ventaja de poder actualizar TwentyTen si sale una nueva versión sin preocuparte por perder tus cambios.

Sí, existe una pequeña posibilidad de que tus cambios sean incompatibles con la nueva versión, y si haces copias de los archivos de TwentyTen y los modificas para tu tema hijo, tendrás que volver a aplicar esos cambios, pero eso es mucho mejor que perder tus cambios cuando el tema se actualice.

Pero en lugar de duplicar mi respuesta de otra pregunta donde sugerí temas hijos, simplemente te redirigiré allí:

• ¿Cómo personalizar un tema de WordPress sin modificarlo? (Usa Temas Hijos)

Para los ejemplos en el resto de esta respuesta, voy a llamar al tema hijo "Himanshu".

2. Registra una Ubicación del Tema

Registrar una ubicación del tema es muy sencillo usando la función register_nav_menus() (sí, hubiera sido muy agradable si hubieran llamado a esta función register_nav_menu_locations(), pero divago...)

Crearé un menú "Footer" para este ejemplo.

En mi ejemplo, fíjate cómo hago referencia a 'primary' en un comentario; lo hago para que veas cómo se llama la ubicación predeterminada del menú de navegación y que no tienes que definirla tú mismo. También nota que utilicé la función de traducción __() y especifiqué el nombre del tema hijo como dominio de traducción.

Si estás usando un tema hijo, necesitas crear un archivo functions.php en tu tema para alojar esta función, pero si estás modificando un tema, simplemente encuentra functions.php y agrégalo al final:

register_nav_menus(array(
  //'primary' => __('Primary Menu Area','himanshu'), ==> Primary definido por defecto
  'footer'  => __('Footer Menu Area','himanshu'),
));

Si estás escribiendo código para tu propio tema y no necesitas distribuirlo a otros o preocuparte por las traducciones, puedes simplemente hacer esto:

register_nav_menus(array('footer'=>'Footer Menu Area'));

3. Crea un Nuevo Menú

A continuación, vamos a crear tu menú de pie de página navegando a la opción Menús del menú Apariencia en la consola de administración. Haz clic en el "+" para añadir un menú, escribe el nombre de tu menú y luego haz clic en "Crear Menú":

_{(fuente: mikeschinkel.com)}

Nota que a menudo nombrarás tu menú igual que el nombre de la ubicación del menú, pero eso no es necesario y WordPress trata los menús y sus ubicaciones como entidades separadas.

Asegúrate de añadir algunas opciones a tu menú o será de poca utilidad. Selecciona las opciones que necesitas usando la consola de administración, añádelas a tu menú y luego guarda (en mi captura de pantalla solo muestro la selección de "Páginas" para las opciones del menú, pero puedes mezclar y combinar cualquier tipo de opciones de menú que WordPress proporcione):

_{(fuente: mikeschinkel.com)}

4. Asocia el Nuevo Menú y la Ubicación del Tema

Asociar tu nuevo menú con la ubicación del tema deseada es fácil, solo usa la consola de administración de WordPress:

_{(fuente: mikeschinkel.com)}

5. Llama a wp_nav_menu() en el Archivo de Plantilla

Ahora necesitamos volver al código. Hice una copia de footer.php del tema TwentyTen y la copié en el directorio del tema "Himanshu". Así es como se ven las primeras 18 líneas:

<?php
/**
 * La plantilla para mostrar el pie de página.
 *
 * Contiene el cierre del div id=main y todo el contenido
 * después. Llama a sidebar-footer.php para los widgets inferiores.
 *
 * @package WordPress
 * @subpackage Himanshu (basado en Twenty Ten)
 * @since Twenty Ten 1.0
 */
?>
  </div><!-- #main -->

  <div id="footer" role="contentinfo">
    <div id="colophon">

Inserté la llamada a wp_nav_menu() junto con el HTML envolvente justo después de <div id="colophon"> en la línea 18, por lo que las líneas 13 a 24 ahora se ven así:

</div><!-- #main -->

<div id="footer" role="contentinfo">
  <div id="colophon">
    <div id="footernav" role="navigation">
      <?php
        wp_nav_menu(array(
          'container_class' => 'menu-footer',
          'theme_location' => 'footer'
        ));
      ?>
    </div>

Nota Elegí llamar al envoltorio footernav y al contenedor interno menu-footer, y seguí el ejemplo de TwentyTen estableciendo role="navigation". Sin embargo, el aspecto más importante del código es 'theme_location' => 'footer', que coincide con nuestra ubicación de tema nombrada en el paso #2.

Todos estos pasos nos dan un menú de pie de página que se ve así:

_{(fuente: mikeschinkel.com)}

6. Estiliza tu Menú

Finalmente, solo necesitamos añadir CSS al archivo style.css de nuestro tema y podemos obtener un menú de pie de página que se vea así:

_{(fuente: mikeschinkel.com)}

El estilo es muy básico ¡así que por favor no juzgues mis terribles habilidades de diseño, ya que no soy diseñador ni nunca he amenazado con serlo! He incluido comentarios en el código CSS que explican por qué usé cada selector y propiedad CSS que utilicé:

#colophon {
  padding-top:6px;        /* Acerca el menú a la línea negra gruesa (TwentyTen tiene 18px) */
}
#footernav {              /* Usa la misma font-family que TwentyTen para los menús */
  font-family: 'Helvetica Neue', Arial, Helvetica, 'Nimbus Sans L', sans-serif;
  font-size:1.1em;        /* Hazlo un poco más grande que el predeterminado */
  padding-bottom:6px;     /* Añade un poco de espacio debajo del menú */
}
#footernav .menu-footer {
  text-align:center;      /* Necesario para centrar el menú */
}
#footernav ul {
  margin:0 auto;          /* También necesario para centrar el menú */
  width:auto;             /* Haz que el menú solo sea tan ancho como sea necesario */
  display:inline;         /* También necesario para mantener el ancho al mínimo */
}
#footernav li {
  display:inline;         /* Haz que el menú sea horizontal en lugar de vertical */
}
#footernav a {
  text-decoration:none;   /* Elimina los subrayados de los enlaces */
  background-color:#ddd;  /* Crea un fondo gris claro para cada opción */
  color:black;            /* Haz que los elementos sean fáciles de ver con texto en negro */
  padding:0.25em 0.5em;   /* Añade espacio alrededor de los elementos para que se muestre el fondo */
  margin:0 0.5em;         /* Añade espacio entre los elementos */
}
#footernav a:hover {
  background-color:black; /* Rodea el elemento del menú bajo el puntero del ratón en negro */
  color:white;            /* Haz que el texto del mismo elemento del menú sea blanco */
}

¡Eso es todo! Ten en cuenta que esta es una herramienta para que un diseñador la use, por lo que tú o quien sea tu diseñador puede implementar menús de prácticamente cualquier manera que desee desde una perspectiva de tema; solo llama a la función wp_nav_menu() haciendo referencia a tus menús y ubicaciones de menú, ¡y estarás listo!