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

11

Je suis Twitter Bootstrap et je dois ajouter l'attribut data-toggle="modal" à la balise du lien de menu. Lors de la recherche de la plupart des résultats, faites une recherche dans les menus déroulants Twitter Bootstrap, mais ce menu n’a pas de liste déroulante et il me suffit d’ajouter cet attribut particulier.

Ensuite, j'ai trouvé ceci: ajouter des attributs personnalisés aux éléments de menu sans plugin , ce qui est très utile car il apparaît dans WordPress 3.6+, nous n'avons plus besoin de faire de longs marcheurs complexes, mais plutôt d'utiliser ceci: enlace

Cependant, à partir de ce moment, cette référence d'API est assez nue et ne fournit aucun exemple. Comme elle est nouvelle, il y a très peu de références à cela sur Google.

J'ai d'abord essayé ceci:

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 cela fonctionne cependant, comme prévu, ajoute l'attribut à toutes les balises a du menu. J'essaie donc de comprendre comment cibler un élément de menu avec # menu-item-7857 a ou tel.

Quelqu'un sait-il où trouver un exemple de ciblage d'un élément de menu ou capable de déterminer comment se baser sur les informations contenues dans la référence d'API liée ci-dessus?

À noter, j'ai trouvé l'exemple suivant, mais il ne cible que les articles ayant des enfants, ce qui n'aide pas, mais peut aller dans la bonne 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 - La seule réponse ci-dessous semble correspondre à quelque chose mais elle n'a pas été en mesure de déterminer comment trouver réellement le numéro pour cibler mon lien spécifique et où / comment l'ajouter conditionnelle dans un exemple de travail. Ajout d'un commentaire mais pas de réponse. Depuis environ 18 jours, je pensais que je verrais si une prime aiderait.

Quand je regarde le code du lien que je 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 le nombre 7858, alors je me suis dit que c’est peut-être le nombre que je devrais cibler.

Mais quand j'essaie par exemple:

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 que si l'instruction, l'un des commentateurs m'a suggéré d'obtenir l'erreur suivante:

Fatal error: Cannot use object of type WP_Post as array

Je suppose qu’il faut plus de code mais qu’il est perdu. Pour rappel, sans l'instruction if, cela fonctionne, mais il cible tous les liens plutôt que celui que je veux cibler.

    
posée cchiera 04.11.2013 - 07:02

4 réponses

30

Modifiez spécifiquement le code que vous avez fourni 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;
}
    
réponse donnée guiniveretoo 22.11.2013 - 16:41
7

Le deuxième argument $item , mis à la disposition de votre fonction de filtrage, contient un objet d'élément de menu. Si déchargé, cela ressemble à quelque chose comme ça:

[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 de menu spécifique, vous devez formuler votre condition et la comparer aux données disponibles dans l'objet, par exemple if ( 2220 == $item['ID'] )

.     
réponse donnée Rarst 04.11.2013 - 10:20
1

Je voulais ajouter des lettres de données au menu personnalisé que j'avais créé dans WordPress.

Les étapes que j'ai choisies étaient les suivantes:

  1. J'ai trouvé le numéro d'identification de mon menu.
  2. a ajouté les lignes de code de @guiniveretoo
  3. a écrit des instructions if pour chaque élément de menu (car je voulais injecter différentes valeurs d'attribut.)
  4. a travaillé!

Voici mon 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 aide.

    
réponse donnée Anoop Anson 01.05.2018 - 08:56
0

Pourquoi ne pas aborder ce problème sous un angle différent? Plutôt que d'essayer de cibler l'élément de menu avec id == ?? qui pourrait changer à un moment donné (l’élément de menu, pas l’id), utilisez la zone d’admin de WP pour ajouter un classe personnalisée à l'élément de menu que vous souhaitez cibler. Puis utilisez cette classe dans votre Javascript pour déclencher les informations dont vous avez besoin:

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

Mon javascript n'est pas garanti. Si vous n'utilisez pas jQuery, essayez this .

    
réponse donnée guiniveretoo 22.11.2013 - 16:31

Lire d'autres questions sur les étiquettes