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

16

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.

cchiera
quelle
Ich möchte <? Php the_id ();?> In die Variable $ atts einfügen. So etwas // inspiziere $ item if ($ item-> ID == $ menu_target) {$ atts ['data-toggle'] = 'modal - <? php the_id ();?>'; } return $ atts; Können Sie mir bitte helfen, wie kann ich die_ID in die Variable $ atts einfügen? Danke
Nadzhq

Antworten:

35

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;
}
Jen
quelle
Nachdem ich einige meiner eigenen Werte eingetauscht hatte, war es soweit! Vielen Dank! Hat es als korrekt markiert, sagt aber, dass ich noch 23 Stunden warten muss, bevor ich das Kopfgeld vergeben kann.
cchiera
Freue mich zu helfen! : D
Jen
Ich habe eine Erinnerung in Fantastisch gesetzt, damit ich nicht vergesse, das Kopfgeld morgen zu vergeben.
cchiera
Was ist, wenn Sie mehrere Menüpunkte als Ziel haben?
Eric Mitjans
Verwenden Sie einfach die Anweisung multiple if, wenn der Wert für das Umschalten der Daten unterschiedlich ist. Sie können die ID auch im Array-Schlüssel (sofern sie eindeutig ist) und den modalen Namen als Array-Wert speichern. Dann überprüfen Sie die if-Anweisung mitarray_key_exists()
Sisir
8

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

Rarst
quelle
Danke dafür! Ich bin nicht ganz sicher, wie ich die $ item ID für mein bestimmtes Menüelement erhalte. In Ihrem Beispiel entspricht der 2220 auch Ihrer URL " dev.rarst.net/?p=2220 ". Mein Link, zu dem ich das Datenattribut hinzufügen möchte, wechselt nicht zu einer anderen WordPress-URL, sondern lautet href = "# ContactForm". Anhand Ihres obigen Beispiels habe ich mehr gegoogelt und versucht, echo var_export ($ GLOBALS ['post'], TRUE) auszuführen. Wenn ich aber in die Nähe des jeweiligen Menüpunkts schaue, sehe ich keine eindeutige ID. Könntest Du das erläutern? Oder in "if (2220 == $ item ['ID'])" Vielen Dank im Voraus!
cchiera
2
Der Fehler, den Sie sehen, liegt daran, dass $itemes sich um ein Objekt handelt, nicht um ein Array. ändere den $item['ID']auf $item->ID.
Jen
1

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 .

Jen
quelle
1

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.

Anoop Anson
quelle