Comment ajouter un attribut de données à un élément de menu WordPress

Question

Comment ajouter un attribut de données à un élément de menu WordPress

- 19
- 42901 2013-11-04
Je suis Twitter Bootstrapet j'aibesoin d'ajouter l'attribut data-toggle="modal" à labalise a du lien demenu. Lors de la recherche de laplupart des résultats,tous les résultatsfont référence à unemarchepour lesmenus déroulants de Twitter Bootstrap,mais cemenun'apas de liste déroulanteet jen'aibesoin que d'ajouter l'attributparticulier.

Ensuite,j'aitrouvé ceci: Ajouter des attributspersonnalisés aux éléments demenu sansplugin ,ce quiesttrès utile caril apparaît dans WordPress 3.6+,nousn'avonsplus àfaire de longsmarcheurs complexeset à laplace,nouspouvons utiliser ceci: http://codex.wordpress.org/Plugin_API/Filter_Reference/nav_menu_link_attributes

Cependant,àpartir de cetteexécution,cette référence APIest assez simpleet nepropose aucunexempleet commeelleest sinouvelle,il y atrèspeu de références sur Google.

J'aiessayé cecien premier:

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

et celafonctionne cependant,commeprévu,ajoute l'attribut àtoutes lesbalises a dumenu. J'essaie donc de comprendre comment cibler un élément demenu avec #menu-item-7857 outel.

Quelqu'un sait-il oùtrouver unexemple de ciblage d'un élément demenu ouest-il capable de déterminer comment sebaser sur lesinformations contenues dans la référence API liée ci-dessus?

Ànoter,j'aitrouvé l'exemple suivantmaisilne cible que les éléments qui ont desenfants,ce quin'aidepasmaispeut être dans labonne direction:

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

MISE À JOUR - La seule réponse ci-dessous ressemble à quelque chose,mais àpartir de là,ellen'apas étéen mesure de déterminer commenttrouver réellement lenuméropour ciblermon lien spécifiqueet où/comment ajouter ce conditionnel dans unexemple detravail. Ajout d'un commentairemaisje n'aipas reçu de réponse. Depuisenviron 18jours,je pensais voir si uneprime aiderait.

Quandje regarde le code du lien queje veux cibler:

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

Je vois lenombre 7858 alorsje pense que c'estpeut-être lenombre queje devrais cibler.

Mais quandj'essayeparexemple:

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

Cependant,en ajoutant queif,le seul commentateur a suggéré quej'obtiens l'erreur suivante:

Fatal error: Cannot use object of type WP_Post as array

Je suppose queplus de codeestnécessaire,mais à unperdu. Pour rappel,sans l'instructionif,celafonctionnemaisil cibletous les liensplutôt que le lien queje veux cibler.
I'm Twitter Bootstrap and need to add data-toggle="modal" attribute to the a tag of menu link. Upon searching most all results reference doing a walking for Twitter Bootstrap dropdown menus however this menu has no dropdowns and I only need to add the particular attribute.

Next I found this: Add custom attributes to menu items without plugin which is very helpful as it appears in WordPress 3.6+ we no longer have to do long complex walkers and instead can use this: http://codex.wordpress.org/Plugin_API/Filter_Reference/nav_menu_link_attributes

However as of this running that API reference is quite bare and offers no examples and since it's so new there are very few references to it on Google.

I tried this first:

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

and that does work however it as expected adds the attribute to all the a tags in the menu. So I'm trying to figure out how to target one menu item with #menu-item-7857 a or such.

Does anyone know where to find an example of targeting a menu item or able to determine how to basd on the information that's in the above linked API reference?

To note, I did find the following one example but it only targets items that have children which does not help but may be in the right direction:

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 - The only answer below sounds like it's on to something but from it wasn't able to determine how to actually find the number to target my specific link and where/how to add that conditional in a working example. Added a comment but didn't hear back. Since been about 18 days thought I'd see if a bounty would help.

When I look at the code for the link I want to target:

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

I see the number 7858 so thinking maybe that is the number I should be targeting.

But when I try for instance:

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

However adding that if statement the one commenter suggested I get the following error:

Fatal error: Cannot use object of type WP_Post as array

I'm assuming more code is required but at a lost. As a reminder without the if statement it works however it targets all links rather than the one link I want to target.
functions menus

- Je veuxinsérer Dans la variable $ atts. Quelque chose comme ça//inspecter $item if ($item-> ID==$menu_target) {$ atts ['data-toggle']='modal - ';} return $ atts;Pouvez-vous s'il vousplaîtm'aider commentpuis-jeinsérerthe_id dans la variable $ atts.Merci
  
  I want to insert into the $atts variable.something like that // inspect $item if ($item->ID == $menu_target) { $atts['data-toggle'] = 'modal-'; } return $atts; Can u please help me how can i insert the_id into the $atts variable. Thanks
  - 0
  - 2014-02-15
  - nadzhq

4 réponses

votes

8

2013-11-04

Le deuxième argument $item,quiestmis à disposition de votrefonction defiltrage,contient un objet d'élément demenu. S'ilest vidé,il ressemble à quelque chose comme ceci:

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

