Registrar y mostrar menúes

Comparto mi avance:

En un principio el código de la clase me funcionó pero, al momento de tomar los estilos, estos no se aplicaban.

<code> 
function tig_add_menu(){
    register_nav_menus(array(
        "main-menu" => "Menú Principal"
    ) );
}
add_action( "after_setup_theme","tig_add_menu");

Gracias a la documentación logre resolverlo:

Este era el HTML original

<code> 

<nav>
            <ul class="header__items-container">
                <li><a href="">Personajes</a></li>
                <li><a href="">Gremio</a></li>
                <li><a href="">Tienda de Wiz</a><span class="header__store" >*</span></li>
            </ul>
        </nav>

Este es el código final:

<code> 

        <nav>
            <?php 
                wp_nav_menu( 
                    array(
                        'menu' => 'main-menu',
                        'menu_class' => 'header__items-container',
                        'container' => 'nav'
                    )
                 );
            ?>

Tuve que agregar 2 campos extras super sencillos:
‘menu_class’: permite personalizar la clase que la etiquieta UL va a tener.
‘container’: permite escoger la etiqueta en la que estará contenida la etiqueta UL.

Espero que esto le sirva de algo.

es la pc mas lenta de todos los cursos de Platzi

Así Vamos! Muy Animado! Avanzando cada día un poco más

Por mi parte cree mi propia plantilla desde cero y los problemas que he tenido los he logrado solucionar sin problema

Lo ideal es que añadan la internacionalización y que todo los nombres lo pongan en inglés, luego podrán traducir su theme a español:

function register_yardsales_menus() {
    register_nav_menus( array(
        'main-menu' => __( 'Main Menu', 'yardsales' ),
        'footer-menu' => __( 'Footer Menu', 'yardsales' ),
    ) );
}

add_action( 'after_setup_theme', 'register_yardsales_menus' ); 

No se olviden que en el archivo style.css deben definir el Text Domain de su theme:

