web-dev-qa-db-fra.com

Comment avoir des classes CSS d'élément de menu personnalisé pour wp_page_menu () ou wp_list_pages ()

Je veux ajouter des classes personnalisées à mes éléments de menu. Pour chaque sous-page, je montre ses frères et sœurs comme une navigation:

 global $post;     

        if ( is_page() && $post->post_parent ) {


            $args = array(
                'sort_column'  => 'menu_order',
                'title_li'     => '',
                'child_of'=> $post->post_parent
            );
            $childpages = wp_list_pages($args );

        }

Cela me donne une liste avec des liens. Je veux donner à chaque élément d'ancrage la même classe personnalisée. Comment je fais ça?

menusnavigationsub-menuwp-list-pages
1
Mathias

L'un des moyens est d'étendre la classe Walker_Page. Voir le commentaire dans le code pour savoir où vont les changements.

class My_Siblings_CSS_Walker_Page extends Walker_Page {
    public function start_el( &$output, $page, $depth = 0, $args = array(), $current_page = 0 ) {
        if ( $depth ) {
            $indent = str_repeat( "\t", $depth );
        } else {
            $indent = '';
        }

        $css_class = array( 'page_item', 'page-item-' . $page->ID );

        if ( isset( $args['pages_with_children'][ $page->ID ] ) ) {
            $css_class[] = 'page_item_has_children';
        }

        if ( ! empty( $current_page ) ) {
            $_current_page = get_post( $current_page );
            if ( $_current_page && in_array( $page->ID, $_current_page->ancestors ) ) {
                $css_class[] = 'current_page_ancestor';
            }
            if ( $page->ID == $current_page ) {
                $css_class[] = 'current_page_item';
            } elseif ( $_current_page && $page->ID == $_current_page->post_parent ) {
                $css_class[] = 'current_page_parent';
            }
        } elseif ( $page->ID == get_option('page_for_posts') ) {
            $css_class[] = 'current_page_parent';
        }

        $css_classes = implode( ' ', apply_filters( 'page_css_class', $css_class, $page, $depth, $args, $current_page ) );

        if ( '' === $page->post_title ) {
            $page->post_title = sprintf( __( '#%d (no title)' ), $page->ID );
        }

        $args['link_before'] = empty( $args['link_before'] ) ? '' : $args['link_before'];
        $args['link_after'] = empty( $args['link_after'] ) ? '' : $args['link_after'];

        $output .= $indent . sprintf(
            // '<li class="%s"><a href="%s">%s%s%s</a>', // before
            '<li class="%s"><a href="%s" class="my-custom-css-class">%s%s%s</a>', // after 
            $css_classes,
            get_permalink( $page->ID ),
            $args['link_before'],
            apply_filters( 'the_title', $page->post_title, $page->ID ),
            $args['link_after']
        );

        if ( ! empty( $args['show_date'] ) ) {
            if ( 'modified' == $args['show_date'] ) {
                $time = $page->post_modified;
            } else {
                $time = $page->post_date;
            }

            $date_format = empty( $args['date_format'] ) ? '' : $args['date_format'];
            $output .= " " . mysql2date( $date_format, $time );
        }
    }
}

Utilisez ce Walker personnalisé dans votre modèle:

$args = array(
    'sort_column' => 'menu_order',
    'title_li'    => '',
    'child_of'    => $post->post_parent
    'walker'      => new My_Siblings_CSS_Walker_Page() // use Walker here
);
// $childpages = wp_list_pages($args);
wp_list_pages($args); // as you utilize default 'echo' parameter (true)

Le moyen le plus simple consiste à utiliser jQuery.

0
Max Yudin

Il n’existe aucun filtre permettant d’ajouter les classes CSS aux éléments d’ancre (<a>), mais comme vous en avez besoin pour le style CSS, vous pouvez utiliser le filtre pour les éléments <li>. Ce filtre s'appelle page_css_class , qui est utilisé, de manière native, uniquement dans la liste des pages via wp_list_pages(). Il filtre les classes utilisées pour les balises li-.

Pour utiliser ce filtre, il suffit d’y accrocher:

function wpse222112_pagelist_item_css_classes( $classes ) {
    $classes[] = 'wpse222112-class';
    return $classes;
}

add_filter( 'page_css_class', 'wpse222112_pagelist_item_css_classes' );

Si vous n'en avez besoin que pour ce menu, veillez à le supprimer après avoir appelé wp_list_pages() à l'aide de

remove_filter( 'page_css_class', 'wpse222112_pagelist_item_css_classes' );

Par souci d’exhaustivité: il existe également un filtre pour l’ensemble de la sortie de la liste de pages, que vous devrez utiliser s’il était nécessaire d’ajouter une classe aux balises d'ancrage (ce qui n'est pas le cas dans votre cas). Ce filtre est wp_list_pages .

3
engelen