WordPress menü öğesine veri özelliği ekleme


18

Ben Twitter Bootstrap ve menü bağlantı etiketine data-toggle = "modal" özniteliği eklemeniz gerekir. Arama sonuçlarının çoğunda referans Twitter Bootstrap açılır menüler için bir yürüyüş yapıyor ancak bu menü hiçbir açılan vardır ve ben sadece belirli bir özellik eklemeniz gerekir.

Sonra bunu buldum: WordPress 3.6 + 'da göründüğü gibi çok yararlı olan eklentisiz menü öğelerine özel özellikler ekleyin , artık uzun karmaşık yürüyüşçüler yapmak zorunda değiliz ve bunun yerine bunu kullanabiliriz: http://codex.wordpress.org/Plugin_API / Filter_Reference / nav_menu_link_attributes

Bununla birlikte, bu çalıştırmadan sonra bu API referansı oldukça çıplaktır ve hiçbir örnek sunmaz ve çok yeni olduğu için Google'da çok az referans vardır.

Önce bunu denedim:

add_filter( 'nav_menu_link_attributes', 'mywp_contact_menu_atts', 10, 3 );

function pb_contact_menu_atts( $atts, $item, $args )
{
    // inspect $item, then …
    $atts['data-toggle'] = 'modal';
    return $atts;
}

ve bu beklendiği gibi çalışır, ancak beklendiği gibi menüdeki tüm etiketlere öznitelik ekler. Bu yüzden # menu-item-7857 a veya benzeri bir menü öğesini nasıl hedefleyeceğimizi anlamaya çalışıyorum.

Bir menü öğesini hedefleme örneğini nerede bulacağını veya yukarıdaki bağlantılı API referansındaki bilgilere nasıl dayanacağını belirleyebilen var mı?

Not etmek gerekirse, aşağıdaki bir örneği buldum, ancak sadece yardımcı olmayan ancak doğru yönde olabilecek çocukları olan öğeleri hedefliyor:

add_filter('nav_menu_link_attributes', function($atts, $item, $args) {
    if ( $args->has_children )
    {
        $atts['data-toggle'] = 'dropdown';
        $atts['class'] = 'dropdown-toggle';
    }

    return $atts;
}, 10, 3);

GÜNCELLEME - Aşağıdaki tek yanıt, bir şeye benziyor gibi geliyor, ancak belirli bir bağlantımı hedeflemek için sayıyı gerçekten nasıl bulacağını ve çalışan bir örneğe bu koşullu durumu nereye / nasıl ekleyeceğini belirleyemedi. Bir yorum ekledi ama duymadım. Yaklaşık 18 gündür bir ödülün yardım edip etmeyeceğini düşündüm.

Hedeflemek istediğiniz bağlantı için koda baktığımda:

<li id="menu-item-7858" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-7858"><a href="#" data-toggle="modal">Chat</a></li>

7858 sayısını görüyorum, bu yüzden belki de hedeflemem gereken sayı bu.

Ama örneğin denediğimde:

add_filter( 'nav_menu_link_attributes', 'my_chat_menu_atts', 10, 3 );


function my_chat_menu_atts( $atts, $item, $args ) {
    if ( 7857 == $item['ID'] ) {
        // inspect $item, then …
        $atts['onclick'] = 'SnapEngage.startLink();';
        return $atts;
    }
}

Ancak bir yorumcu önerisini ifade eğer aşağıdaki hatayı alıyorum ekleyerek:

Fatal error: Cannot use object of type WP_Post as array

Daha fazla kod gerekli ama bir kayıp varsayalım. İf ifadesi olmadan bir hatırlatma olarak, ancak hedeflemek istediğim tek bağlantı yerine tüm bağlantıları hedefler.


$? Atts değişkenine <? Php the_id ();?> Eklemek istiyorum / böyle bir şey varsa $ $ inceleyin ($ item-> ID == $ menu_target) {$ atts ['data-toggle'] = 'modal - <? php the_id ();?>'; } $ atts döndür; Lütfen bana nasıl yardımcı olabilirim $ atts değişkenine the_id ekleyebilirim. Teşekkürler
nadzhq

Yanıtlar:


37

Orijinal soruda belirttiğiniz kodu özel olarak düzenleme:

add_filter( 'nav_menu_link_attributes', 'wpse121123_contact_menu_atts', 10, 3 );
function wpse121123_contact_menu_atts( $atts, $item, $args )
{
  // The ID of the target menu item
  $menu_target = 123;

  // inspect $item
  if ($item->ID == $menu_target) {
    $atts['data-toggle'] = 'modal';
  }
  return $atts;
}

Kendi değerlerimin bazılarını değiştirdikten sonra bunu başardım! Teşekkür ederim! Doğru olarak işaretlendi, ancak ödülü vermeden önce 23 saat daha beklemem gerektiğini söylüyor.
cchiera

Memnuniyetle yardım ettim! : D
Jen

Fantastical'de bir hatırlatıcı ayarladım, bu yüzden yarın ödülünü vermeyi unutmayın.
cchiera

