No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Registrar y mostrar men煤es

8/13
Recursos

Aportes 11

Preguntas 10

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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:
鈥榤enu_class鈥: permite personalizar la clase que la etiquieta UL va a tener.
鈥榗ontainer鈥: 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.
*/

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

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

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

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.

Resoluci贸n del problema del icono del men煤 hamburguesa 馃槃