Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Registrar y mostrar menúes

8/13
Recursos

Aportes 8

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

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

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.
*/

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.

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'
));?>

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'
    )
); ?>

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

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ú.

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">