Soporte » WordPress Avanzado » Crear un custom menu

  • jyanez95

    (@jyanez95)


    Buenos días,

    Necesito crear un menú customizado en la home de la página web de un cliente para que en el menú aparezca las colecciones de los productos (categorías).

    Esto lo he podido crear siguiendo una guía de Internet donde me indican que utilice la función: wp_nav_menu y este es el código:

    function category_menu($event) {     
        
        if(is_shop() || is_product_category()){        
            wp_nav_menu(
                    array(
                        'menu' => 'menu_tienda',
                        'container'      => false,
                        'menu_class'     => 'shop-menu',
                        'walker'         => new Walker_Nav_Menu_Dropdown(),
                        'items_wrap'     => '<div class="mobile-menu"><form><select onchange="if (this.value) window.location.href=this.value" class="selection">%3$s</select></form></div>',
                        'after'          => '<span class="plus-minus"></span>',
                        'fallback_cb'    => false,
                    )
            ); 
            
        }
    }
    
    class Walker_Nav_Menu_Dropdown extends Walker_Nav_Menu {
    	function start_lvl(&$output, $depth){
    		$indent = str_repeat("\t", $depth); // don't output children opening tag (<code><ul></code>)
    	}
    
    	function end_lvl(&$output, $depth){
    		$indent = str_repeat("\t", $depth); // don't output children closing tag
    	}
    
    	/**
    	* Start the element output.
    	*
    	* @param  string $output Passed by reference. Used to append additional content.
    	* @param  object $item   Menu item data object.
    	* @param  int $depth     Depth of menu item. May be used for padding.
    	* @param  array $args    Additional strings.
    	* @return void
    	*/
    	function start_el(&$output, $item, $depth, $args) {
                    
                $category = get_queried_object();
                /*echo $category->term_id;
                
                echo "<pre>";
                var_dump($item);
                echo "</pre>";
                //die;*/
                $selected = '';
                if($category->term_id == $item->object_id){
                    $selected = 'selected';
                }
     		$url = '#' !== $item->url ? $item->url : '';
     		$output .= '<option '.$selected.' value="' . $url . '">' . $item->title;
    	}	
    
    	function end_el(&$output, $item, $depth){
    		$output .= "</option>\n"; // replace closing </li> with the option tag
    	}
    }

    Este menú es el que aparece justo en el desplegable debajo del logo [colecciones]

    El problema que tengo es que el desplegable genera un <select> donde no le puedo dar estilo a las <option> y no sé como cambiar esto para que en vez de ser un <select>, sea una lista <ul><li> para darle todo el estilo que me solicita el cliente.

    Por favor, tenéis alguna idea de como podría modificarlo para transformar este select en una lista? o si hay otra manera de crear este menú?

    Muchas gracias

    • Este debate fue modificado hace 4 meses por jyanez95.
    • Este debate fue modificado hace 4 meses por jyanez95.

    La página con la que necesito ayuda: [accede para ver el enlace]

Viendo 5 respuestas - de la 1 a la 5 (de un total de 5)
  • Moderador LGrusin

    (@lgrusin)

    Según parece es un formulario para móviles. Prueba sin el argumento 'items_wrap'

    Aquí tienes más info
    wp_nav_menu

    Buenos días @lgrusin

    Muchas gracias por tu respuesta y lamento la demora en responder, pero lo he estado probando lo que me has indicado.

    He conseguido transformarlo en una lista, pero sabrías como puedo hacer que sea un desplegable (dropdown)?

    Con CSS he visto diferentes guias que se puede conseguir en escritorio, pero en versión movil el efecto «hover» no funciona y no sé muy bien como se podría hacer… 🙁

    Nuevamente gracias y disculpa por la tardanza

    Moderador LGrusin

    (@lgrusin)

    Pregunto, ¿no es más fácil crear un menú que contenga las categorías de los productos? Te ahorras poner todo ese código y el menú será el que venga con el tema en la barra superior.

    Hola @lgrusin

    Sí, pero el cliente me pide que en el centro haya un menú desplegable con las categorías de los productos para que te llevé a su página de categoría.

    Es por ello, que al principio lo conseguí, pero utilizando el select, pero a este select y sus option no le puedo dar estilo porque los navegadores no lo permiten.

    Entonces, pensé en pasar esto a una lista siguiendo tu respuesta, pero claro, ahora al hacerlo mobile, no va a funcionar correctamente.

    Y ahora mismo no sé cómo hacer este requisito que me pide el cliente, ya que es lo único que me queda pendiente. 🙁

    Gracias.

    Moderador LGrusin

    (@lgrusin)

    Mira si aquí encuentras más información
    https://www.w3schools.com/css/css_navbar_horizontal.asp

Viendo 5 respuestas - de la 1 a la 5 (de un total de 5)
  • Debes estar registrado para responder a este debate.