Creación de varios menús al utilizar el Tema TwentyTen?

Question

Como llegar varios menús en TwentyTen tema?

Answer 1

Hay 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 (de los cuales algunos de estos pasos se puede hacer fuera de servicio) . Además, voy a recomendar altamente crear un tema hijo basándose en TwentyTen en lugar de modificar directamente:

1. Crear un Tema Niño basado en el tema Twenty Ten.

2. Registrar un Temática de la localización en el archivo functions.php de su tema.

3. Crear un nuevo menú utilizando la consola de administración de su sitio web.

4. Asociar el nuevo menú y la Temática de la localización utilizando la consola de administración.

5. wp_nav_menu() de llamadas en el archivo de plantilla de su tema en el que desea que aparezca el menú.

6. Su estilo de menú para que se integra visualmente con su sitio.

Así que seamos a la obra!

1. Crear un Tema Niño

Crear un tema infantil es extremadamente simple y le da la ventaja de ser capaz de actualizar TwentyTen si hay una nueva versión sale sin tener que preocuparse de no perder sus cambios.

Sí, hay una pequeña posibilidad de cambios no serán compatibles con la nueva versión, y si haces copias de archivos TwentyTen y modificarlos para su tema de niño que necesita para volver a aplicar esos cambios, pero eso es mucho mejor de perder sus cambios cuando se actualiza el tema.

Sin embargo, en lugar de duplicar mi respuesta a otra pregunta donde sugerí temas niño Voy a señalarle que hay:

• Personalización de un tema de WordPress sin cambiar ¿eso? (Temas de Uso niño)

Para los ejemplos en el resto de esta respuesta que voy a llamar el tema secundario "Himanshu" .

2. El registro de un Temática de la localización

Registro de un lugar tema es muy sencillo de utilizar la función register_nav_menus() (sí, habría sido realmente agradable si habían llamado esa función register_nav_menu_locations(), pero estoy divagando ...)

Voy a crear un menú "pie de página" para este ejemplo.

En mi ejemplo previo aviso cómo me refiero 'primary' en un comentario; Yo que lo que verá lo que la ubicación del menú de navegación por defecto se llama y que usted no tiene que definir por sí mismo. También tenga en cuenta que solía función de traducción __() y especificado el nombre del tema niño como el dominio de la traducción.

Si está utilizando un tema niño necesita crear un archivo functions.php en su tema para albergar esta función, pero si está modificando un tema que acaba de encontrar functions.php y añadirlo al final:

register_nav_menus(array(
  //'primary' => __('Primary Menu Area','himanshu'), ==> Primary defined by default
  'footer'  => __('Footer Menu Area','himanshu'),
));

Si está escribiendo código para su propio tema y no es necesario distribuirla a otros o preocupación acerca de traducciones sólo se puede hacer esto:

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

3. Crear un nuevo menú

A continuación vamos a crear el menú de pie de página se encuentra navegando a la Menú del Apariencia menú de la consola de administración. Haga clic en el "+" para agregar un menú, escriba el nombre de su menú y haga clic en "Crear menú"

_{(fuente: mikeschinkel.com )}

Nota: que con frecuencia se le nombre Su menú el mismo que el nombre de su lugar de menú, pero cuando no es necesario y WordPress trata los menús y sus ubicaciones de menú como sSeparadas entidades .

Asegúrese de añadir algunas opciones a su menú o será de poca utilidad. Seleccione las opciones que necesite utilizando la consola de administración, agregarlos a su menú y luego guardar el (en mi pantalla que sólo muestran la selección de "Páginas" para las opciones de menú, pero se puede mezclar y combinar lo que cada vez los tipos de opciones de menú de WordPress ofrece)

_{(fuente: mikeschinkel.com )}

4. Asociar el nuevo menú y la Temática de la localización

La asociación de su nuevo menú con su ubicación tema deseado es fácil, sólo tiene que utilizar la consola de administración de WordPress':

_{(fuente: mikeschinkel.com )}

5. wp_nav_menu() de llamadas en el archivo de plantilla

Ahora tenemos que volver la cabeza a código. Hice una copia de footer.php del tema TwentyTen y copié en el directorio "Himanshu" tema. Esto es lo que las primeras 18 líneas se ven como:

<?php
/**
 * The template for displaying the footer.
 *
 * Contains the closing of the id=main div and all content
 * after.  Calls sidebar-footer.php for bottom widgets.
 *
 * @package WordPress
 * @subpackage Himanshu (based on Twenty Ten)
 * @since Twenty Ten 1.0
 */
?>
  </div><!-- #main -->

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

inserta la llamada a wp_nav_menu() junto con la envoltura HTML justo después <div id="colophon"> en la línea 18 de manera thru 13 líneas de 24 Ahora el siguiente aspecto:

</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: he elegido para llamar a la footernav envoltura y el recipiente interior menu-footer y he seguido el ejemplo de TwentyTen y role="navigation" conjunto. Sin embargo, el aspecto más importante del código es 'theme_location' => 'footer' , que coincide con nuestra ubicación tema llamado en el paso # 2.

Todas estas medidas nos da un menú de pie de página que tiene el siguiente aspecto:

_{(fuente: mikeschinkel.com )}

6. Su estilo de menú

Finalmente, sólo tiene que añadir CSS para style.css archivo de nuestro tema y podemos conseguir un menú de pie de página que se ve así:

_{(fuente: mikeschinkel.com )}

El estilo es muy básico así que por favor NO toque mis conocimientos de diseño terribles en mi contra que a mí no un diseñador ni nunca he amenazado a ser uno! he incluido comentarios en el código CSS explicar por qué he usado cada selector y CSS propiedad que lo hice:

#colophon {
  padding-top:6px;        /* Move menu closer to thick black line (TwentyTen has 18px) */
}
#footernav {              /* Use same font-family as TwentyTen does for menus */
  font-family: 'Helvetica Neue', Arial, Helvetica, 'Nimbus Sans L', sans-serif;
  font-size:1.1em;        /* Make a little bigger than default */
  padding-bottom:6px;     /* Put some breathing room under the menu */
}
#footernav .menu-footer {
  text-align:center;      /* Needed to center the menu */
}
#footernav ul {
  margin:0 auto;          /* Also needed to center the menu */
  width:auto;             /* Make menu only as wide as needs to be */
  display:inline;         /* Also needed to keep width to a minumum */
}
#footernav li {
  display:inline;         /* Make menu horizontal instead of veritcal */
}
#footernav a {
  text-decoration:none;   /* Remove underlines from links */
  background-color:#ddd;  /* Create a light grey background for each option */
  color:black;            /* Make the items easy to see with text in black */
  padding:0.25em 0.5em;   /* Add space around the items for the background to display*/
  margin:0 0.5em;         /* Add space between the items */
}
#footernav a:hover {
  background-color:black; /* Surround the menu item under the mouse pointer in black */
  color:white;            /* Make the text for the same menu item be white */
}

Eso es todo! Ten en cuenta que esta es una herramienta para un diseñador para su uso por lo que o quien sea su diseñador se puede implementar menús usando esto en prácticamente cualquier forma que te gusta de un tema perspectiva; acaba de llamar a la función wp_nav_menu() referencia a sus menús y ubicaciones de menú y usted es bueno ir!