Generando el menú

Así está quedando mi proyecto. Estoy haciendo una copia del portal del rolling stones, ya que este está hecho en WordPress, también utiliza React.js.

Todos los argumentos de wp_nav_menu

Espero les sea de utilidad, recuerden que el respeto de estándares es fundamental 😃

a,h1,h2,h3,h4,li,p,span,ul{
    font-family:Montserrat
}

.attachment-large{
    max-width:100%;
    height:auto!important
}

h1{
    margin:50px 0;
    font-weight: 900;
}

ul{
    margin-bottom: 0px;
}

header{
    background-color:#1c3643
}

header nav li{
    list-style:none;
    display:inline-block;
    padding:0 15px
}

header nav li a{
    color:#fff;
    text-transform:uppercase
}

header nav li a:hover{
    color:#fff
}

footer{
    background-color:#1c3643;
    padding:10px 0
}

footer{
    color:white
}

footer p{
    margin:0;
    color:#fff
}

.lista-productos h2{
    font-weight:900
}

.lista-productos h4{
    font-weight:400
}

.lista-productos h4 a{
    color:#000
}

No entendí, Al registrar puso el nombre “Menú principal” pero al actualizar en el navegador solo apareció el nombre “Menú” entre los items de Apariencia. Que es lo que hace exactamente register_nav_menu ?

Cómo funciona el sistema de grilla de Bootstrap

IMPORTANTE!
si realizaste el ejercicio anterior (Crear un tema hijo) recuerda que para continuar con el curso debes volver a activar el tema Platzigifts, de lo contrario el menú no se te va a visualizar.

no me aparece la opcion menu en el panel, alguien sabe porque,tengo el mismo codigo y no lo entiendo

¿Se le puede agregar una clase a los elementos <li>?

Ahora mismo el dom quedaría asi:

nav > div > ul > li's

Creo que quedaría más limpio si utilizasemos la propiedad container de la funcion wp_nav_menu que nos permite modificar el elemento que wrappea al ul

<?php
    wp_nav_menu([
        'theme_location'   => 'top_menu',
        'menu_class'       => 'menu-principal',
        'container'        => 'nav',
        'container_class'  => 'container_menu',
    ]);
?>

El markup resultaría en:

nav > ul > li's

este profesor no me gusta

Por si le pasa a alguien lo mismo que a mí, esta fue la forma como me funcionó la inserción del menú. Tengo instalada la versión de WordPress 6.0.2.
register_nav_menu( ‘top_menu’, ‘Menú Principal’ );

Paso a paso aprendiendo

Agregar al style.css

a,h1,h2,h3,h4,li,p,span,ul{font-family:Montserrat}.attachment-large{max-width:100%;height:auto!important}

h1{margin:50px 0;font-weight: 900;}

ul{margin-bottom: 0px;}

