Template Wordpress - Come aggiungere classe al tag li se esiste un sottomenu

16 feb 2015, 13:38:33
Visualizzazioni: 18.3K
Voti: 0

Ad esempio voglio creare questo menu:

<div class="menu_wrap">
 <ul class="nav sf-menu">
  <li class="sub-menu"><a href="">Menu Principale 1</a>
    <ul>
        <li><a href=""><span>-</span>Sottomenu 1</a></li>
        <li><a href=""><span>-</span>Sottomenu 2</a></li>
    </ul>
  </li>
  <li class="sub-menu"><a href="">Menu Principale 2</a>
    <ul>
        <li><a href=""><span>-</span>Sottomenu 1</a></li>
        <li><a href=""><span>-</span>Sottomenu 2</a></li>
    </ul>
  </li>
  <li><a href="">Menu Principale 3 senza sottomenu</a></li>
</ul>

come aggiungere class="sub-menu" nel tag li che ha un sottomenu:

<li class="sub-menu"><a href="">Menu Principale 1</a>

se non esiste echo li senza class="sub-menu":

<li><a href="">Menu Principale 3 senza sottomenu</a></li>

ho questo codice in functions.php:

//Aggiunge i Menu
    add_theme_support( 'menus' );
    register_nav_menus(
            array(
                'mainmenu' => 'Menu Principale'
            )
        );
    function dtuts_main_nav() {
        // mostra il menu wp3 se disponibile
        wp_nav_menu(array(
            'theme_location'  => 'mainmenu',
            'menu'            => 'mainmenu',
            'container'       => 'div',
            'container_class' => 'menu_wrap',
            'menu_class'      => 'nav sf-menu',
            'echo'            => true,
            'items_wrap'      => '<ul class="%2$s">%3$s</ul>',
            'depth'           => 1,
            'walker'          => new themeslug_walker_nav_menu
        ));
    }

Non riesco a scrivere la classe themeslug_walker_nav_menu, per favore aiutami.

1
Commenti

Puoi utilizzare jQuery (javascript).

Mayeenul Islam Mayeenul Islam
16 feb 2015 13:43:05
Tutte le risposte alla domanda 1
4

Questo è il codice che sto utilizzando, è un custom nav walker per BootStrap ma potresti facilmente adattarlo alle tue esigenze. A proposito, potresti copiare e incollare il mio nav walker e assicurati di cambiare questa riga:

$class_names .= ' dropdown';

in

$class_names .= ' sub-menu';

Spero che questo ti sia d'aiuto.

/**
 * Custom Bootstrap Nav Walker
 */

class macho_bootstrap_walker extends Walker_Nav_Menu
{

/**
 * @see Walker::start_lvl()
 * @since 3.0.0
 *
 * @param string $output Passato per riferimento. Usato per aggiungere contenuto aggiuntivo.
 * @param int $depth Profondità della pagina. Usato per il padding.
 */
public function start_lvl(&$output, $depth = 0, $args = array())
{
    $indent = str_repeat("\t", $depth);
    $output .= "\n$indent<ul role=\"menu\" class=\" dropdown-menu\">\n";
}

/**
 * @see Walker::start_el()
 * @since 3.0.0
 *
 * @param string $output Passato per riferimento. Usato per aggiungere contenuto aggiuntivo.
 * @param object $item Oggetto dati dell'elemento del menu.
 * @param int $depth Profondità dell'elemento del menu. Usato per il padding.
 * @param int $current_page ID dell'elemento del menu.
 * @param object $args
 */
public function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0)
{
    $indent = ($depth) ? str_repeat("\t", $depth) : '';

    /**
     * Divisori, Intestazioni o Disabilitati
     * =============================
     * Determina se l'elemento è un Divisore, Intestazione, Disabilitato o un normale
     * elemento del menu. Per prevenire errori usiamo la funzione strcasecmp() per fare un
     * confronto che non è case sensitive. La funzione strcasecmp() restituisce
     * 0 se le stringhe sono uguali.
     */
    if (strcasecmp($item->attr_title, 'divider') == 0 && $depth === 1) {
        $output .= $indent . '<li role="presentation" class="divider">';
    } else if (strcasecmp($item->title, 'divider') == 0 && $depth === 1) {
        $output .= $indent . '<li role="presentation" class="divider">';
    } else if (strcasecmp($item->attr_title, 'dropdown-header') == 0 && $depth === 1) {
        $output .= $indent . '<li role="presentation" class="dropdown-header">' . esc_attr($item->title);
    } else if (strcasecmp($item->attr_title, 'disabled') == 0) {
        $output .= $indent . '<li role="presentation" class="disabled"><a href="#">' . esc_attr($item->title) . '</a>';
    } else {

        $class_names = $value = '';

        $classes = empty($item->classes) ? array() : (array)$item->classes;
        $classes[] = 'menu-item-' . $item->ID;

        $class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item, $args));

        if ($args->has_children)
            $class_names .= ' dropdown';

        if (in_array('current-menu-item', $classes))
            $class_names .= ' active';

        $class_names = $class_names ? ' class="' . esc_attr($class_names) . '"' : '';

        $id = apply_filters('nav_menu_item_id', 'menu-item-' . $item->ID, $item, $args);
        $id = $id ? ' id="' . esc_attr($id) . '"' : '';

        $output .= $indent . '<li' . $id . $value . $class_names . '>';

        $atts = array();
        $atts['title'] = !empty($item->title) ? $item->title : '';
        $atts['target'] = !empty($item->target) ? $item->target : '';
        $atts['rel'] = !empty($item->xfn) ? $item->xfn : '';


        $atts['custom'] = !empty($item->custom) ? $item->custom : '';

        // Se l'elemento ha figli aggiungi atts ad a.
        if ($args->has_children && $depth === 0) {
            $atts['href'] = '#';
            $atts['data-toggle'] = 'dropdown';
            $atts['class'] = 'dropdown-toggle';
            $atts['aria-haspopup'] = 'true';
        } else {
            $atts['href'] = !empty($item->url) ? $item->url : '';
        }

        $atts = apply_filters('nav_menu_link_attributes', $atts, $item, $args);


        $attributes = '';
        foreach ($atts as $attr => $value) {


            if (!empty($value)) {
                $value = ('href' === $attr) ? esc_url($value) : esc_attr($value);
                $attributes .= ' ' . $attr . '="' . $value . '"';
            }
        }

        $item_output = $args->before;

        /*
         * Glyphicons
         * ===========
         * Dato che l'elemento del menu NON è un Divisore o Intestazione verifichiamo
         * se c'è un valore nella proprietà attr_title. Se la proprietà attr_title
         * NON è null la applichiamo come nome della classe per il glyphicon.
         */
        if (!empty($item->attr_title))
            $item_output .= '<a' . $attributes . '><span class="glyphicon ' . esc_attr($item->attr_title) . '"></span>&nbsp;';
        else
            $item_output .= '<a' . $attributes . '>';


        $item_output .= $args->link_before . apply_filters('the_title', $item->title, $item->ID) . $args->link_after;
        $item_output .= ($args->has_children && 0 === $depth) ? ' <span class="caret"></span></a>' : '</a>';
        $item_output .= $args->after;

        $output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args);
    }
}