/*
Template Name: Yard Sales
Theme URI: wordpress . org/themes/twentytwenty/
Author: Juanito Ortega
Author URI: wordpress . org/
Description: Our default theme for 2020 is designed to take full advantage of the flexibility of the block editor. Organizations and businesses have the ability to create dynamic landing pages with endless layouts using the group and column blocks. The centered content column and fine-tuned typography also makes it perfect for traditional blogs. Complete editor styles give you a good idea of what your content will look like, even before you publish. You can give your site a personal touch by changing the background colors and the accent color in the Customizer. The colors of all elements on your site are automatically calculated based on the colors you pick, ensuring a high, accessible color contrast for your visitors.
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready
Version: 1.0
Requires at least: 5.0
Tested up to: 5.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: www . gnu . org/licenses/gpl-2.0.html
Text Domain: yardsales
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

Menús

Adaptar menús dinámicos creados desde el panel de administración al tema de WordPress

functions.php

function plz_add_menus(){
    register_nav_menus(
        array(
        'menu-principal' => "Menu principal",
        'menu-responsive' => "Menu responsive"
        )
    );
}

add_action("after_setup_theme", "plz_add_menus");

Y remplazar el menú estático

<ul>
  <li class="encabezado__item current"><a href="#">All</a></li>
  <li class="encabezado__item"><a href="#">Clothes</a></li>
  <li class="encabezado__item"><a href="#">Electronics</a></li>
  <li class="encabezado__item"><a href="#">Furniture</a></li>
  <li class="encabezado__item"><a href="#">Toys</a></li>
  <li class="encabezado__item"><a href="#">Others</a></li>
</ul>

en header.php poniendo principal o responsive según corresponda

<?php wp_nav_menu( 
    array(
        "menu" => 'menu-principal'
    )
); ?>

8. Registrar y mostrar menús

Interesante clase donde aprendimos a poder permitir que los menús sean 100% personalizables a través de WP, teniendo como base el menú colocado en el tema.

Comparto el código agregado en functions.php :

add_action("after_setup_theme", "arudope_theme_supports");

function arudope_add_menus(){
    register_nav_menus(
        array(
        'menu-principal' => "Menu principal",
        'menu-responsive' => "Menu responsive"
        )
    );
}

add_action("after_setup_theme", "arudope_add_menus");

Comparto código del header.php que se ha modificado:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>

<head>
    <meta charset="<?php bloginfo("charset") ?>">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Yards Sales</title>
    <?php wp_head(); ?>
</head>

<body>
    <?php wp_body_open(); ?>
    <header class="encabezado">
        <div class="container-fluid gx-5 py-3">
        <div class="row">
                <div class="encabezado__hamburguesa col-2">
                    <a href="#">
                        <img src="<?php echo get_template_directory_uri()?>/assets/img/icon-menu.svg" alt="menu icon">
                    </a>
                </div>
                <div class="enbezado__logo col-5 col-md-2 px-2 px-md-4">
                <?php the_custom_logo(); ?>
                </div>
                <div class="encabezado__menu col-6 col-md-5">
                    <?php wp_nav_menu(
                        array(
                            "menu" => 'menu-principal'
                        )
                        );?>
                </div>
                <div class="encabezado__cart col-5 col-md-1">
                    <a href="sign_in.html" class="encabezado_sign-in">
                        Sign in
                    </a>
                    <a href="#" class="encabezado__link active">
                        <img src="<?php echo get_template_directory_uri();?>/assets/img/header-empty-card.svg" alt="cart">
                    </a>
                </div>
            </div>
            <div class="encabezado__menu-responsive">
            <?php wp_nav_menu(
                        array(
                            "menu" => 'menu-responsive'
                        )
                    ); ?>
            </div>
        </div>
    </header>

    <main class="productos">
        <div class="container-fluid gx-5">

Apuntes

Registrar y Mostrar Menús en WordPress

Los menús son una característica importante en cualquier sitio web y WordPress ofrece un sistema de menús muy flexible y fácil de usar. A continuación, se explican los pasos para registrar y mostrar menús en un tema de WordPress.

add_menus y register_nav_menus

Para registrar un menú en WordPress, se utiliza la función add_menus dentro de la función after_setup_theme.

add_action( 'after_setup_theme', 'my_theme_setup' );

function my_theme_setup() {
    // Registro de menús
    add_theme_support( 'menus' );

    // Registro de ubicaciones de menús
    register_nav_menus( array(
        'primary' => __( 'Menú Principal', 'my-theme' ),
        'secondary' => __( 'Menú Secundario', 'my-theme' ),
    ) );
}

En este ejemplo, se registran dos ubicaciones de menús: primary y secondary. El nombre de la ubicación de menú se utiliza para asignar un menú a esa ubicación en la sección de administración de WordPress.

add_action after_setup_theme

Para asegurarse de que los menús se registren correctamente, es importante utilizar la función add_action para llamar a la función my_theme_setup después de que se configure el tema.

add_action( 'after_setup_theme', 'my_theme_setup' );

wp_nav_menu

Para mostrar un menú en el tema, se utiliza la función wp_nav_menu en el archivo header.php.

<?php wp_nav_menu( array(
    'theme_location' => 'primary',
    'menu_class'     => 'primary-menu',
) ); ?>

En este ejemplo, se muestra el menú asignado a la ubicación primary. El parámetro menu_class se utiliza para asignar una clase CSS al menú, lo que facilita la personalización de la apariencia del menú.

Conclusión

Registrar y mostrar menús en WordPress es una tarea sencilla que se puede realizar utilizando las funciones add_menus, register_nav_menus y wp_nav_menu. Al seguir estos pasos, se puede personalizar fácilmente la navegación del sitio web y mejorar la experiencia del usuario.

A mí no me apareció en el escritorio de wordpress la sección para agregar el menú, pero, cuándo le di, apariencia personalizar, ahí sí me apareció la sección para crear el menú.

Habilitar la sección de menu

function plz_add_menus(){
    register_nav_menus(array(
        'id' => "Menu principal",
        'id-responsive' => "Menu responsive",
    ));
}

Debes remplazar el menu estatico por

<?php wp_nav_menu(
	array("menu" => 'id-menu'
));?>

Resolución del problema del icono del menú hamburguesa 😄