如何拥有wp_page_menu()或wp_list_ages()的自定义菜单项css类

时间:2016-03-30 作者:Mathias

我想向菜单项添加自定义类。对于每个子页面,我将其同级显示为导航:

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

        }
这给了我一个链接列表。我想给每个锚元素提供相同的自定义类。我该怎么做?

2 个回复
最合适的回答,由SO网友:Max Yudin 整理而成

其中一种方法是扩展Walker_Page 班查看代码中的注释以了解更改的方向。

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 );
        }
    }
}
在模板中使用此自定义Walker:

$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)
更简单的方法是使用jQuery。

SO网友:engelen

没有好的过滤器可以将CSS类添加到锚点(<a>) 元素,但当您需要它来设置CSS样式时,您可以将过滤器用于<li> 元素。此筛选器被称为page_css_class, 它在本机上仅用于通过wp_list_pages(). 它过滤用于li-标签。

要使用此过滤器,只需挂接它:

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

add_filter( \'page_css_class\', \'wpse222112_pagelist_item_css_classes\' );
如果您只需要用于此菜单,请确保在呼叫后将其删除wp_list_pages() 使用

remove_filter( \'page_css_class\', \'wpse222112_pagelist_item_css_classes\' );
为了完整性:对于页面列表的整个输出,还有一个过滤器,如果需要向锚定标记添加类(在您的情况下不是这样),则需要使用该过滤器。此筛选器为wp_list_pages.

相关推荐

无法将设置添加到“NAV_MENUS”定制器面板

我试图在自定义程序的“菜单”面板中添加一个复选框,但由于某些原因,它没有显示出来。如果我尝试将其从“nav\\u菜单”更改为“title\\u tagline”或“colors”,复选框会显示得很好。是什么阻止它显示在“菜单”面板上?// add custom options to the Customizer function nssra_customizer_options($wp_customize) { // add \"menu primary flex\" checkb