/**
 * Attraversa gli elementi per creare una lista dagli elementi.
 *
 * Mostra un elemento se l'elemento non ha figli altrimenti,
 * mostra l'elemento e i suoi figli. Attraverserà solo fino alla massima
 * profondità e ignorerà gli elementi sotto quella profondità.
 *
 * Questo metodo non dovrebbe essere chiamato direttamente, usa il metodo walk() invece.
 *
 * @see Walker::start_el()
 * @since 2.5.0
 *
 * @param object $element Oggetto dati
 * @param array $children_elements Lista di elementi da continuare ad attraversare.
 * @param int $max_depth Profondità massima da attraversare.
 * @param int $depth Profondità dell'elemento corrente.
 * @param array $args
 * @param string $output Passato per riferimento. Usato per aggiungere contenuto aggiuntivo.
 * @return null Null in caso di fallimento senza cambiamenti ai parametri.
 */
public function display_element($element, &$children_elements, $max_depth, $depth, $args, &$output)
{
    if (!$element)
        return;

    $id_field = $this->db_fields['id'];

    // Mostra questo elemento.
    if (is_object($args[0]))
        $args[0]->has_children = !empty($children_elements[$element->$id_field]);

    parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output);
}

/**
 * Fallback del Menu
 * =============
 * Se questa funzione è assegnata alla variabile fallback_cb di wp_nav_menu
 * e un menu non è stato assegnato alla posizione del tema nel gestore dei menu di WordPress
 * la funzione non mostrerà nulla ad un utente non loggato,
 * e aggiungerà un link al gestore dei menu di WordPress se loggato come amministratore.
 *
 * @param array $args passati dalla funzione wp_nav_menu.
 *
 */
public static function fallback($args)
{
    if (current_user_can('manage_options')) {

        extract($args);

        $fb_output = null;

        if ($container) {
            $fb_output = '<' . $container;

            if ($container_id)
                $fb_output .= ' id="' . $container_id . '"';

            if ($container_class)
                $fb_output .= ' class="' . $container_class . '"';

            $fb_output .= '>';
        }

        $fb_output .= '<ul';

        if ($menu_id)
            $fb_output .= ' id="' . $menu_id . '"';

        if ($menu_class)
            $fb_output .= ' class="' . $menu_class . '"';

        $fb_output .= '>';
        $fb_output .= '<li><a href="' . admin_url('nav-menus.php') . '">Aggiungi un menu</a></li>';
        $fb_output .= '</ul>';

        if ($container)
            $fb_output .= '</' . $container . '>';

        echo $fb_output;
    }
}
}
16 feb 2015 13:47:21
Commenti

Ecco il tuo voto positivo.

kaiser kaiser
16 feb 2015 14:05:18

Il codice di TanQ.It funziona, ma voglio disabilitare le altre classi. Questo codice restituisce diverse altre classi per il tag ul e li tag e... Voglio che restituisca solo class="sub-menu" per il tag li. Come posso farlo?

Shahin Ataei Shahin Ataei
16 feb 2015 19:56:52

Modifica il codice sopra per adattarlo alle tue esigenze. Questo era un punto di partenza.

cristian.raiber cristian.raiber
16 feb 2015 20:15:15

grazie. funziona correttamente. L'unico problema che ho è che vorrei aggiungere un prefisso come "-". Se l'elemento è un figlio, voglio visualizzare "<span>-</span>" prima del sotto-menu per l'indentazione. Come posso farlo?

Shahin Ataei Shahin Ataei
17 feb 2015 14:12:16