Changement css mineur basé sur topmenu - comment?

Question

Changement css mineur basé sur topmenu - comment?

- 1
- 1445 2011-04-10
Je souhaite apporter desmodifications cssmineuresen fonction du choix dumenu supérieur (racine).

Quelleest labonnefaçon degérer cela dans WP?

//modifier// C'est un site Web (pages),pas deblog,et fondamentalement,les couleurs de certains lienset de certainesimages devraient dépendre de l'élément demenu supérieur choisi.

Exemple,structure depage:

* Début * Desproduits * Prod.categ. * Unproduit * Prestations de service * Liste des services * Imbriqué * Contact * Bureauprincipal * Liste dupersonnel * À l'étranger * Une autre liste

Leniveau supérieur setrouve dans unmenu supérieur,unniveauet leniveau 2 & amp; 3 dans lemenu degaucheimbriqué. Maintenant,les éléments de couleurmineurs dans le sidemenu changenten fonction de l'élément sélectionné dans lemenu supérieur.

//fin demodification//

salutations, /t
I want to make minor css-changes based on the choice of the top (root) menu.

What's the proper way to handle this in WP?

//edit// It's a website (pages), no blog, and basically, the colors of some links and some images should depend of the choosen top-menu-item.

Example, page-structure:

* Start * Products * Prod.categ. * A product * Services * List of services * Nested * Contact * Main office * List of staff * Abroad * Another list

Top level is in a topmenu, one-level, and level2&3 in nested left-menu. Now minor coloured items in sidemenu changes depending on selected top-menu item.

//end edit//

regards, /t
menus cms template-tags

- Pouvez-vous êtreplusprécis sur le changement que vousessayez de réaliser ...passer aumenu denavigation,passer à lapage affichée,etc.?
  
  Can you be more specific in what is the change you are trying to achieve...change to the navigation menu, change to the displayed page, etc?
  - 0
  - 2011-04-10
  - Ray Mitchell
- Parlez-vous d'unmenufrontal ou dumenuback-end (c'est-à-dire Admin UI)?
  
  Are you talking about a front-end menu, or the back-end (i.e. Admin UI) menu?
  - 0
  - 2011-04-10
  - Chip Bennett
