So fügen Sie einem WordPress-Menüelement ein Datenattribut hinzu

Ich bin Twitter Bootstrap und muss das Attribut data-toggle = "modal" zum Tag eines Menülinks hinzufügen. Beim Durchsuchen der meisten Ergebnisse wird auf die Suche nach Twitter-Bootstrap-Dropdown-Menüs verwiesen. Dieses Menü enthält jedoch keine Dropdown-Menüs, und ich muss nur das bestimmte Attribut hinzufügen.

Als nächstes fand ich Folgendes : Hinzufügen von benutzerdefinierten Attributen zu Menüelementen ohne Plug-In, was sehr hilfreich ist, da es in WordPress 3.6+ nicht mehr lange komplexe Walker benötigt und stattdessen verwendet werden kann: http://codex.wordpress.org/Plugin_API / Filter_Reference / nav_menu_link_attributes

Zum jetzigen Zeitpunkt ist diese API-Referenz jedoch recht einfach und enthält keine Beispiele. Da sie so neu ist, gibt es bei Google nur sehr wenige Verweise darauf.

Ich habe das zuerst versucht:

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

und das funktioniert, aber es fügt erwartungsgemäß das Attribut zu allen a-Tags im Menü hinzu. Also versuche ich herauszufinden, wie man einen Menüpunkt mit # menu-item-7857 a oder so ansteuert.

Weiß jemand, wo er ein Beispiel für die Ausrichtung auf ein Menüelement finden oder feststellen kann, wie er sich auf die Informationen stützen kann, die in der oben verlinkten API-Referenz enthalten sind?

Ich habe das folgende Beispiel gefunden, aber es zielt nur auf Elemente mit untergeordneten Elementen ab, was nicht hilfreich ist, aber möglicherweise in die richtige Richtung weist:

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

UPDATE (AKTUALISIERUNG) - Die einzige Antwort unten klingt so, als sei sie auf etwas gerichtet, aber es konnte nicht festgestellt werden, wie die Nummer für die Ausrichtung auf einen bestimmten Link tatsächlich gefunden werden kann und wo / wie diese Bedingung in einem funktionierenden Beispiel hinzugefügt werden soll. Kommentar hinzugefügt, aber nicht zurückgehört. Seit ungefähr 18 Tagen dachte ich, ich würde sehen, ob ein Kopfgeld helfen würde.

Wenn ich mir den Code für den Link ansehe, auf den ich abzielen möchte:

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

Ich sehe die Nummer 7858 und denke, das ist vielleicht die Nummer, auf die ich zielen sollte.

Aber wenn ich zum Beispiel versuche:

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

Wenn ich jedoch die if-Anweisung hinzufüge, die der Kommentator vorgeschlagen hat, erhalte ich den folgenden Fehler:

Fatal error: Cannot use object of type WP_Post as array

Ich gehe davon aus, dass mehr Code benötigt wird, aber verloren geht. Zur Erinnerung, ohne die if-Anweisung funktioniert es, aber es zielt auf alle Links und nicht auf den einen Link, auf den ich zielen möchte.

Spezielles Bearbeiten des Codes, den Sie in der ursprünglichen Frage angegeben haben:

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

Das zweite $itemArgument, das Ihrer Filterfunktion zur Verfügung gestellt wird, enthält ein Menüelementobjekt. Wenn es abgeladen ist, sieht es ungefähr so ​​aus:

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

Um einen bestimmten Menüpunkt anzusprechen, müssen Sie Ihre Bedingung formulieren und mit den im Objekt verfügbaren Daten vergleichen if ( 2220 == $item['ID'] )

Warum nähern Sie sich diesem Problem nicht aus einer anderen Richtung? Anstatt zu versuchen, den Menüpunkt mit id == ?? Verwenden Sie den WP Admin-Bereich, um dem Menüelement, auf das Sie abzielen möchten, eine benutzerdefinierte Klasse hinzuzufügen . Verwenden Sie dann diese Klasse in Ihrem Javascript, um die benötigten Informationen auszulösen:

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

Mein Javascript ist nicht garantiert. Wenn Sie nicht jQuery verwenden, könnten Sie versuchen , diese .

Ich wollte dem benutzerdefinierten Menü, das ich in WordPress erstellt hatte, Datenbuchstaben hinzufügen.

Die Schritte, die ich gewählt habe, waren:

1. Ich habe die ID-Nummer meines Menüs gefunden.
2. hat diese Codezeilen von @guiniveretoo hinzugefügt
3. schrieb if-Anweisungen für jeden Menüpunkt (da ich verschiedene Attributwerte einspeisen wollte.)
4. hat funktioniert!

Hier ist mein Code.

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

Hoffe das hilft dir.