web-dev-qa-db-fra.com

Comment ajouter un élément de menu à WordPress WordPress

Je suis Twitter Bootstrap et j'ai besoin d'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 de Twitter Bootstrap, mais ce menu ne contient aucun menu déroulant et il me suffit d’ajouter cet attribut.

Ensuite, j’ai trouvé ceci: Ajouter des attributs personnalisés aux éléments de menu sans plugin , ce qui est très utile, comme il apparaît dans WordPress 3.6+, nous n’avons plus à faire de longs marcheurs complexes, mais nous pouvons plutôt utiliser ceci: http: // codex .wordpress.org/Plugin_API/Filter_Reference/nav_menu_link_attributes

Cependant, à partir de ce moment, la référence de l'API est assez simple et ne fournit aucun exemple. Etant donné qu'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 du menu. J'essaie donc de comprendre comment cibler un élément de menu avec # menu-item-7857 a ou tel.

Est-ce que quelqu'un sait 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?

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

MISE À JOUR - La seule réponse ci-dessous semble correspondre à quelque chose mais elle n'a pas été en mesure de déterminer comment trouver le numéro pour cibler mon lien spécifique et où/comment l'ajouter conditionnelle dans un exemple concret. 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 dis que c'est peut-être le nombre que je devrais cibler.

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 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 que plus de code est nécessaire mais perdu. Pour rappel, sans l'instruction if, cela fonctionne, mais il cible tous les liens plutôt que celui que je veux cibler.

functionsmenus
12
cchiera

Éditez spécifiquement le code que vous avez fourni dans la question initiale:

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

Le deuxième argument $item, mis à la disposition de votre fonction de filtrage, contient un objet d'élément de menu. Si vidé, 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'] ).

7
Rarst

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. Trouvé le numéro d'identification de mon menu.
  2. ajouté ces 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. 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.

1
Anoop Anson

Pourquoi abordez-vous 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 WP Admin pour ajouter un custom class à 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, vous pouvez essayer this .

0
guiniveretoo