Comment appliquer une classe au deuxième mot dans l'élément de liste de menu?
1 réponses
- votes
Vouspouvezfiltrer le title
de chaque élément dumenu denavigation. Malheureusement,lefiltreestnommé 'the_title'
- sinous ajoutons simplement unfiltre simplepour lui,nouspouvons également attraper des chaînesen dehors desmenus denavigation.
Nous avons doncbesoin d'une deuxièmefonctionpour activernotrefiltre detitre demenu denavigation lorsque la classe demenu démarreet désactiver lorsqu'elle setermine.
Commençonspar la deuxièmefonction:
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étrèstôt dans wp_nav_menu()
. Lorsque wpse_14037_filter_switch()
estexécuté dans ce contexte (current_filter
),nous activons lefiltre detitre on .
'wp_nav_menu'
est appelé après le rendu detous les éléments. Désactivezmaintenant lefiltre detitre désactivé .
Nous avonsmaintenantbesoin du wpse_14037_filter_title()
quenous 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 lafonctionplusgénérique que vousne le souhaitiez. D'autrespersonnes voudrontpeut-être styliser letroisièmemot… ou le 15e.
Pourtraiter le deuxièmemot de votrefeuille de style,utilisez simplement lanouvelle classe:
/* Your menu may have the class 'menu'. */
.menu .part2
{
color: #005;
}
You can filter the title
of each nav menu item. Unfortunately, the filter is named 'the_title'
– if we just add a simple filter for it, we may catch strings outside of nav menus too.
So we need a second function to switch our nav menu title filter on when the menu class starts and off when it ends.
Let’s start with the second function:
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'
is called in wp_nav_menu()
very early. When wpse_14037_filter_switch()
is running in this context (current_filter
) we turn the title filter on.
'wp_nav_menu'
is called after all item are rendered. Now we turn the title filter off.
Now we need the wpse_14037_filter_title()
we just registered:
/**
* 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 );
}
I decided to make the function more generic than you wanted it. Other people may want to style the third word … or the 15th.
To address the second word in your stylesheet just use the new class:
/* Your menu may have the class 'menu'. */
.menu .part2
{
color: #005;
}
Je souhaite appliquer une classe à unmot demonmenu.Parexemple,disons quej'ai un élément de liste dansmonmenu appelé "Mon élément".Je voudrais appliquer une classe aumot "Item" afin depouvoir le styliser commeje le souhaite.
Dois-je ajouter unintervalle à l'élément de liste,puis ajouter la classe àmon css comme ceci?