Cum să adaugi clasa sub-menu la tag-ul li dacă există submeniu în WordPress

16 feb. 2015, 13:38:33
Vizualizări: 18.3K
Voturi: 0

de exemplu vreau să creez acest meniu:

<div class="menu_wrap">
 <ul class="nav sf-menu">
  <li class="sub-menu"><a href="">Meniu Principal 1</a>
    <ul>
        <li><a href=""><span>-</span>Submeniu 1</a></li>
        <li><a href=""><span>-</span>Submeniu 2</a></li>
    </ul>
  </li>
  <li class="sub-menu"><a href="">Meniu Principal 2</a>
    <ul>
        <li><a href=""><span>-</span>Submeniu 1</a></li>
        <li><a href=""><span>-</span>Submeniu 2</a></li>
    </ul>
  </li>
  <li><a href="">Meniu Principal 3 fără submeniu</a></li>
</ul>

cum să adaug class="sub-menu" în tag-ul li dacă există submeniu:

<li class="sub-menu"><a href="">Meniu Principal 1</a>

dacă nu există, să afișez li fără class="sub-menu":

<li><a href="">Meniu Principal 3 fără submeniu</a></li>

am acest cod în functions.php:

//Adaugă Meniuri
    add_theme_support( 'menus' );
    register_nav_menus(
            array(
                'mainmenu' => 'Meniu Principal'
            )
        );
    function dtuts_main_nav() {
        // afișează meniul wp3 dacă este disponibil
        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
        ));
    }

nu știu cum să scriu clasa themeslug_walker_nav_menu, vă rog ajutați-mă.

1
Comentarii

Poți folosi jQuery (javascript).

Mayeenul Islam Mayeenul Islam
16 feb. 2015 13:43:05
Toate răspunsurile la întrebare 1
4

Acesta este codul pe care îl folosesc, este un navigator personalizat pentru BootStrap, dar îl puteți adapta cu ușurință pentru propriile nevoi. Apropo, puteți copia și lipi navigatorul meu și asigurați-vă că modificați această linie:

$class_names .= ' dropdown';

în

$class_names .= ' sub-menu';

Sper că vă ajută.

/**
 * Navigator personalizat Bootstrap
 */

class macho_bootstrap_walker extends Walker_Nav_Menu
{

/**
 * @see Walker::start_lvl()
 * @since 3.0.0
 *
 * @param string $output Passat prin referință. Folosit pentru a adăuga conținut suplimentar.
 * @param int $depth Adâncimea paginii. Folosit pentru spațiere.
 */
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 Passat prin referință. Folosit pentru a adăuga conținut suplimentar.
 * @param object $item Obiectul de date al elementului de meniu.
 * @param int $depth Adâncimea elementului de meniu. Folosit pentru spațiere.
 * @param int $current_page ID-ul elementului de meniu.
 * @param object $args
 */
public function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0)
{
    $indent = ($depth) ? str_repeat("\t", $depth) : '';

    /**
     * Divizoare, Anteturi sau Dezactivate
     * =============================
     * Determină dacă elementul este un Divizor, Antet, Dezactivat sau un
     * element de meniu obișnuit. Pentru a preveni erorile, folosim funcția strcasecmp() pentru a face o
     * comparație care nu este sensibilă la majuscule/minuscule. Funcția strcasecmp() returnează
     * 0 dacă șirurile sunt egale.
     */
    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 : '';

        // Dacă elementul are copii, adaugă atributele la <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
         * ===========
         * Deoarece elementul de meniu NU este un Divizor sau Antet, verificăm dacă
         * există o valoare în proprietatea attr_title. Dacă proprietatea attr_title
         * NU este nulă, o aplicăm ca nume de clasă pentru 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);
    }
}

/**
 * Parcurge elementele pentru a crea o listă din ele.
 *
 * Afișează un element dacă acesta nu are copii, în caz contrar,
 * afișează elementul și copiii acestuia. Va parcurge doar până la adâncimea maximă
 * și va ignora elementele de sub acea adâncime.
 *
 * Această metodă nu ar trebui apelată direct, folosiți metoda walk() în schimb.
 *
 * @see Walker::start_el()
 * @since 2.5.0
 *
 * @param object $element Obiect de date
 * @param array $children_elements Listă de elemente pentru a continua parcurgerea.
 * @param int $max_depth Adâncime maximă de parcurgere.
 * @param int $depth Adâncimea elementului curent.
 * @param array $args
 * @param string $output Passat prin referință. Folosit pentru a adăuga conținut suplimentar.
 * @return null Null în caz de eșec fără modificări ale parametrilor.
 */
public function display_element($element, &$children_elements, $max_depth, $depth, $args, &$output)
{
    if (!$element)
        return;

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

    // Afișează acest element.
    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);
}

/**
 * Rezervă pentru Meniu
 * =============
 * Dacă această funcție este atribuită variabilei fallback_cb din wp_nav_menu
 * și un meniu nu a fost atribuit locației de temă în managerul de meniuri WordPress,
 * funcția nu va afișa nimic pentru un utilizator nelogat,
 * și va adăuga un link către managerul de meniuri WordPress dacă este conectat ca administrator.
 *
 * @param array $args pasat din funcția 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') . '">Adaugă un meniu</a></li>';
        $fb_output .= '</ul>';

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

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

Aici este votul tău pozitiv.

kaiser kaiser
16 feb. 2015 14:05:18

Codul TanQ.It funcționează, dar vreau să dezactivez alte clase. Acest cod afișează mai multe alte clase pentru tag-ul ul și li și... Vreau să afișez doar clasa="sub-menu" pentru tag-ul li. Cum pot face asta!

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

Modifică codul de mai sus pentru a se potrivi nevoilor tale. Acesta a fost un punct de plecare.

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

mulțumesc. să fie adevărat și să funcționeze. Doar că am o problemă. Vreau să adaug un prefix ca de exemplu "-". Dacă elementul este copil, să afișez "<span>-</span>" înaintea elementului submeniu pentru indentare. Cum pot face asta?

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