web-dev-qa-db-ja.com

Wp_nav_menu_itemsフィルターに追加されたメニュー項目は決して強調表示されません

二十三子テーマで私は_を使用してメニュー項目（ / player-number ページテンプレートへのリンク、ここで番号は各ユーザーによって異なり、彼女または彼の彼のIDを表します）を追加します。 wp_nav_menu_items フック：

function my_nav_menu_items( $items ) {
    $profile = sprintf('<li id="menu-item-32" 
        class="menu-item menu-item-type-custom 
        menu-item-object-custom menu-item-32">
        <a href="/player-%d/#navbar">Profile</a></li>', 
        42); // 42 is just a placeholder here, representing user id

    return $items . $profile;
}

add_filter( 'wp_nav_menu_items', 'my_nav_menu_items' );

その項目はprimary-menu内で表示されクリック可能ですが、何らかの理由でそれが強調表示されることはありません（スクリーンショットの英語以外のテキストに対する謝罪）：

website screenshot

すなわち他のメニュー項目をクリックすると、色が赤みがかった色に、フォントが 斜体 に変わります。

highlighted menu item

しかし、最後のメニュー項目はそれをしません、なぜですか？

更新：

wp_nav_menu_objects フィルタはメニュー項目を追加する作業に適しているようです。私はこれを /wp-content/themes/twentythirteen-child/functions.php で使用してみました。ファイル：

function my_nav_menu_objects( $sorted_menu_items ) 
{
    $link = array (
        'title'            => 'Profile',
        'menu_item_parent' => 0,
        'ID'               => 32,
        'url'              => '/player-42',
    );
    $sorted_menu_items[] = (object) $link;
    error_log(print_r($sorted_menu_items, TRUE));
    return $sorted_menu_items;
}

add_filter( 'wp_nav_menu_objects', 'my_nav_menu_objects' );

しかし、同じ問題を抱えています。メニュー項目は追加されますが、選択されたときに強調表示されません（そのためのCSSスタイルのcurrent-menu-itemがありません）。

UPDATE 2：

また、 "Profile"というメニュー項目を手動で追加してから、そのurlを検索して次のコードに置き換えます。

function my_nav_menu_objects( $sorted_menu_items )
{
    foreach ( $sorted_menu_items as $item ) {
            error_log(print_r($item, TRUE));

            if ( $item->title == 'Profile' ) {
                $item->url = '/player-42';
                break;
            }
    }

    return $sorted_menu_items;
}

add_filter( 'wp_nav_menu_objects', 'my_nav_menu_objects' );

同じ効果があります（URLは変更されていますが、そのURLが選択されている場合はCSSの強調表示は表示されません）。

theme-developmentmenusfiltershookstheme-twenty-thirteen
1
Alexander Farber

@AlexanderFarber 、 wp_nav_menu linkの下に属性クラスを添付する方法はたくさんあります。私は @Sumit に同意し、Appearance > Menu WordPressにページリンクを追加することでcurrent-menu-itemクラスまたはcurrent_page_itemクラスの面倒を見ます。また、この方法は将来あなたのナビゲーションメニューを扱うためのベストプラクティスです。

Wp_nav_menuにダイナミックリンクを作成する

あなたの質問は この答え に関連しているので、スラッグとしてplayerを付けたPageがあります。私のアプローチは、これらのページをAppearance > Menuのメニューとして追加した後（そして 'Profile'でラベルを変更した後）、このページに動的リンクを持たせるためにfilter nav_menu_link_attributes を使用します。あなたの質問として、あなたはそれをダイナミクスにするために現在のユーザーIDを使います。このサンプルコードを見てください。7はターゲットとしての投稿/ページIDです。

add_filter( 'nav_menu_link_attributes', function( $atts, $item, $args, $depth )
{
    // check our nav_menu
    if ( is_object( $args ) && is_object( $item ) && 'primary-menu' == $args->menu_id )
    {
        $post_id = 7; // Define Post or Page ID
        $user    = wp_get_current_user();
        if ( 0 < $user->ID && $post_id == $item->object_id )
            $atts['href'] = esc_url( user_trailingslashit( untrailingslashit( $item->url ) . '-' . $user->ID ) );
    }
    return $atts;
} 10, 4 );

フィルタは同じページの別のメニューに影響するため、変更する前にどのメニューを確認する必要があります。この方法では、現在のページの属性（クラスまたはIDテーマに関連するCSS）に問題が生じることはありません。

あなたのコードに関連した回答

はい、私はあなたがフィルタwp_nav_menu_itemsでカスタムリンクを追加し、現在のページのclass属性を追加する必要があることを知っています、あなたの答えとほぼ同じです。 Pageに関連しているので、css TwentyThirteenと一致するクラス属性としてcurrent_page_itemを使用して、アイテムナビゲーションメニューのハイライトを作成します。

add_filter( 'wp_nav_menu_items', 'my_nav_menu_items', 10, 2 );
function my_nav_menu_items( $items, $args )
{
    if ( is_object( $args ) && 'primary-menu' == $args->menu_id )
    {
            $user         = wp_get_current_user();
            $with_user_id = ( 0 != $user->ID ) ? '-' . $user->ID : '';

            $post_id      = 7; // Post or Page ID
            $class        = ( is_page( $post_id ) ) ? 'current_page_item' : '';

            $items .= sprintf( '<li id="menu-item-32" class="menu-item menu-item-type-custom 
            menu-item-object-custom %1$s menu-item-32"><a href="%2$s">%3$s</a></li>',
                sanitize_html_class( $class ),
                esc_url( user_trailingslashit( untrailingslashit( get_page_link( $post_id ) ) . $with_user_id  ) ),
                __( 'Profile', 'textdomain' )
            );
    }
    return $items;
}

現在のプロジェクトに合わせてコードを微調整できます。これが役に立つことを願っています。

1
Jevuska

他のページは「現在のメニュー項目」のCSSの状態を表示します。

.nav-menu .current_page_item > a, .nav-menu .current_page_ancestor > a, .nav-menu .current-menu-item > a, .nav-menu .current-menu-ancestor > a {
   color: #bc360a;
   font-style: italic;

このページは「page-id-32」として表示されています。それがメニュー内のページに対応している場合は、「現在のページアイテム」のCSSが表示されます。それ以外の場合は、そのページにアクセスしているときに何らかの形でCSSのクラス「current-menu-item」を取得する必要があります。たとえば、次のように変更したとします。

sprintf('<li id="menu-item-32" 
    class="menu-item menu-item-type-custom 
    menu-item-object-custom menu-item-32">

に

sprintf('<li id="menu-item-32" 
    class="menu-item menu-item-type-custom 
    menu-item-object-custom current-menu-item">

それは仕事をするでしょうが、私はそれが「常に」現在のページとして表示されると思います。

0
Monkey Puzzle

ここに私自身の解決策があります - /wp-content/themes/twentythirteen-child/functions.php ファイルに、ページスラッグがplayerの場合はcurrent-menu-item CSSスタイルを追加します。

function my_nav_menu_items( $items ) 
{
    $profile = sprintf('<li class="menu-item 
        menu-item-type-custom 
        menu-item-object-custom 
        %s"><a href="/player-%d/#navbar">Profile</a></li>', 
        ( is_page( 'player' ) ? 'current-menu-item' : '' ),
        42);
    return $items . $profile;
}

add_filter( 'wp_nav_menu_items', 'my_nav_menu_items' );

より具体的なページチェックは次のようになります。is_page( array ( 42, 'player' ) )

0
Alexander Farber