- Et comment construisez-vous votremenu,utilisez-vous `wp_nav_menu ()` (c'est-à-dire lafonctionprincipale desmenus denavigationpersonnalisés),ou quelque chose d'autre comme `wp_list_pages ()` ou `wp_page_menu ()`?
  
  And how are you building your menu, are you using `wp_nav_menu()` (i.e. core Custom Nav Menus feature), or something else like `wp_list_pages()` or `wp_page_menu()`?
  - 0
  - 2011-04-10
  - Chip Bennett
- @chip,mercipour votre aide.Jen'aipas utilisé WP depuisplusieurs années,alorsj'ai du rattrapage àfaire.Les conseils sont lesbienvenus.
  
  @chip, thanks for your help. Haven't used WP for several years so have some catching up to do. Advices are welcome.
  - 0
  - 2011-04-10
  - user4569
- @chip,pour répondre à votre question,j'évaluepour utiliser lesnouvellesfonctionnalités dumenuprincipal ou simplement utiliser un arbreet essayer demasquer d'autresmenus (menus contextuelsnon décrits dans le Q original),en se cachant avec des champspersonnalisés.Je vaisprobablement régler leproblème,mais c'estencoremieux si cela correspond à lafaçon defaire de WP-guru.
  
  @chip, to answer your question, I'm evaluating to use either the new core-menu features or just use one tree and try to hide other menus (shortcut-menus not described in original Q), hiding with custom-fields. I'll probably sort it out, but it's even better if it's in line with WP-guru way of doing it.
  - 0
  - 2011-04-10
  - user4569
- qu'enest-il depage.phpet importer des cssen fonction de slug?Sale?
  
  what about page.php and import css on based on slug? Dirty?
  - 0
  - 2011-04-10
  - user4569
- S'il s'agit d'unmenu dynamique (c'est-à-dire que l'utilisateur ajoutera continuellement du contenu),je suggérerais simplement d'utiliser `wp_list_pages ()` - àmoinsbien sûr que vousne deviezinclureplus que de simplespages dans lemenu.
  
  If it's going to be a dynamic menu (i.e. the user will continually add content), I would suggest just using `wp_list_pages()` - unless of course, you need to include more than just Pages in the menu.
  - 0
  - 2011-04-10
  - Chip Bennett
- @ user4569: Sur labase de cetexemple,voulez-vous dire que lespages sous "Produits" doivent avoir un style (supplémentaire),celles sous "Services" un autreet "Contacter" untroisième?
  
  @user4569: Based on this example, do you mean that pages under "Products" should get one (extra) style, those under "Services" another, and "Contact" a third one?
  - 0
  - 2011-04-11
  - Jan Fabry
- @Jan; Oui,exactement.
  
  @jan; yes, exactly.
  - 0
  - 2011-04-11
  - user4569

2 réponses

votes

- 0
- 2011-04-10
Si vous sortez lemenuen utilisant wp_list_pages/categories ou legénérateur demenuintégré,alors chaque lien depage ou de catégorie reçoit une classe que vouspouvez styliser.Cela signifie que lapage ou le chat actuel sur lequel setrouve un utilisateur aura une classe que vouspourrezensuite styliserpour qu'elle ait l'air "active".

Les liens de lapageparent s'afficheront:

current_page_item ou current-menu-item (lorsque leniveau supérieurest actif) current_page_ancestor ou current-menu-ancestor (lorsque lepremierenfantest actif)

Les liens vers les catégories s'afficheront:

current-cat (lorsque leniveau supérieurest actif) current-cat-parent (lorsque lepremierenfantest actif)

Ilexiste d'autres classes que WPinsérera automatiquement dans labalise li des éléments demenu,en fonction de laprofondeur.

Je suppose que c'est ce que vous cherchiez àfaire,alorsj'espère que cela vous aidera.

If you are outputting the menu using wp_list_pages / categories or the built in menu builder, then each page or category link is given a class that you can style. This means the current page or cat that a user is on will have a class that you can then style to look "active."

Parent page links will display:

current_page_item or current-menu-item (when top level active) current_page_ancestor or current-menu-ancestor (when first child active)

Categories links will display:

current-cat (when top level active) current-cat-parent (when first child active)

There are other classes that WP will auto insert into the li tag of menu items, depending on the depth.

I'm assuming this is what you were looking to do, so I hope it helps.
- Mercimarque,je nepeuxpas le stylebasé sur l'ID,il doit être lié auparent dumenu supérieur.Aufuret àmesure que dunouveau contenuest ajouté (par le client),la coloration doit être correcte.
  
  Thanks mark, I can't style based on ID, it has to be related to the top-menu parent. As new content is added (by client), the coloring has to be correct.
  - 0
  - 2011-04-10
  - user4569

Jan Fabry · Accepted Answer · 2011-04-11

7

2011-04-11

Ma réponse ajoute une classe à l'élément <body> via lefiltre body_class. C'estprobablement lemoyen leplus simple d'appliquer unemiseen forme supplémentaire àn'importe quel élément de lapage. Les classes ajoutées sont wpse14430_products,wpse14430_services ou wpse14430_contact (enfonction des slugs despremièrespages de votreexemple).

Utilisation de `wp_nav_menu()`

Si vous utilisez wp_nav_menu()pour afficher lemenu,WordPress construit une arborescence des éléments demenu. Nouspouvons utiliser cesinformationspour obtenir lapremièrepage de l'élément actuel. Seulproblème:nousen avonsbesoin dans labalise <body>,donc avant que lemenune soit rendu. La solutionest de sauvegarder lemenu dans une variable dontnousnousfaisons l'échoplustard.

Enprenant lethème Twenty Ten commeexemple,je déplace l'appel wp_nav_menu() vers lepremierbloc <?php:

 $wpse14430_menu = wp_nav_menu( array(
    'container_class' => 'menu-header',
    'theme_location' => 'primary',
    'echo' => false,
) );

Et là oùnous l'appelions,nousfaisonsmaintenant écho ànotre sortieenregistrée:

 echo $wpse14430_menu;

wp_nav_menu() a unfiltreintéressant,appelé après que les éléments demenu sont ordonnéset ont leurs classes . Les classes contiennent déjà desinformations sur les ancêtres. Nousnous connectons à cefiltreet trouvons lepremier élément quiest l'élément actuel ou un ancêtre de celui-ci:

 add_filter( 'wp_nav_menu_objects', 'wpse14430_wp_nav_menu_objects' );
function wpse14430_wp_nav_menu_objects( $sorted_menu_items )
{
    // The items are in menu order, so the first match is the top item
    foreach ( $sorted_menu_items as $menu_item ) {
        if ( $menu_item->current || $menu_item->current_item_ancestor ) {
            $GLOBALS['wpse14430_top_page'] = get_post( $menu_item->object_id );
            break;
        }
    }
    return $sorted_menu_items;
}

Nous avonsmaintenant lapremièrepage,et il suffit de l'ajouter à la classebody:

 add_filter( 'body_class', 'wpse14430_body_class_menu' );
function wpse14430_body_class_menu( $body_class )
{
    if ( isset( $GLOBALS['wpse14430_top_page'] ) ) {
        $body_class[] = 'wpse14430_' . $GLOBALS['wpse14430_top_page']->post_name;
    }
    return $body_class;
}

Utilisation despages comme structure demenu

Si vousn'utilisezpas wp_nav_menu()mais utilisez à laplace l'ordre direct despages,vouspouvez également vérifier les ancêtres. N'oubliezpas que si vousne définissezpas demenuen utilisant lenouveau système demenusmais afficheztoujours la liste despages via wp_nav_menu() (lafonctionnalité de secours),le système ci-dessusfonctionnerapour vous.

 add_filter( 'body_class', 'wpse14430_body_class_pages' );
function wpse14430_body_class_pages( $body_class )
{
    if ( is_page() ) {
        $null = null;
        $top_page = get_post( $null );
        $ancestors = get_post_ancestors( $top_page );
        if ( $ancestors ) {
            $top_page = get_post( array_pop( $ancestors ) );
        }
        $body_class[] = 'wpse14430_' . $top_page->post_name;
    }
    return $body_class;
}

My answer adds a class to the <body> element via the body_class filter. This is probably the easiest way to apply extra formatting to any element on the page. The added classes are wpse14430_products, wpse14430_services or wpse14430_contact (based on the slugs of the top pages in your example).

Using `wp_nav_menu()`

If you use wp_nav_menu() to display the menu, WordPress builds a tree of the menu items. We can use this information to get the top page of the current item. Only problem: we need it in the <body> tag, thus before the menu is rendered. The solution is to save the menu in an variable which we later echo ourselves.

Taking the Twenty Ten theme as an example, I move the wp_nav_menu() call up to the first <?php block:

$wpse14430_menu = wp_nav_menu( array(
    'container_class' => 'menu-header',
    'theme_location' => 'primary',
    'echo' => false,
) );

And where we used to call it, we now echo our saved output:

echo $wpse14430_menu;

wp_nav_menu() has an interesting filter, called after the menu items are ordered and have their classes. The classes already contain ancestor information. We hook into this filter and find the first item that is the current item or an ancestor of it:

add_filter( 'wp_nav_menu_objects', 'wpse14430_wp_nav_menu_objects' );
function wpse14430_wp_nav_menu_objects( $sorted_menu_items )
{
    // The items are in menu order, so the first match is the top item
    foreach ( $sorted_menu_items as $menu_item ) {
        if ( $menu_item->current || $menu_item->current_item_ancestor ) {
            $GLOBALS['wpse14430_top_page'] = get_post( $menu_item->object_id );
            break;
        }
    }
    return $sorted_menu_items;
}

Now we got the top page, and only need to add this to the body class:

add_filter( 'body_class', 'wpse14430_body_class_menu' );
function wpse14430_body_class_menu( $body_class )
{
    if ( isset( $GLOBALS['wpse14430_top_page'] ) ) {
        $body_class[] = 'wpse14430_' . $GLOBALS['wpse14430_top_page']->post_name;
    }
    return $body_class;
}

Using pages as the menu structure

If you don't use wp_nav_menu() but instead use the direct ordering of the pages, you can also check for ancestors. Remember that if don't define a menu using the new menu system but still display the page list via wp_nav_menu() (the fallback functionality), the above system will work for you.

add_filter( 'body_class', 'wpse14430_body_class_pages' );
function wpse14430_body_class_pages( $body_class )
{
    if ( is_page() ) {
        $null = null;
        $top_page = get_post( $null );
        $ancestors = get_post_ancestors( $top_page );
        if ( $ancestors ) {
            $top_page = get_post( array_pop( $ancestors ) );
        }
        $body_class[] = 'wpse14430_' . $top_page->post_name;
    }
    return $body_class;
}

Chapeaupour une réponsetrèsbien présentée.J'y reviendraiplustard.Grandmerci.

Hats off for a very well laid out answer. Will look into it further later. Big thanks.
- 0
- 2011-04-11
- user4569

Changement css mineur basé sur topmenu - comment?

2 réponses

Utilisation de wp_nav_menu()

Utilisation despages comme structure demenu

Using wp_nav_menu()

Using pages as the menu structure

Utilisation de `wp_nav_menu()`

Using `wp_nav_menu()`