it-swarm.com.de

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. Bei der Suche in den meisten Ergebnissen 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+ angezeigt wird, müssen wir keine langen, komplexen Schritte mehr ausführen und können stattdessen Folgendes verwenden: 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 es 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 man ein Beispiel für die Ausrichtung eines Menüelements findet oder wie man sich auf die Informationen stützt, 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 ob sie sich auf etwas bezieht, konnte jedoch nicht feststellen, wie die Nummer für die Ausrichtung auf einen bestimmten Link tatsächlich gefunden werden kann und wo bzw. 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, den ich anvisieren 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.

12
cchiera

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

Das zweite Argument $item, 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, zum Beispiel if ( 2220 == $item['ID'] )

7
Rarst

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.

1
Anoop Anson

Warum nähern Sie sich diesem Problem nicht aus einer anderen Richtung? Anstatt zu versuchen, den Menüpunkt mit id == ?? Verwenden Sie den Admin-Bereich von WP, um dem Menüeintrag, auf den Sie abzielen möchten, eine benutzerdefinierte Klasse hinzuzufügen, die sich irgendwann ändern kann (der Menüeintrag, nicht die ID). 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 jQuery nicht verwenden, können Sie versuchen, this .

0
guiniveretoo