J'essaie de sortir un menu wp sans ul et li et d'avoir une classe ajoutée à l'élément.
J'ai essayé d'ajouter ceci dans mon function.php
function add_menuclass($ulclass) {
return preg_replace('/<a /', '<a class="list-group-item"', $ulclass, 1);
}
add_filter('wp_nav_menu','add_menuclass');
Et dans mon modèle, j'ai:
<?php
$menuParameters = array(
'menu' => 'Videos',
'container' => false,
'echo' => false,
'items_wrap' => '%3$s',
'depth' => 0,
);
echo strip_tags(wp_nav_menu( $menuParameters ), '<a>' );
?>
Mais la sortie applique uniquement la classe au premier élément et non pas tous les <a>
s comme prévu.
<div class="list-group">
<a class="list-group-item" href="#">First item</a>
<a href="#">Second item</a>
</div>
J'essaie d'y parvenir, essentiellement d'appliquer cette classe à TOUS mes objets (je ne sais pas pourquoi elle s'applique à un seul) - Non jQuery s'il vous plaît.
<div class="list-group">
<a class="list-group-item" href="#">First item</a>
<a class="list-group-item" href="#">Second item</a>
</div>
Grâce à Sergiu Paraschiv , le problème était de limiter à 1.
Par conséquent, il devrait être dans function.php:
function add_menuclass($ulclass) {
return preg_replace('/<a /', '<a class="list-group-item"', $ulclass);
}
add_filter('wp_nav_menu','add_menuclass');
METTRE &AGRAVE; JOUR
Il y a une meilleure façon de faire qui nous donne beaucoup plus de contrôle et le morceau de code est fourni par Jeff Starr sur ce post
NOTE: il ne s'agit pas d'ajouter la classe en cours
Créez votre menu sur wp, puis souvenez-vous de cliquer sur l'emplacement dans l'éditeur de menu, puis dans votre fonction:
// custom menu example @ https://digwp.com/2011/11/html-formatting-custom-menus/
function clean_custom_menus() {
$menu_name = 'nav-primary'; // specify custom menu name
if (($locations = get_nav_menu_locations()) && isset($locations[$menu_name])) {
$menu = wp_get_nav_menu_object($locations[$menu_name]);
$menu_items = wp_get_nav_menu_items($menu->term_id);
$menu_list = '<nav>' ."\n";
$menu_list .= "\t\t\t\t". '<ul>' ."\n";
foreach ((array) $menu_items as $key => $menu_item) {
$title = $menu_item->title;
$url = $menu_item->url;
$menu_list .= "\t\t\t\t\t". '<li><a href="'. $url .'">'. $title .'</a></li>' ."\n";
}
$menu_list .= "\t\t\t\t". '</ul>' ."\n";
$menu_list .= "\t\t\t". '</nav>' ."\n";
} else {
// $menu_list = '<!-- no list defined -->';
}
echo $menu_list;
}
Enfin, nous pouvons appeler notre menu:
<?php if (function_exists(clean_custom_menus())) clean_custom_menus(); ?>
Le code ci-dessus est tiré de l'article lié ci-dessus, j'ai pensé à inclure cette réponse car il apparaît que cette question a de nombreuses visites.
UPDATE 2
Une autre solution serait (peut-être la meilleure):
header.php:
<?php
wp_nav_menu( array(
'theme_location' => 'topnav',
'menu' =>'topnav',
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'navbarCollapse',
'menu_class' => 'menu',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'items_wrap' => '<ul class="nav justify-content-end w-100 %2$s">%3$s</ul>',
'depth' => 0
) );
?>
function.php:
// register the nav
function register_my_menu() {
register_nav_menu('topnav',__( 'topnav' ));
}
add_action( 'init', 'register_my_menu' );
// let's add "*active*" as a class to the li
add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);
function special_nav_class($classes, $item){
if( in_array('current-menu-item', $classes) ){
$classes[] = 'active ';
}
return $classes;
}
// let's add our custom class to the actual link tag
function atg_menu_classes($classes, $item, $args) {
if($args->theme_location == 'topnav') {
$classes[] = 'nav-link';
}
return $classes;
}
add_filter('nav_menu_css_class', 'atg_menu_classes', 1, 3);
function add_menuclass($ulclass) {
return preg_replace('/<a /', '<a class="nav-link"', $ulclass);
}
add_filter('wp_nav_menu','add_menuclass');
Prenant un indice de cette réponse que j’ai trouvée la plus concise sur l’ajout de classes aux éléments de liste des menus, j’ai utilisé nav_menu_link_attributes filter, qui fonctionne bien pour l’ajout de classes.
Dans votre functions.php, ajoutez:
function add_menu_link_class( $atts, $item, $args ) {
if (property_exists($args, 'link_class')) {
$atts['class'] = $args->link_class;
}
return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_menu_link_class', 1, 3 );
Vous pouvez éventuellement ajouter l'option d'ajouter des classes aux éléments de la liste:
function add_menu_list_item_class($classes, $item, $args) {
if (property_exists($args, 'list_item_class')) {
$classes[] = $args->list_item_class;
}
return $classes;
}
add_filter('nav_menu_css_class', 'add_menu_list_item_class', 1, 3);
Maintenant, dans votre modèle, pour créer un menu, ajoutez simplement deux nouveaux arguments, par exemple:
wp_nav_menu([
'theme_location'=> 'primary_navigation',
'menu_class' => 'navbar-nav ml-auto flex-nowrap',
'list_item_class' => 'nav-item',
'link_class' => 'nav-link m-2 menu-item nav-active'
]);
Fonctionne bien avec des thèmes avec plusieurs menus d'apparence différente.
Je veux ajouter la classe 'item' à li devrait écrire ce code:
add_filter('nav_menu_css_class' , 'nav_class' , 10 , 2);
function nav_class($classes, $item){
$classes[] = 'item';
return $classes;
}