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


17

Je suis Twitter Bootstrap et j'ai besoin d'ajouter l'attribut data-toggle = "modal" à la balise a du lien de menu. Lors de la recherche de la plupart des résultats, faites référence à une marche pour les menus déroulants Twitter Bootstrap, mais ce menu n'a pas de listes déroulantes et j'ai seulement besoin d'ajouter l'attribut particulier.

Ensuite, j'ai trouvé ceci: Ajoutez 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 à faire de longs marcheurs complexes et à la place, nous pouvons utiliser ceci: http://codex.wordpress.org/Plugin_API / Filter_Reference / nav_menu_link_attributes

Cependant, à partir de cette exécution, cette référence API est assez nue et n'offre aucun exemple et comme elle est si nouvelle, il y a très peu de références à elle sur Google.

J'ai essayé ceci en 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 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 or such.

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

Pour noter, j'ai trouvé l'exemple suivant mais il ne cible que les articles qui ont des enfants, ce qui n'aide pas mais peut être 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);

MISE À JOUR - La seule réponse ci-dessous semble être sur quelque chose, mais elle n'a pas pu déterminer comment trouver réellement le numéro pour cibler mon lien spécifique et où / comment ajouter ce conditionnel dans un exemple de travail. Ajout d'un commentaire mais sans réponse. Depuis environ 18 jours, je pensais voir 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 numéro 7858 alors je pense que c'est peut-être le numéro que je devrais viser.

Mais quand j'essaye 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 la déclaration, l'un des commentateurs a suggéré que j'obtienne l'erreur suivante:

Fatal error: Cannot use object of type WP_Post as array

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


Je veux insérer <? Php the_id ();?> Dans la variable $ atts.quelque chose comme ça // inspecter $ item if ($ item-> ID == $ menu_target) {$ atts ['data-toggle'] = 'modal - <? php the_id ();?>'; } retourner $ atts; Pouvez-vous m'aider, comment puis-je insérer the_id dans la variable $ atts. Merci
nadzhq

Réponses:


36

Modification spécifique du 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;
}

Après avoir échangé certaines de mes propres valeurs qui l'ont fait! Je vous remercie! Marqué comme correct, mais dit que je dois attendre 23 heures de plus avant de pouvoir attribuer la prime.
cchiera

Heureux d'aider! : D
Jen

J'ai mis un rappel dans Fantastical donc je n'oublie pas d'attribuer la prime demain.
cchiera

Et si vous avez plusieurs éléments de menu comme cible?
Eric Mitjans

utilisez simplement l'instruction if si la valeur de basculement des données est différente. Ou vous pouvez enregistrer l'identifiant dans la clé du tableau (étant donné qu'ils sont uniques) et le nom modal comme valeur de tableau. Vérifiez ensuite la déclaration if avecarray_key_exists()
Sisir

8

Le deuxième $itemargument, qui est mis à la disposition de votre fonction de filtre, contient un objet d'élément de menu. S'il est vidé, il ressemble à 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 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'] )


Merci pour cela! Cependant, je ne suis pas sûr de comprendre comment obtenir l'ID $ item pour mon élément de menu particulier. Dans votre exemple, le 2220 est également le même que votre URL " dev.rarst.net/?p=2220 ". Mon lien auquel je veux ajouter l'attribut data ne va pas vers une autre URL wordpress mais est plutôt href = "# ContactForm". Sur la base de votre exemple ci-dessus, j'ai googlé plus et essayé d'exécuter echo var_export ($ GLOBALS ['post'], TRUE); mais quand je regarde près de l'élément de menu individuel, je ne vois aucun ID unique. Pouvez-vous clarifier? Ou dans "if (2220 == $ item ['ID'])" "Merci d'avance!
cchiera

2
L'erreur que vous voyez est parce que $itemc'est un objet, pas un tableau; changer le $item['ID']en $item->ID.
Jen

1

Pourquoi n'abordez-vous pas ce problème dans une direction différente? 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'identifiant), utilisez la zone Admin WP pour ajouter une classe personnalisée à l'élément de menu que vous souhaitez cibler. Utilisez ensuite 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, vous pouvez essayer ceci .


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:

  1. J'ai trouvé le numéro d'identification de mon menu.
  2. a ajouté ces lignes de code de @guiniveretoo
  3. a écrit des instructions if pour chaque élément de menu (car je voulais que différentes valeurs d'attribut soient injectées.)
  4. 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 aidera.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.