wake-up-neo.net

Wie wende ich eine Klasse auf das zweite Wort im Menülistenelement an?

Ich möchte eine Klasse auf ein Wort in meinem Menü anwenden. Angenommen, ich habe ein Listenelement in meinem Menü mit dem Namen "Mein Element". Ich möchte eine Klasse auf das Wort "Item" anwenden, damit ich es so gestalten kann, wie ich es möchte.

Muss ich dem Listenelement einen Bereich hinzufügen und die Klasse dann wie folgt zu meinem CSS hinzufügen?

<div id="nav">
    <ul>
        <li><a href="/MyItem">My <span class="dark-blue">Item</span></a></li>
    </ul>
</div>

#nav ul li a.dark-blue {
    color: #00008B;
}
3
Brian T

Sie können die title jedes Navigationsmenüelements filtern. Leider trägt der Filter den Namen 'the_title' - wenn wir nur einen einfachen Filter hinzufügen, fangen wir möglicherweise auch Zeichenfolgen außerhalb der Navigationsmenüs ab.

Wir brauchen also eine zweite Funktion, um den Titelfilter unseres Navigationsmenüs zu aktivieren, wenn die Menüklasse beginnt und zu deaktivieren, wenn sie endet.

Beginnen wir mit der zweiten Funktion:

add_filter( 'wp_nav_menu_args', 'wpse_14037_filter_switch' );
add_filter( 'wp_nav_menu', 'wpse_14037_filter_switch' );

/**
 * Switches the registration of out title filter on and off.
 *
 * @param  mixed $input Array or string, we just pass it through.
 * @return mixed
 */
function wpse_14037_filter_switch( $input )
{
    $func = 'wp_nav_menu_args' == current_filter() ? 'add_filter' : 'remove_filter';
    $func( 'the_title', 'wpse_14037_filter_title' );
    return $input;
}

'wp_nav_menu_args' wird sehr früh in wp_nav_menu() aufgerufen. Wenn in diesem Kontext wpse_14037_filter_switch() ausgeführt wird (current_filter), wird der Titelfilter aktiviert .

'wp_nav_menu' wird aufgerufen, nachdem alle Elemente gerendert wurden. Jetzt schalten wir den Titelfilter aus .

Jetzt brauchen wir die wpse_14037_filter_title(), die wir gerade registriert haben:

/**
 * Adds a <span class="partNUMBER"> to each Word of a menu item title.
 *
 * @param  string $title
 * @return string
 */
function wpse_14037_filter_title( $title )
{
    $title = trim( $title );
    $parts = explode( ' ', $title );
    $out   = array ();
    $i     = 1;

    foreach ( $parts as $part )
    {
        $out[] = '<span class="part' . $i++ . '">' . $part . '</span>';
    }

    return join( ' ', $out );
}

Ich habe beschlossen, die Funktion allgemeiner zu gestalten, als Sie es wollten. Andere Leute möchten vielleicht das dritte oder das 15. Wort stylen.

Um das zweite Wort in Ihrem Stylesheet anzusprechen, verwenden Sie einfach die neue Klasse:

/* Your menu may have the class 'menu'. */
.menu .part2
{
    color: #005;
}
4
fuxia