Jak dodać atrybut danych do elementu menu WordPress

17

Jestem na Twitterze Bootstrap i muszę dodać atrybut data-toggle = "modal" do znacznika łącza menu. Po przeszukaniu większości odniesień do wszystkich wyników chodzę po rozwijanych menu Twitter Bootstrap, jednak to menu nie ma rozwijanych menu i muszę tylko dodać konkretny atrybut.

Następnie znalazłem to: dodaj niestandardowe atrybuty do elementów menu bez wtyczki, co jest bardzo pomocne, ponieważ pojawia się w WordPress 3.6+, nie musimy już robić długich skomplikowanych walkerów i zamiast tego możemy użyć tego: http://codex.wordpress.org/Plugin_API / Filter_Reference / nav_menu_link_attributes

Jednak od tego momentu ten interfejs API jest zupełnie pusty i nie zawiera żadnych przykładów, a ponieważ jest tak nowy, jest bardzo mało odniesień do niego w Google.

Najpierw spróbowałem:

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;
}

i to działa, jednak zgodnie z oczekiwaniami dodaje atrybut do wszystkich tagów w menu. Próbuję więc wymyślić, jak celować w jeden element menu za pomocą # menu-item-7857 a lub podobnego.

Czy ktoś wie, gdzie znaleźć przykład kierowania na element menu lub jest w stanie określić, w jaki sposób oprzeć się na informacjach zawartych w powyższym odnośniku do interfejsu API?

Zauważyłem, że znalazłem następujący przykład, ale dotyczy on tylko przedmiotów, które mają dzieci, co nie pomaga, ale może być w dobrym kierunku:

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);

AKTUALIZACJA - jedyna odpowiedź poniżej brzmi, jakby była na coś, ale nie była w stanie określić, jak faktycznie znaleźć numer, na który można kierować mój konkretny link i gdzie / jak dodać ten warunek w działającym przykładzie. Dodał komentarz, ale nie odpowiedział. Od około 18 dni pomyślałem, że zobaczę, czy nagroda pomogłaby.

Kiedy patrzę na kod linku, na który chcę kierować:

<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>

Widzę liczbę 7858, więc myślę, że może właśnie na tę liczbę powinienem być kierowany.

Ale kiedy próbuję na przykład:

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;
    }
}

Dodając jednak, że jeśli oświadczenie jeden komentator zasugerował, otrzymuję następujący błąd:

Fatal error: Cannot use object of type WP_Post as array

Zakładam, że więcej kodu jest wymagane, ale zagubione. Przypominamy, że bez instrukcji if działa, jednak jest kierowane na wszystkie łącza, a nie na jedno łącze, na które chcę kierować.

Cchiera
źródło
Chcę wstawić <? Php the_id ();?> Do zmiennej $ atts. Coś takiego // sprawdzam $ item if ($ item-> ID == $ menu_target) {$ atts ['data-toggle'] = 'modal - <? php the_id ();?>'; } zwróć $ atts; Czy możesz mi pomóc, jak wstawić identyfikator do zmiennej $ atts. Dzięki
nadzhq

Odpowiedzi:

36

W szczególności edytuj kod podany w pierwotnym pytaniu:

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;
}
Jen
źródło
Po tym, jak zamieniłem niektóre własne wartości, które to zrobiły! Dziękuję Ci! Oznaczono to jako poprawne, ale mówi, że muszę czekać 23 godziny, zanim będę mógł przyznać nagrodę.
cchiera
Chętnie pomoże! : D
Jen
Przypominam w Fantastycznym, więc nie zapomnę przyznać nagrody jutro.
cchiera
Co jeśli masz kilka pozycji menu jako cel?
Eric Mitjans,
wystarczy użyć wielu instrukcji if, jeśli wartość przełączania danych jest inna. Lub możesz zapisać identyfikator w kluczu tablicy (biorąc pod uwagę, że są unikalne) i nazwę modalną jako wartość tablicy. Następnie sprawdź instrukcję if za pomocąarray_key_exists()
Sisir
8

Drugi $itemargument, który jest udostępniany funkcji filtrowania, zawiera obiekt pozycji menu. Jeśli zostanie zrzucony, wygląda mniej więcej tak:

[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] => 
    )

Aby wybrać konkretny element menu, musisz sformułować swój stan i porównać go z danymi dostępnymi na przykład w obiekcie if ( 2220 == $item['ID'] )

Rarst
źródło
Dzięki za to! Nie jestem jednak pewien, czy rozumiem, jak uzyskać identyfikator $ $ dla mojego konkretnego elementu menu. W twoim przykładzie 2220 jest również taki sam jak twój adres „ dev.rarst.net/?p=2220 ”. Mój link, do którego chcę dodać atrybut danych, nie przechodzi do innego adresu URL wordpress, ale jest raczej href = "# ContactForm". W oparciu o powyższy przykład przejrzałem więcej i spróbowałem uruchomić echo var_export ($ GLOBALS ['post'], TRUE); ale kiedy patrzę w pobliżu pozycji menu, nie widzę żadnego unikalnego identyfikatora. Możesz wyjaśnić? Lub w „if (2220 == $ item ['ID'])„ Z góry dziękuję!
cchiera
2
Błąd, który widzisz, ponieważ $itemjest obiektem, a nie tablicą; zmienić $item['ID']TO $item->ID.
Jen
1

Dlaczego nie podejdziesz do tego problemu z innej strony? Zamiast próbować kierować element menu o id == ?? który może się w pewnym momencie zmienić (element menu, a nie identyfikator), użyj obszaru administracyjnego WP, aby dodać niestandardową klasę do elementu menu, na który chcesz kierować reklamy. Następnie użyj tej klasy w JavaScript, aby uruchomić potrzebne informacje:

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

Mój javascript nie jest gwarantowany. Jeśli nie używasz jQuery, można spróbować to .

Jen
źródło
1

Chciałem dodać litery danych do niestandardowego menu, które utworzyłem w WordPress.

Kroki, które wybrałem, to:

  1. Znaleziono numer identyfikacyjny mojego menu.
  2. dodano te wiersze kodu z @ guiniveretoo
  3. napisałem instrukcje if dla każdego elementu menu (ponieważ chciałem wprowadzić różne wartości atrybutów).
  4. pracował!

Oto mój kod.

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;
}

Mam nadzieję, że to ci pomoże.

Anoop Anson
źródło