header{background-color:#1c3643}

header nav li{list-style:none;display:inline-block;padding:0 15px}

header nav li a{color:#fff;text-transform:uppercase}

header nav li a:hover{color:#fff}

footer{background-color:#1c3643;padding:10px 0}

footer{color:white}

footer p{margin:0;color:#fff}.lista-productos 

h2{font-weight:900}.lista-productos 

h4{font-weight:400}.lista-productos 

h4 a{color:#000}

agregar en functions.php debajo de add_theme_support('title-tag');:

register_nav_menus( 
        array (
            'top_menu' => 'Menu Principal'
        )
    );

Actualizar el administrador y entrar en el menu
Crear menu
Añadir elementos
Activar check de Menu Principal
Guardar

Agregar al header.php

 <div class="col-8">
                     <nav>
                        <?php wp_nav_menu (
                             array(
                                 'theme_location' => 'top_menu',
                                 'menu_class' => 'menu-principal',
                                 'container_class' => 'container-menu',
                            )
                        ); 
                        ?>
                     </nav>
                 </div>

https://gwst.eu

wp_nav_menu() la función para registrar una ubicación de menú

Es una opinión. Considero que al utilizar bootstrap como soporte en la creación del theme deberían explicar el uso de navwalker para el uso de la navegación.

Faltó saber algo así como: “centrar el menú” y colocar efectos On mouse over,

¿Tengo una duda y si quiero agregar una clase a la etiqueta <a> del menu?
¿Como lograria eso con wp_nav_menu?

https://gwst.eu

Hola
Muchachos ya tengo la plantilla de BeTheme pero al momento de subir unos de los temas me sale este error.

Hola alguien tiene el codigo comentado?

Excelente clase profe, gracias.

Para manejar menús en nuestro tema primero debemos registrarlos, lo cual debemos hacer en alguna función que se esté ejecutando en el archivo “functions.php” y luego debemos usarlos en los archivos php que son de renderizado (EJ: header.php).

Para registrar Menús debemos pasarle un arreglo. Las llaves serán los códigos con los que reconoceremos al menú (localización en el tema), y como valor pondremos el nombre como queremos que se le muestre al usuario (Apariencia->Menús->GestionarLugares):

register_nav_menus([
‘codigo_menu_1’ => ‘Mi menú 1’,
‘menu_superior’ => ‘Mi menú superior’
]);

Para renderizar un menú debemos pasarle la localización o código con el que se reconoce el menú, y las clases CSS que se van a usar. Con el siguiente código se renderiza el menú:
wp_nav_menu([
‘theme_location’ => ‘codigo_menu_1’,
‘menu_class’ => ‘menu-principal’,
‘container_class’ => ‘container-menu’
]);

Para renderizar construye un elemento ‘div’ con la clase que pasamos como ‘container_class’ (‘container-menu’), y dentro una lista ‘ul’ con la clase que pasamos como ‘menu_class’ (‘menu-principal’) así:
<div class=“container-menu”>
<ul class=“menu-principal”>
<li>
<a href="#">Inicio</a>
</li>
</ul>
</div>

A mí me aparece:
“Su tema no admite menús de forma nativa, pero puede usarlos en las barras laterales agregando un widget de “Menú de navegación” en la pantalla”

Eh visto este curso como 10 veces y más no le entiendo, je.

Lo malo es que el que sigue se basa en este, pero bueno a verlo otras 10 veces más para entender como poner un menu y todo lo de mas.

https://paulaandreacode.com/

arrhe!!
😃

Hola a todos,

No se por que me paso pero al crear el menu me aparecian mas opciones como se ve en el recuadro rojo, cree el menu con la opcion de menu horizontal de escritorio, y posteriormente se habilita una ventana llamada Gestionar ubucaciones (Recuadro azul). en esta ventana de da la opcion de colocar tu menu como principal.

En general me funciono, aunque no se si lo estoy haciendo de la mejor forma. Si pueden retroalimentarme al respecto les agradeceria.

no entiendo la ventaja de worpress sobre tecnologias de front, ew WP y php!

https://gwst.eu

excelente esta parte del menú muy fácil y intuitiva

No me genera el menú y lo hice igual, ayuda por favor:
<?php

function init_template(){
add_theme_support( 'post-thumbnails ');
add_theme_support( 'title-tag ');

register_nav_menus(
    array(
        'top_menu' => 'Menú Principal'
    )
);

}

add_action( 'after_setup_theme ', 'init_template ');

function assets(){
wp_register_style(‘bootstrap’, ‘https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css’, ‘’, ‘4.4.1’, ‘all’);
wp_register_style(‘montserrat’, ‘https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet’, ‘’, ‘1.0’, ‘all’);

wp_enqueue_style('estilos', get_stylesheet_uri(), array('bootstrap', 'montserrat'), '1.1', 'all');
wp_register_script('popper', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js', '', '1.16.0', true);
wp_enqueue_script('bootstraps', 'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js', array('jquery', 'popper'), '4.4.1', true);

wp_enqueue_script('custom', get_template_directory_uri(). '/assets/js/custom.js', '', '1.0', true);

}

add_action(‘wp_enqueue_scripts’, ‘assets’);

Cristian: “Te invito que te PASES por la carrera de frontend, para aprender más al respecto”

… Han pasado 84 años…

Chicos hice todo como se indicó en la clase y no me aparecé el menú, al contrario me aparece el menú del curso pasado que hice de wordpress ¿Alguién sabe por qué pasa esto?

Incluso viendo esta situación borre el menú del curso pasado desde Personalizar->Menus y sigue apareciendo.

Gracias, y Saludos.

Gracias por la clase. Perfectamente claro

https://gwst.eu

https://gwst.eu

https://gwst.eu

https://gwst.eu

https://gwst.eu

https://gwst.eu

https://gwst.eu

https://gwst.eu

https://gwst.eu