Pour cibler un élément demenu spécifique,vous devezformuler votre conditionet la comparer aux données disponibles dans l'objet,parexemple if ( 2220 == $item['ID'] )

The second $item argument, which is being made available to your filter function, contains a menu item object. If dumped it looks something like this:

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

To target specific menu item you need to formulate your condition and check it against data available in the object, for example if ( 2220 == $item['ID'] )

Mercipour cela!Cependant,je ne suispas sûr de comprendre comment obtenir l'ID d'élément $pourmon élément demenuparticulier.Dans votreexemple,le 2220est également lemême que votre URL "http://dev.rarst.net/?p=2220".Mon lien auquelje veux ajouter l'attribut datane vapas vers une autre URL wordpressmaisestplutôt href="# ContactForm".Sur labase de votreexemple ci-dessus,j'ai cherchéplus sur Googleet essayé d'exécuterecho var_export ($ GLOBALS ['post'],TRUE);mais quandje regardeprès de l'élément demenuindividuel,je ne vois aucunidentifiant unique.Pouvez-vous clarifier?Ou dans "if (2220==$item ['ID'])" Merci d'avance!

Thanks for this! I'm not quite sure I understand how to get the $item ID for my particular menu item however. In your example the 2220 is also the same as your url "http://dev.rarst.net/?p=2220". My link I want to add the data-attribute to doesn't go to another wordpress url but rather is href="#ContactForm". Based on your example above I googled more and tried running echo var_export($GLOBALS['post'], TRUE); but when I look near the invidual menu item I don't see any unique ID. Can you clarify? Or in "if ( 2220 == $item['ID'] )" Thanks in advance!
- 0
- 2013-11-04
- cchiera
L'erreur que vous voyezest que «$item»est un objet,pas untableau;changez `$item ['ID']`en `$item-> ID`.

The error you're seeing is because `$item` is an object, not an array; change the `$item['ID']` to `$item->ID`.
- 2
- 2013-11-22
- Jen

- 1
- 2013-11-22
Pourquoin'abordez-vouspas ceproblème sous un angle différent?Plutôt que d'essayer de cibler l'élément demenu avecid==??quipourrait changer à unmoment donné (l'élément demenu,pas l'id),utilisez la zone d'administration WPpour ajouter un custom class vers l'élément demenu que vous souhaitez cibler.Ensuite,utilisez cette classe dans votre Javascriptpour déclencher lesinformations dont vous avezbesoin:

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

Monjavascriptn'estpasgaranti.Si vousn'utilisezpasjQuery,vouspouvezessayer ceci .
Why don't you approach this problem from a different direction? Rather than attempting to target the menu item with id == ?? which could change at some point (the menu item, not the id), use the WP Admin area to add a custom class to the menu item you want to target. Then use that class in your Javascript to trigger the information you need:

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

My javascript is not guaranteed. If you're not using jQuery, you could try this.

1

2018-05-01

Je voulais ajouter des lettres de données aumenupersonnalisé quej'avais créé dans WordPress.

Les étapes quej'ai choisies étaient:

J'aitrouvé lenuméro d'identification demonmenu.
a ajouté ces lignes de code depuis @guiniveretoo
a écrit desinstructionsif pour chaque élément demenu (carje voulais que différentes valeurs d'attribut soientinjectées.)
afonctionné!

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

J'espère que cela vous aidera.

I wanted to add data-letters to the custom menu that I had created in WordPress.

The steps I chose was:

Found my menu's id number.
added those lines of code from @guiniveretoo
wrote if statements for each menu items (as I wanted different attribute values to be injected.)
worked!

Here is my 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;
}

Hope this helps you.

Jen · Accepted Answer · 2013-11-22

38

2013-11-22

Modifier spécifiquement le code que vous avezfourni dans la question d'origine:

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

Specifically editing the code you provided in the original question:

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

Après avoir échangé certaines demespropres valeurs,j'ai réussi!Je vous remercie!Marqué comme correct,mais dit queje dois attendre 23 heures deplus avant depouvoir attribuer laprime.

After I swapped in some of my own values that did it! Thank you! Marked it as correct, but says I need to wait 23 more hours before I can award the bounty.
- 0
- 2013-11-22
- cchiera
Heureux d'aider! :RÉ

Happy to help! :D
- 0
- 2013-11-22
- Jen
J'aimis un rappel dans Fantasticalpourne pas oublier d'attribuer laprime demain.

I set a reminder in Fantastical so I don't forget to award the bounty tomorrow.
- 0
- 2013-11-22
- cchiera
Et si vous avezplusieurs éléments demenu comme cible?

What if you have several menu items as target?
- 0
- 2015-11-20
- Eric Mitjans
utilisez simplementplusieursinstructionsif si la valeur debasculement des donnéesest différente.Ou vouspouvezenregistrer l'id dans la clé dutableau (étant donné qu'ils sont uniques)et lenommodalen tant que valeur dutableau.Vérifiezensuite l'instructionif avec `array_key_exists ()`

just use multiple if statement if data-toggle value is different. Or you can save id into array key (considering they are unique) and modal name as array value. Then check the if statement with `array_key_exists()`
- 0
- 2016-04-17
- Sisir