Registrar y mostrar menúes

Clase 8 de 13 • Curso de Creación de Temas para WordPress

Josué Eduardo Apén Bal

student•

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.

Henry Jeffersson Salinas Arenas

student•

es la pc mas lenta de todos los cursos de Platzi

César Luis Amundaray Rodríguez

student•

Jeje

Eleven Estudio

student•

hehe, normal en wordpress...

Diego Andrés González Díaz

student•

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

Juanito Ortega Guzmán

student•

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

Gustavo Amarista

student•

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

tiken .

student•

No les ha sucedido que al cambiar el menú que crearon con HTML y CSS, al añadir el menú que podemos crear y controlar desde la interfaz de Wordpress, este, ha perdido los estilos que teníamos antes ?

Cristian Ramanzin

teacher•

¡Hola, Francisco! Habría que ver si es por el nombre del menú, ya que eso condiciona la clase de css de tu menú, ¿qué parte del menú perdió los estilos ?

Julián Andrés Loaiza Ospina

student•

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

Aldo Miguel Ortiz Parodi

student•

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

Rodrigo Alles

student•

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.

Madelein Espinosa Ramírez

student•

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

Alberto Medina

student•

Me pasaba la mismo. Leí el código que escribimos parte por parte y me di cuenta que en el "add_action" para incorporar el menú el "after_setup_theme" tenia la S mayúsculas. Cambiándola, me apareció la sección de Menú en Apariencias. Al parecer todo tiene que estar en minúsculas. Saludos !!

Jesús Velázquez Jiménez

student•

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

tiken .

student•

Saludos Jesús, muchas gracias por tu aporte. A mi me ha sucedido, que al reemplazar mi menú por el de wordpress, este, ha perdido los estilos que tenía en mi menú antiguo.

Ezequiel Piñero

student•

@Francisco86 Eso pasa porque tu CSS tiene clases distintas a las que añade Wordpress.

Jesus Bello

student•

Luego de agregar el menu pierde todos los estilos de bootstrap, alquien sabe como puedo ajustarlo con sus estilos?

Gino Alejandro Limo Garcia

student•

Todo correcto hasta el momento de activar el menú hamburguesa, al darle click no muestra el menú, pero si voy a los elementos en la devtools, puedo quitar el atributo "hidden" del menú y si lo muestra, que se hace en este caso?

Carlos Rubén Díaz Gutiérrez

student•

Revisa que hayas agregado correctamente la hoja de JavaScript a la función plz_assets.

Yerinson Alberto Hernández Gómez

student•

cada día se aprende algo buen profe

Mateo Lopez

student•

Hola tengo un problema quiero que aparezca y desaparezca el menu de navegacion dependiendo si es escritorio o movil el problema es que siguen apareciendo ambos... intente con los medios del curso pero sigue sin funcionar alguna idea de como solucionarlo ? Agradezco cualquier aporte !

<!DOCTYPE html>
<html <?php language_attributes();?>>
<head>
    <meta charset="<?php bloginfo("charset"); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <?php wp_head() ?>
</head>
<body>
<header>
    <div class="container">
        <div class="row align-items-center">
            <div class="col-3">
                <span class="dashicons dashicons-menu" data-toggle="modal" data-target="#myModalLeft"></span>
            </div>
            <div id="myModalLeft" class="modal fade modal-left" tabindex="-1" role="dialog">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span class="dashicons dashicons-no icon-nav"></span>
                        </button>
                        <div class="modal-body">
                                <?php wp_nav_menu(
                                    array(
                                        'menu_class' => 'menu_responsive'
                                    )
                                ); 
                                ?>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
            <div id="logoContent" class="col-6">
                <?php the_custom_logo()?>
            </div>
            <div class="col-3">
                <?php wp_nav_menu(
                    array(
                        "menu" => 'top_menu'
                    )
                );
                ?>
            </div>
            <div class="col-1">
                <span class="dashicons dashicons-search" data-toggle="modal" data-target="#myModalTop"></span>
            </div>
            <div id="myModalTop" class="modal fade modal-top" tabindex="-1" role="dialog">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <form action="">
                                <span class="dashicons dashicons-search"></span>
                                <input type="text">
                            </form>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span class="dashicons dashicons-no"></span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <h2>este es el buscador</h2>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-1">
                <span class="dashicons dashicons-cart" data-toggle="modal" data-target="#myModalRight"></span>
            </div>
            <div id="myModalRight" class="modal fade modal-right" tabindex="-1" role="dialog">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span class="dashicons dashicons-no"></span>
                            </button>
                        <div class="modal-body">
                            <h2>hola mundo</h2>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

MIGUEL ANGEL GAONA MENDEZ

student•

tengo una pregunta ya puse mis menús pero n0 me apaece la página de inicio y cuando quiero ver mis menus no se visualizan, h seguido el paso a paso y no me funciona, como lo puedo solucionar

Walter Francisco Cherec Castro

student•

¿Como agregar un elemento html, como hijo del nav que genera la función wp_nav_menu?

<nav>
	// aqui un elemnto html
	<ul></ul>
</nav>

Daniel Eduardo Salmerón Alvarado

student•

Cuando se agrega el menú hamburguesa como se muestra al final de la clase, en mi caso, este no cumple su funcionalidad de hacer aparecer y desaparecer el menú (como se muestra en el video) ¿Alguien sabe por qué? 🤔

Daniel Eduardo Salmerón Alvarado

student•

Hola, yo lo logré solucionar, el problema era que tenía un pequeño typo en la función que ejecuta el JavaScript del tema:

// JavaScript
    wp_enqueue_script(
        "yardsale-js",
get_template_directory_uri()."/assets/js/script.js"
    );

Edgar Mauricio Bello Lamprea

student•

![](

Tengo un problema sigo al pie de la letra pero en el administrador cuando intento crear un menu aparece el siguiente error

Christian Magro

student•

Hola equipo, quedé con dudas sobre como poder editar cada una de las configuraciones personalizadas del menú. He visto la documentación de Wordpress https://developer.wordpress.org/reference/functions/wp_nav_menu/ ; pero me cuesta identificar cada uno de esos parámetros basándose en una plantilla tal como lo hemos estado realizando. Si alguien puede compartir una referencia clara ( con peras y manzanas )paso a paso sobre ésta configuración, les estaría muy agradecido. Desde ya muchas gracias, saludos

Christian Magro

student•

Estoy tratando de implementar el wap_nav_menu a éste menú

   <nav>
    <ul class="main-menu-nav">
      <li><a href="index.php" class="orange"><i class="fa fa-home fa-fw"></i>&nbsp; Inicio</a></li>
      <!--<li><a href="#" class="yellow"><i class="fa fa-book fa-fw front"></i>About &nbsp; </a></li> -->
      <li><a href="cursos.php" class="green"><i class="fa fa-folder fa-fw"></i>&nbsp; Cursos</a></li>
      <li><a href="contacto.php" class="purple"><i class="fa fa-envelope fa-fw"></i>&nbsp; Contacto</a></li>
      <li><a href="#" class="red"><i class="fa fa-users fa-fw"></i>&nbsp; Quienes somos</a></li>
    </ul>
    </nav>