Walker_Nav_Menu değiştirilirken üst sınıfa 'has_children' sınıfı ekleyin


22

Wp_nav_menu için özelleştirilmiş bir walker sınıfı yazıyorum ve bir li'nin bir alt menü içerip içermediğini belirtmek istiyorum. Bu yüzden işaretlememin olmasını istiyorum:

<li class="has_children [other-wordpress-classes]">
    <a class="parent-link">Some item</a>
    <ul class="sub-menu">

Sınıfları nasıl ekleyip çıkarabileceğimi biliyorum, sadece şu anki öğenin çocuk öğeleri varsa, bana söyleyecek bir şey bulamıyorum.

Herhangi bir fikir?

Şimdiden teşekkürler.

Yanıtlar:


23

start_el()Bu bilgiyi $argsparametresinde almalı , ancak WordPress yalnızca $argsbir dizi ise bunu doldurur , özel gezinti menüleri için ise bir nesnedir. Bu bir Trac biletinde rapor edildi . Ancak sorun değil, display_element()özel yürüteçinizdeki yöntemi geçersiz kılarsanız (alt öğe dizisine erişmek için en kolay yer olduğu için) bunu kendinizde doldurabilirsiniz :

class WPSE16818_Walker extends Walker_Nav_Menu
{
    function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output )
    {
        $id_field = $this->db_fields['id'];
        if ( is_object( $args[0] ) ) {
            $args[0]->has_children = ! empty( $children_elements[$element->$id_field] );
        }
        return parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
    }

    function start_el( &$output, $item, $depth, $args ) {
        if ( $args->has_children ) {
            // ...
        }
    }

Merhaba Jan, Bu soruda bana yardım edebilir misin ? Kodunu denedim ama çalışmasını sağlayamadım. Bana biraz daha örnek kod verebilir misin?
Giri

Bakın tam uygulama örneğin daha da aşağı bu sayfada.
rjb

Çok teşekkürler @Jan fabry .. Benim özel yürüteç ile tutuklandı .. Snopet atlast bana yardım etti.
Harish Chinju,

7

Güncelleme: itibarıyla WordPress 3.7 - bu WordPress çekirdek bakıldığından gibi özel bir yürüteç kullanmak gerek (Ekim 2013), CSS sınıfları tema menülerde alt menü öğeleri ve sayfalarını belirtmek için eklenmiştir.

CSS sınıfları menu-item-has-childrenve olarak adlandırılır page_item_has_children.


Acelesi olan herkes için tam bir çözüm için (Jan Fabry'nin önceki cevabına verilen kredi), aşağıdaki tam uygulamaya bakın.

Gezintiyi kendi şablonunuzda yayınlayın:

wp_nav_menu( array(
    'theme_location' => 'navigation-primary',
    'container' => false,
    'container_class' => '',
    'container_id' => '',
    'menu_class' => '',
    'menu_id' => '',
    'walker' => new Selective_Walker(),
    'depth' => 2
    )
);

Ardından, temanıza aşağıdakileri ekleyin functions.php:

class Selective_Walker extends Walker_Nav_Menu {
    function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ) {
        $id_field = $this->db_fields['id'];

        if ( is_object( $args[0] ) ) {
            $args[0]->has_children = !empty( $children_elements[$element->$id_field] );
        }

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

    function start_el( &$output, $item, $depth, $args ) {
        if ( $args->has_children ) {
            $item->classes[] = 'has_children';
        }

        parent::start_el(&$output, $item, $depth, $args);
    }
}

Sonuçta ortaya çıkan HTML çıktısı aşağıdakine benzer:

<ul>
    <li><a href="#">Home</a></li>
    <li class="has_children"><a href="#">About</a>
        <ul class="sub-menu">
            <li><a href="#">Our Mission</a></li>
        </ul>
    </li>
    <li><a href="#">Services</a></li>
    <li class="has_children"><a href="#">Products</a>
        <ul class="sub-menu">
            <li><a href="#">Lorem Ipsum</a></li>
            <li><a href="#">Lorem Ipsum</a></li>                
        </ul>
    </li>
    <li><a href="#">Contact Us</a></li>
</ul>

WordPress'in yürüteç sınıfını kullanma hakkında daha fazla bilgi için, bkz . Walker Sınıfını Anlama .

Keyfini çıkarın!


Önemli hata: Çağrı süresi referans referansı, D: \ www \ wordpress \ wp-content \ themes \ wpt_theme \ functions.php satırındaki 44. satırda kaldırıldı
Tahir Yasin

44. satır üst :: start_el (& $ output, $ item, $ deep, $ args);
Tahir Yasin

2

Bu fonksiyon tam olarak sahip olmak istediğiniz şeydir. Ayrıca, nav menü öğelerini değiştirmenin oldukça etkili bir yolunu gösterir. Ayrıca, daha gelişmiş (örneğin çocuk teması) işlevleri için item-filter kullanarak açabilirsiniz:

/**
 * Classes for a navigation named "Topnav" in the nav location "top".
 * Shows examples on how to modify the current nav menu item
 * 
 * @param (object) $items
 * @param (object) $menu
 * @param (object) $args
 */
function wpse16818_nav_menu_items( $items, $menu, $args )
{
    # >>>> start editing

    // examples for possible targets
    $target['name'] = 'Topnav';
    // The targeted menu item/s
    $target['items'] = array( (int) 6 );

    # <<<< stop editing

    // filter for child themes: "config_nav_menu_topnav"
    $target = apply_filters( 'config_nav_menu_'.strtolower( $target['name'] ), $target );

    // Abort if we're not with the named menu
    if ( $menu->name !== $target['name'] ) 
        return;

    foreach ( $items as $item )
    {
        // Check what $item contains
        echo '<pre>'; print_r($item); echo '</pre>';

        // First real world example:
        $item->classes = 'span-4';

        // Second real world example:
        // Append this class if we are in one of the targeted items
        if ( in_array( (int) $item->menu_order, $target['items'] ) )
            $item->classes .= ' last';
    }

    return $items;
}
add_filter( 'wp_get_nav_menu_items', 'wpse16818_nav_menu_items', 10, 3 );

Ve evet, var - neredeyse her durumda - özel bir yürüteç gerekmez.


Teşekkürler, şimdilik yürüteç istiyorum ama bir dahaki sefere buna bakacağım!
Patnz

1

Aşağı açılır yapmak istiyorsanız, sadece css ile yapabilirsiniz. Çocuklarla WP'de özel gezinme yapmak, WordPress otomatik olarak sınıf .sub-menüsünü alt ul'ye atar. Bu CSS'yi dene

    nav li {position:relative;}
   .sub-menu {display:none; position:absolute; width:300px;}
    nav ul li:hover ul {display:block;}

Biraz baharatlamak için biraz jQuery eklemek isteyebilirsiniz, ancak bu size çalışan bir açılır menü sunmalıdır.


Teşekkürler, kontrol elemanlarını da içine soktuğum çok seviyeli katlanabilir bir ağaç menüsü için, ancak css ile mümkün olduğu kadar iyi yapmak kesinlikle iyi!
Patnz

-1
if ( $this->has_children ) {
    $item_output .= 'has_children';
}

3
Lütfen bu kodun ne yaptığını ve soruyu nasıl cevapladığını açıklayınız.
cybmeta 13:15,

Ve lütfen kodu daha fazla bağlamda gönderin. Olduğu gibi, ziyaret eden kişilerin çoğunun nereye yapıştırmayı deneyecekleri konusunda hiçbir fikri olmayacak ve yanlış anlayacaksınız.
s_ha_dum
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.