web-dev-qa-db-fra.com

Comment obtenir des étiquettes de navigation de menu pour générer du HTML

J'essaie de suivre les conseils de Jason Bradley sur la manière de styliser mes menus Wordpress.

Plus précisément, je souhaite insérer une icône avant les éléments de navigation à l'aide de Font-Awesome .

J'ai essayé de mettre ce code dans le champ Etiquette de navigation pour mon lien "Accueil":

<i class="icon-fixed-width icon-home"></i> Home

Cependant, lorsque je visualise la page dans mon navigateur, le code HTML à afficher est affiché, il n'interprète pas la balise, ni aucun autre code HTML que je lui lance, d'ailleurs.

Les menus Wordpress ont-ils changé en 3.6? Est-ce que je manque quelque chose d'évident?

Je sais que mon installation font-awesome fonctionne parce que j'utilise leurs icônes sur tout mon site. Merci.

menusnavigationicon
1
JP Lew

Le champ "Navigation" est et non l'endroit où vous voulez placer votre classe CSS. La navigation correspond à ce que l'utilisateur verra dans le menu, alors n'y mettez pas de code.

Pour entrer une classe CSS personnalisée dans votre élément, vous devez procéder comme suit:

  • Cliquez sur l'onglet "Options d'écran" dans le coin supérieur droit de la page.
  • Sous "Afficher les propriétés du menu avancé", cochez la case "Classes CSS".
  • Désormais, pour chaque élément de menu, vous disposez d'un champ intitulé "Classes CSS (facultatif)" dans lequel vous pouvez entrer "icon-fixed-width icon-home".

Travail accompli! :)

3
Manu

Obtenez un titre de navigation personnalisé en utilisant l'identifiant de la page:

function get_custom_nav_title( $menu_name, $page_id ) { 
    $args = array(
        'order'                  => 'ASC',
        'orderby'                => 'menu_order',
        'post_type'              => 'nav_menu_item',
        'post_status'            => 'publish',
        'output'                 => ARRAY_A,
        'output_key'             => 'menu_order',
        'nopaging'               => true,
        'update_post_term_cache' => false 
    );
    $items = wp_get_nav_menu_items( $menu_name, $args );
    //print_r( $items );
    foreach ( $items as $item ) {
        if ( $item->object_id == $page_id ) {
            return $item->title;
        }
    }   
}
1
Rahul Mishra