web-dev-qa-db-fra.com

Quand/à (ou "à la maison") mon menu ne reçoit pas une classe d'item de menu courant

Je suis un wordpress noob en train de peaufiner un thème, j'essaie donc de comprendre comment cela fonctionne. J'ai lu environ 10 articles liés dans SE, mais je ne les ai pas encore. Mon problème est le suivant:

header.php semble générer le menu avec,

<?php wp_nav_menu(array('theme_location' => 'nav-menu','container'  => 'div', 'container_class' => 'menu' )); ?>

Dans le wp-admin, j'ai créé un menu avec

"Blog | À propos | Contact"

qui pointent vers la racine et deux pages: "/" | "à propos" | "contact" (très standard). J'aimerais maintenant styler le menu en fonction de la page " active ". Pour " about " et " contact ", cela semble très facile. Les classes générées pour chaque élément de menu incluent current-menu-item . Cependant, quand sur la page d'accueil mon menu "blog" "li" n'obtient que les classes

menu-item menu-item-type-custom menu-item-object-custom menu-item-47

et donc ne peut pas être appelé en conséquence. J'ai lu des articles sur le filtrage, l'utilisation de fonctions, etc., mais je ne comprends pas très bien. Si je définis une fonction dans functions.php, où pourrais-je l’utiliser plus tard?.

Toute idée et aide est grandement appréciée,

menuscssfilters
2
Massagran

Pour que cela fonctionne, vous devez aller dans le menu admin et dans la section des pages, cliquez sur l'onglet qui dit 'voir tout' . En haut de la liste se trouve une option spéciale pour votre page d'accueil, qu'il s'agisse de l'affichage normal du blog ou d'une page spécifique. Ajoutez cela au menu et tout va bien.

enter image description here

5
sanchothefat

Le menu peut facilement être généré en utilisant ce code,

<ul>
                <li <?php if(is_home()) { ?> class="active" <?php } ?>><a href="<?php echo get_option('home'); ?>/">Home</a></li>
                <?php wp_list_pages('depth=1&sort_column=menu_order&title_li=' ); ?>
            </ul>

La fonction utilisée pour créer une liste de pages publiées, wp_list_pages (), ajoute automatiquement une classe current_page_item à l’élément de la liste correspondant à la page affichée.

Vous devez simplement ajouter la classe .current_page_item à votre fichier style.css:

/* Style the list element */
li.current_page_item{
background:#eee;
color:#777;
}

/* Style the link element */
li.current_page_item a{
text-decoration:underline;
}
0
Sufiyan Ghori

Ce n'est pas très joli (et pourrait être amélioré en prenant dynamiquement l'ID d'élément de menu avec php) mais vous pouvez le faire:

     <?php if (is_front_page()) echo
       '<style type="text/css" title="text/css">.menu-item-14 a
         {your current_page_item style here}</style>'
    ;?>

Changez le .menu_item-14 en classe de la page d’accueil actuelle et changez le current_menu_item en votre CSS, aussi.

Placez cette déclaration juste après le

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

dans header.php pour que le CSS soit chargé après la feuille de style principale.

0
markratledge

Étrange que wordpress ne prenne pas cette page comme page actuelle. Mais une solution simple est la suivante (CSS uniquement).

Dans votre style.css

.home .menu-item-47 {
   /* current-menu-item styles */
}
0
Rob Vermeer