Registrar y mostrar menúes
Clase 8 de 13 • Curso de Creación de Temas para WordPress
Contenido del curso
Josué Eduardo Apén Bal
student•
hace 4 años
Clase 8 de 13 • Curso de Creación de Temas para WordPress
Contenido del curso
Josué Eduardo Apén Bal
Henry Jeffersson Salinas Arenas
César Luis Amundaray Rodríguez
Eleven Estudio
Juanito Ortega Guzmán
Diego Andrés González Díaz
Gustavo Amarista
tiken .
Cristian Ramanzin
Julián Andrés Loaiza Ospina
Aldo Miguel Ortiz Parodi
Rodrigo Alles
Madelein Espinosa Ramírez
Alberto Medina
Jesús Velázquez Jiménez
tiken .
Ezequiel Piñero
Jesus Bello
Gino Alejandro Limo Garcia
Carlos Rubén Díaz Gutiérrez
Yerinson Alberto Hernández Gómez
Mateo Lopez
MIGUEL ANGEL GAONA MENDEZ
Walter Francisco Cherec Castro
Daniel Eduardo Salmerón Alvarado
Daniel Eduardo Salmerón Alvarado
Edgar Mauricio Bello Lamprea
Christian Magro
Christian Magro
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
Jeje
hehe, normal en wordpress...
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. */
Por mi parte cree mi propia plantilla desde cero y los problemas que he tenido los he logrado solucionar sin problema
Así Vamos! Muy Animado! Avanzando cada día un poco más
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 ?
¡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 ?
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ú.
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 !!
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' ));?>
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.
@Francisco86 Eso pasa porque tu CSS tiene clases distintas a las que añade Wordpress.
Luego de agregar el menu pierde todos los estilos de bootstrap, alquien sabe como puedo ajustarlo con sus estilos?
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?
Revisa que hayas agregado correctamente la hoja de JavaScript a la función plz_assets.
cada día se aprende algo buen profe
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>
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
¿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>
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é? 🤔
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" );
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
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> Inicio</a></li> <!--<li><a href="#" class="yellow"><i class="fa fa-book fa-fw front"></i>About </a></li> --> <li><a href="cursos.php" class="green"><i class="fa fa-folder fa-fw"></i> Cursos</a></li> <li><a href="contacto.php" class="purple"><i class="fa fa-envelope fa-fw"></i> Contacto</a></li> <li><a href="#" class="red"><i class="fa fa-users fa-fw"></i> Quienes somos</a></li> </ul> </nav>