web-dev-qa-db-de.com

Der im Filter wp_nav_menu_items hinzugefügte Menüpunkt wird nie hervorgehoben

In einem Thema für 13 Kinder hänge ich einen Menüeintrag (einen Link zu /Spielernummer Seitenvorlage, wobei die Nummer für jeden Benutzer unterschiedlich ist und seine oder ihre ID in einer Spieledatenbank darstellt) unter Verwendung der wp_nav_menu_items an hook:

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

Und dieses Element ist im primary-menu sichtbar und anklickbar, wird aber aus irgendeinem Grund nie hervorgehoben (Entschuldigung für nicht englischen Text im Screenshot):

 website screenshot 

Das heißt Wenn ich auf einen anderen Menüeintrag klicke, ändert sich seine Farbe in einen rötlichen und die Schriftart wird zu kursiv:

 highlighted menu item 

Aber der letzte Menüpunkt macht das nicht, warum?

UPDATE:

Der wp_nav_menu_objects - Filter scheint besser für die Aufgabe geeignet zu sein, einen Menüpunkt hinzuzufügen, und ich habe versucht, ihn in meiner /wp-content/themes/twentythirteen-child/functions.php -Datei zu verwenden:

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

es tritt jedoch dasselbe Problem auf: Der Menüeintrag wird hinzugefügt, aber nicht hervorgehoben (der CSS-Stil current-menu-item dafür fehlt), wenn er ausgewählt ist.

UPDATE 2:

Außerdem habe ich versucht, einen Menüeintrag mit dem Namen "Profil" manuell hinzuzufügen und dann dessen url zu suchen und durch den folgenden Code zu ersetzen:

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

mit dem gleichen Effekt (die URL hat sich geändert, aber die CSS-Hervorhebung fehlt, wenn diese URL ausgewählt ist).

theme-developmentmenusfiltershookstheme-twenty-thirteen
1
Alexander Farber

@AlexanderFarber, es gibt viele Möglichkeiten, Attributklassen unter wp_nav_menu link anzuhängen. Ich stimme @Sumit zu und füge Seitenlinks in Appearance > Menu hinzu. WordPress kümmert sich um current-menu-item class oder current_page_item class. Dies ist auch die beste Vorgehensweise, um Ihr Navigationsmenü in Zukunft zu verwalten.

Erstellen Sie einen dynamischen Link in wp_nav_menu

Da sich Ihre Frage auf diese Antwort bezog, haben Sie eine Seite mit player als Schnecke. Mein Ansatz: Nachdem ich diese Seite als Menü in Appearance > Menu hinzugefügt habe (dann ändere die Bezeichnung mit 'Profil'), verwende ich den Filter nav_menu_link_attributes , um diese Seite mit einem dynamischen Link zu versehen. Als Ihre Frage verwenden Sie die aktuelle Benutzer-ID, um sie zu dynamisieren. Schauen Sie sich diesen Beispielcode an: 7 ist die Post-/Seiten-ID als Ziel:

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

Sie müssen überprüfen, welches Menü Sie ändern, da Ihr Filter ein anderes Menü auf derselben Seite auswirkt. Auf diese Weise bekommen Sie keine Probleme mit Attributen (im Zusammenhang mit Klassen- oder ID-Themes) der aktuellen Seite.

Antwort bezog sich auf Ihren Code

Ja, ich weiß, dass Sie einen benutzerdefinierten Link nach Filter wp_nav_menu_items hinzufügen und ein Klassenattribut für die aktuelle Seite hinzufügen müssen, ähnlich wie bei Ihrer Antwort. Da es sich um Page handelt, verwende ich current_page_item als Klassenattribut, das mit css TwentyThirteen übereinstimmt, um das Menü item nav hervorzuheben.

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

Sie können den Code optimieren, um ihn an Ihr aktuelles Projekt anzupassen. Ich hoffe das hilft.

1
Jevuska

Die anderen Seiten zeigen einen CSS-Status für den aktuellen Menüpunkt:

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

Diese Seite wird als 'page-id-32' angezeigt. Wenn dies mit der Seite im Menü übereinstimmt, sollte das CSS für den aktuellen Seiteneintrag angezeigt werden. Andernfalls müssen Sie die Klasse 'current-menu-item' in der CSS irgendwie abrufen, wenn Sie sich auf dieser Seite befinden. Wenn Sie beispielsweise Folgendes ändern:

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

zu

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

Es wird den Job erledigen, aber ich denke, das würde die aktuelle Seite als 'immer' anzeigen.

0
Monkey Puzzle

Hier ist meine eigene Lösung - in der Datei /wp-content/themes/twentythirteen-child/functions.php fügen Sie den CSS-Stil current-menu-item hinzu, wenn der Seiten-Slug player ist:

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

Eine spezifischere Seitenüberprüfung wäre: is_page( array ( 42, 'player' ) )

0
Alexander Farber