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


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

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'] )


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 .


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.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.