it-swarm-pt.com

Como ter classes CSS de itens do menu personalizado para wp_page_menu () ou wp_list_pages ()

Eu quero adicionar classes personalizadas aos meus itens de menu. Para cada subpágina eu mostro seus irmãos como uma navegação:

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

        }

Isso me dá uma lista com links. Eu quero dar a cada elemento de âncora a mesma classe personalizada. Como faço isso?

menusnavigationsub-menuwp-list-pages
1
Mathias

Uma das maneiras é estender a classe Walker_Page. Veja o comentário no código para saber para onde vão as alterações.

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

Use este Walker personalizado em seu modelo:

$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)

A maneira muito mais fácil é usar o jQuery.

0
Max Yudin

Não há um filtro bom para adicionar as classes CSS aos elementos âncora (<a>), mas, se você precisar deles para o estilo CSS, poderá usar o filtro para os elementos <li>. Este filtro é chamado page_css_class , que é, nativamente, usado somente em páginas de listagem através de wp_list_pages(). Ele filtra as classes usadas para as tags li-.

Para usar este filtro, basta conectá-lo:

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

add_filter( 'page_css_class', 'wpse222112_pagelist_item_css_classes' );

Se você precisar apenas deste menu, remova-o após chamar wp_list_pages() usando

remove_filter( 'page_css_class', 'wpse222112_pagelist_item_css_classes' );

Por uma questão de completude: há também um filtro para toda a saída da lista de páginas, que você precisaria usar se fosse necessário adicionar uma classe às tags de âncora (o que não é no seu caso). Este filtro é wp_list_pages .

3
engelen