web-dev-qa-db-ja.com

Wp_page_menu（）またはwp_list_pages（）のカスタムメニュー項目CSSクラスを作成する方法

メニュー項目にカスタムクラスを追加したいです。すべてのサブページについて、その兄弟をナビゲーションとして表示します。

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

        }

これは私にリンクのリストを与えます。すべてのアンカー要素に同じカスタムクラスを付けたい。それ、どうやったら出来るの？

menusnavigationsub-menuwp-list-pages
1
Mathias

その方法の一つは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を使うことです。

0
Max Yudin

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 です。

3
engelen