web-dev-qa-db-fra.com

Comment appliquer une classe au deuxième élément de liste de menu Word dans?

Je veux appliquer une classe à un mot dans mon menu. Par exemple, disons que mon menu contient un élément de liste appelé "Mon élément". Je voudrais appliquer une classe au mot "Item" pour pouvoir la nommer comme je le veux.

Dois-je ajouter une extension à l'élément de la liste, puis ajouter la classe à mon css comme ceci?

<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;
}
menuscssfilters
3
Brian T

Vous pouvez filtrer la title de chaque élément de menu de navigation. Malheureusement, le filtre s'appelle 'the_title' - si nous ajoutons simplement un filtre, nous pourrons aussi capturer des chaînes en dehors des menus de navigation.

Nous avons donc besoin d’une deuxième fonction pour activer notre filtre de titre de menu de navigation lorsque la classe de menu commence et s’éteindre à la fin.

Commençons par la deuxième fonction:

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' est appelé dans wp_nav_menu() très tôt. Lorsque wpse_14037_filter_switch() est en cours d'exécution dans ce contexte (current_filter), nous activons le filtre de titre sur .

'wp_nav_menu' est appelé après le rendu de tous les éléments. Désactivez maintenant le filtre de titre .

Nous avons maintenant besoin de la wpse_14037_filter_title() que nous venons d’enregistrer:

/**
 * 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 );
}

J'ai décidé de rendre la fonction plus générique que vous ne le souhaitiez. D'autres personnes voudront peut-être appeler le troisième mot… ou le 15e.

Pour adresser le deuxième mot de votre feuille de style, utilisez simplement la nouvelle classe:

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