Hedef olarak birkaç menü öğeniz varsa ne olur?
Eric Mitjans

veri değiştirme değeri farklıysa, birden fazla if ifadesi kullanmanız yeterlidir. Veya kimliği dizi anahtarına (benzersiz olduklarını düşünerek) ve mod adını dizi değeri olarak kaydedebilirsiniz. Sonra if ifadesini kontrol edinarray_key_exists()
Sisir

8

$itemFiltre işleviniz için kullanılabilir hale getirilen ikinci argüman bir menü öğesi nesnesi içerir. Boşaltıldığında şöyle görünür:

[1] => WP_Post Object
    (
        [ID] => 2220
        [post_author] => 1
        [post_date] => 2012-12-26 19:29:44
        [post_date_gmt] => 2012-12-26 17:29:44
        [post_content] => 
        [post_title] => Home
        [post_excerpt] => 
        [post_status] => publish
        [comment_status] => open
        [ping_status] => open
        [post_password] => 
        [post_name] => home-3
        [to_ping] => 
        [pinged] => 
        [post_modified] => 2013-06-05 01:55:20
        [post_modified_gmt] => 2013-06-04 22:55:20
        [post_content_filtered] => 
        [post_parent] => 0
        [guid] => http://dev.rarst.net/?p=2220
        [menu_order] => 1
        [post_type] => nav_menu_item
        [post_mime_type] => 
        [comment_count] => 0
        [filter] => raw
        [db_id] => 2220
        [menu_item_parent] => 0
        [object_id] => 2220
        [object] => custom
        [type] => custom
        [type_label] => Custom
        [title] => Home
        [url] => http://dev.rarst.net/
        [target] => 
        [attr_title] => 
        [description] => 
        [classes] => Array
            (
                [0] => 
                [1] => menu-item
                [2] => menu-item-type-custom
                [3] => menu-item-object-custom
                [4] => current-menu-item
                [5] => current_page_item
                [6] => menu-item-home
            )

        [xfn] => 
        [current] => 1
        [current_item_ancestor] => 
        [current_item_parent] => 
    )

Belirli bir menü öğesini hedeflemek için durumunuzu formüle etmeniz ve nesnede bulunan verilerle karşılaştırmanız gerekir. if ( 2220 == $item['ID'] )


Bunun için teşekkürler! Ancak belirli menü öğesi için $ öğe kimliğini nasıl anlayacağından emin değilim. Örneğinizde 2220, " dev.rarst.net/?p=2220 " URL'nizle aynıdır . Benim bağlantı veri özniteliğini eklemek istiyorum başka bir wordpress url gitmez ama daha ziyade href = "# ContactForm". Yukarıdaki örneğinize dayanarak daha fazla googledim ve echo var_export ($ GLOBALS ['post'], TRUE) çalıştırmayı denedim; ancak özgün menü öğesinin yanına baktığımda benzersiz bir kimlik görmüyorum. Açıklayabilir misin? Veya "if (2220 == $ item ['ID']))" Şimdiden teşekkürler!
cchiera

2
Gördüğünüz hata $itembir dizi değil, bir nesnedir; değiştirmek $item['ID']To $item->ID.
Jen

1

Bu soruna neden farklı bir yönden yaklaşmıyorsunuz? Menü öğesini id == ?? ile hedeflemeye çalışmak yerine bir noktada değişebilen (kimlik değil menü öğesi), hedeflemek istediğiniz menü öğesine özel bir sınıf eklemek için WP Yönetici alanını kullanın . Ardından, ihtiyacınız olan bilgileri tetiklemek için Javascript'inizde bu sınıfı kullanın:

$('.my-class').click(function(e){
  // do other stuff
  e.preventDefault;
});

Javascript'im garanti edilmiyor. JQuery kullanmıyorsanız, sen deneyebilirsin bu .


1

WordPress'te oluşturduğum özel menüye veri harfleri eklemek istedim.

Seçtiğim adımlar:

  1. Menümün kimlik numarasını buldum.
  2. @guiniveretoo'dan bu kod satırlarını ekledi
  3. her menü öğeleri için ifadeler yazdı (farklı özellik değerlerinin enjekte edilmesini istediğim gibi).
  4. çalıştı!

İşte kodum.

add_filter( 'nav_menu_link_attributes', 'wpse121123_contact_menu_atts', 10, 3 );
function wpse121123_contact_menu_atts( $atts, $item, $args )
{  
  $menu_target = 6;

  if ($item->ID == $menu_target) {
    $atts['data-letters'] = 'PROJECTS';
  }

  elseif ($item->ID == 7) {
    $atts['data-letters'] = 'RESUME';
  }
  elseif ($item->ID == 8) {
    $atts['data-letters'] = 'ARTWORKS';
  }
  elseif ($item->ID == 9) {
    $atts['data-letters'] = 'HELLO!';
  }
  return $atts;
}

Umarım bu size yardımcı olur.

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.