¿Dónde se define la ubicación del tema para el menú principal en una plantilla de WordPress?

Question

¿Dónde se define la ubicación del tema para el menú principal en una plantilla de WordPress?

18 ene 2014, 11:14:15

Vistas: 26.9K

Votos: 1

Soy bastante nuevo en WordPress (vengo de Joomla) y tengo la siguiente duda relacionada con la Ubicación del Tema del menú principal.

Por ejemplo, usando el tema preinstalado Twenty Twelve, si en el backend voy a: Apariencia ---> Menús ---> Administrar Ubicación solo puedo asignar mi menú-principal a una ubicación del tema específica llamada Menú Principal.

Creo que esta área está en el archivo header.php del tema Twenty Twelve (porque mi menú principal se muestra en el encabezado de la página) pero no puedo encontrarla, este es el contenido de header.php:

<?php
/**
 * La plantilla del Encabezado para nuestro tema
 *
 * Muestra toda la sección <head> y todo hasta <div id="main">
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php // Carga el archivo JavaScript HTML5 para añadir soporte para elementos HTML5 en versiones antiguas de IE. ?>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
    <header id="masthead" class="site-header" role="banner">
        <hgroup>
            <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
            <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
        </hgroup>

        <nav id="site-navigation" class="main-navigation" role="navigation">
            <h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
            <a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Saltar al contenido', 'twentytwelve' ); ?>"><?php _e( 'Saltar al contenido', 'twentytwelve' ); ?></a>
            <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
        </nav><!-- #site-navigation -->

        <?php if ( get_header_image() ) : ?>
        <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php header_image(); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
        <?php endif; ?>
    </header><!-- #masthead -->

    <div id="main" class="wrapper">

¿Dónde está este Menú Principal o cómo está definido en el tema?

Gracias

Andrea

AndreaNobili

878

desarrollo de temas menús temas css html

Comentarios

Ejemplo de cómo añadir una nueva ubicación de menú personalizado en tu tema: http://goo.gl/TbxqDy

Suresh Kamrushi

30 sept 2015 08:25:22

Todas las respuestas a la pregunta

Comentarios

¡¡¡Explicación perfecta!!!

AndreaNobili

18 ene 2014 13:01:37

También puedes agregar un menú adicional desde tu archivo functions.php del tema hijo sin modificar ningún archivo del tema padre.

add_action( 'wp_head', 'add_extra_nav' ); 

function add_extra_nav() {

wp_nav_menu( array( 

'theme_location' => 'extra-menu', 

'container_class' => 'nav-menu' ) );

}

Simplemente cambia la clase del contenedor por la misma que usa tu tema y envuelve la función en una clase existente que tu tema utiliza para un menú primario o secundario, así no necesitarás agregar CSS adicional. Normalmente puedes encontrar esto en el archivo header.php.

Cambia el hook wp_head por cualquier otro hook específico de WordPress o del tema.

Brad Dalton

6.97K

21 ene 2014 17:39:39

Steve 1.75K · Accepted Answer · 2014-01-18T12:36:16Z

Las ubicaciones del menú se definen en functions.php

Puedes leer el codex para obtener más información sobre cómo definir ubicaciones de menú en functions.php

Registrar Menús

Primero, en el functions.php de tu tema, necesitas escribir una función para registrar los nombres de tus menús. (Así es como aparecerán en la pantalla de administración Apariencia -> Menús). Como ejemplo, este menú aparecería en el cuadro "Ubicaciones del Tema" como "Menú de Cabecera".

function register_my_menu() {
  register_nav_menu('header-menu',__( 'Menú de Cabecera' ));
}
add_action( 'init', 'register_my_menu' );

Y esto haría aparecer dos opciones de menú, menú de cabecera y menú extra -

function register_my_menus() {
  register_nav_menus(
    array(
      'header-menu' => __( 'Menú de Cabecera' ),
      'extra-menu' => __( 'Menú Extra' )
    )
  );
}
add_action( 'init', 'register_my_menus' );

Mostrar Menús en el Tema

Una vez que hayas hecho eso, tu tema estará casi listo. El último paso de preparación es decirle al tema dónde quieres que aparezcan los menús. Haces esto en el archivo de tema correspondiente. Por ejemplo, podríamos querer que nuestro menú de cabecera esté en header.php. Así que abre ese archivo en el editor de temas y decide dónde quieres colocar tu menú. El código a usar aquí es wp_nav_menu que necesitaremos una vez por cada ubicación de menú. Entonces, añade este código -

<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>

Todo lo que necesitas asegurar es que theme_location apunte al nombre que proporcionaste para tu menú en el código de functions.php anterior. (Nota que se usa header-menu aquí en lugar de Menú de Cabecera sin guión. header-menu es el nombre que el código entiende, Menú de Cabecera es la versión legible para humanos que ves en la página de administración).

Para completar el código, puedes colocar tu menú extra en otro lugar. Tal vez quieras un menú en una de tus páginas, por ejemplo, e incluso podrías querer que esté adornado un poco con un DIV contenedor de cierta clase -

wp_nav_menu( array( 'theme_location' => 'extra-menu', 'container_class' => 'my_extra_menu_class' ) );

Así que pondrías lo anterior en tu plantilla de Página, y no solo aparecería el menú donde lo colocaste, sino que estaría estilizado como my_extra_menu_class para que puedas trabajar con eso en CSS.