web-dev-qa-db-fra.com

Css-change mineur basé sur topmenu - comment?

Je veux faire des changements mineurs en css basés sur le choix du menu du haut (racine).

Quelle est la bonne façon de gérer cela dans WP?

// edit // C'est un site web (pages), pas de blog, et en gros, les couleurs de certains liens et de certaines images doivent dépendre de l'élément choisi dans le menu principal.

Exemple, structure de page:

 * Start 
 * Produits 
 * Prod.categ. 
 * Un produit 
 * Services 
 * Liste des services 
 * Emboîté 
 * Contact 
 * Bureau principal 
 * Liste du personnel 
 * À l'étranger 
 * Autre liste

Le niveau supérieur se trouve dans le menu principal, un niveau et les niveaux 2 et 3 dans le menu de gauche imbriqué. Désormais, les éléments colorés mineurs dans le menu secondaire changent en fonction de l'élément sélectionné dans le menu principal.

// fin éditer //

cordialement,/t

menuscmstemplate-tags
1
user4569

Ma réponse ajoute une classe à l'élément <body> via le filtre body_class. C'est probablement la manière la plus simple d'appliquer une mise en forme supplémentaire à n'importe quel élément de la page. Les classes ajoutées sont wpse14430_products, wpse14430_services ou wpse14430_contact (basées sur les slugs des premières pages de votre exemple).

Utilisation de wp_nav_menu()

Si vous utilisez wp_nav_menu() pour afficher le menu, WordPress crée une arborescence des éléments de menu. Nous pouvons utiliser ces informations pour obtenir la page d'accueil de l'élément en cours. Seul problème: nous en avons besoin dans la balise <body>, donc avant que le menu ne soit rendu. La solution consiste à enregistrer le menu dans une variable à laquelle nous nous faisons ensuite écho.

Prenant le thème Twenty Ten comme exemple, je déplace l'appel wp_nav_menu() vers le premier bloc <?php:

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

Et là où nous l'appelions, nous faisons maintenant écho à notre sortie sauvegardée:

echo $wpse14430_menu;

wp_nav_menu() possède un filtre intéressant, appelé après que les éléments de menu soient classés et classés . Les classes contiennent déjà des informations sur les ancêtres. Nous accrochons dans ce filtre et trouvons le premier élément qui est 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;
}

Maintenant, nous avons la page d'accueil et il ne reste qu'à l'ajouter à la classe body:

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;
}

Utiliser les pages comme structure de menu

Si vous n'utilisez pas wp_nav_menu() mais utilisez plutôt l'ordre direct des pages, vous pouvez également rechercher des ancêtres. Rappelez-vous que si vous ne définissez pas de menu à l'aide du nouveau système de menus, mais que vous affichez quand même la liste de pages via wp_nav_menu() (la fonctionnalité de repli), le système ci-dessus fonctionnera pour 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;
}
7
Jan Fabry

Si vous exportez le menu à l'aide de wp_list_pages/categories ou du générateur de menus intégré, chaque classe ou lien de catégorie reçoit une classe que vous pouvez styler. Cela signifie que la page ou le chat en cours sur lequel un utilisateur se trouve aura une classe que vous pourrez ensuite attribuer à une apparence "active".

Les liens de page parent vont afficher:

current_page_item ou current-menu-item (lorsque le niveau supérieur est actif) current_page_ancestor ou current-menu-ancestor (lorsque le premier enfant est actif)

Les liens de catégories afficheront:

current-cat (quand le premier niveau est actif) current-cat-parent (quand le premier enfant est actif)

Il existe d'autres classes que WP insérera automatiquement dans la balise li des éléments de menu, en fonction de la profondeur.

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

0
Mark