Wie Sie auf Klasse hinzufügen, um link in wp_nav_menu?

Ich versuche, aus ein wp-Menü ohne ul und li und eine Klasse Hinzugefügt, um das element.

Habe ich versucht, indem dieses in meine function.php

function add_menuclass($ulclass) {
  return preg_replace('/<a /', '<a class="list-group-item"', $ulclass, 1);
}
add_filter('wp_nav_menu','add_menuclass');

Und in meinem template habe ich:

<?php
 $menuParameters = array(
   'menu'  => 'Videos',
   'container'       => false,
   'echo'            => false,
   'items_wrap'      => '%3$s',
   'depth'           => 0,
);

  echo strip_tags(wp_nav_menu( $menuParameters ), '<a>' );
?>

Aber die Ausgabe gilt nur für die Klasse, um das erste Element und nicht alle <a>s wie erwartet.

<div class="list-group">
   <a class="list-group-item" href="#">First item</a>
   <a href="#">Second item</a>
</div>

Ich versuche dies zu erreichen, grundsätzlich zu gelten, dass die Klasse ALLE meine Artikel (nicht sicher, warum es gilt, dass es nur eine) - Kein jQuery bitte.

<div class="list-group">
   <a class="list-group-item" href="#">First item</a>
   <a class="list-group-item" href="#">Second item</a>
</div>
php.net/manual/en/function.preg-replace.php - vierte parameter $limit. Sie setzen es zu 1. Lesen Sie die Dokumentation. Sehr, sehr klar warum das passiert, wenn Sie ausdrücklich verlangen es dazu, so zu arbeiten.
Zu klären, die Sie hinzufügen möchten, eine zusätzliche Klasse zu jedem <a> innerhalb des Menüs?
ja genau
ok, wusste nicht, über. Check it out
Dank Ihrem Kommentar habe ich meine eigene Antwort Lösung

InformationsquelleAutor rob.m | 2014-10-03

  1. 17

    Dank Sergiu Paraschiv Kommentar die Frage wurde in Bezug auf die Begrenzung auf 1.

    Daher sollte es in function.php:

    function add_menuclass($ulclass) {
   return preg_replace('/<a /', '<a class="list-group-item"', $ulclass);
}
add_filter('wp_nav_menu','add_menuclass');

    UPDATE

    Gibt es einen besseren Weg, tatsächlich, die gibt uns viel mehr Kontrolle und das Stück code wird zur Verfügung gestellt von Jeff Starr auf dieser Beitrag

    HINWEIS: dies ist nicht das hinzufügen der aktuellen Klasse tho

    Erstellen Sie Ihr Menü auf wp, dann denken Sie daran, klicken Sie auf die Position im Menü-editor, dann in Ihrer Funktion, die Sie tun würde:

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

    Endlich können wir call unsere Speisekarte:

    <?php if (function_exists(clean_custom_menus())) clean_custom_menus(); ?>

    Den code oben ist entnommen aus dem Beitrag weiter oben verlinkt habe, dachte ich auch diese Antwort, wie es scheint, diese Frage hat viele Besuche.

    UPDATE 2

    Andere Lösung wäre (vielleicht die beste):

    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');
    Danke für die Aktualisierung mit deiner Antwort.

    InformationsquelleAutor rob.m

  2. 2

    Unter einem Hauch von diese Antwort was ich fand, war die prägnanteste über das hinzufügen von Klassen die Listenelemente des Menüs, die ich verwendet, nav_menu_link_attributes filter, die funktioniert gut für das hinzufügen von Klassen.

    In Ihrem functions.php hinzufügen:

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

    Optional, können Sie die option zum hinzufügen von Klassen auf Elemente der 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);

    Nun in Ihrer Vorlage zu bauen ist ein Menü, fügen Sie einfach zwei neue Argumente, z.B.:

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

    Funktioniert gut bei Themen mit mehreren Menüs, die anders Aussehen.

    InformationsquelleAutor stol

  3. 0

    Möchte ich hinzufügen, 'Element' - Klasse li sollte dieser code zu schreiben:

    add_filter('nav_menu_css_class' , 'nav_class' , 10 , 2);
function nav_class($classes, $item){
    $classes[] = 'item';
    return $classes;
}

    InformationsquelleAutor Omid Ahmadyani

  4. -2

    Meine Lösung ist einfach, verwenden Sie unser Freund jquery

    im Menü injizieren eine benutzerdefinierte menu_id 

    <?php 
   wp_nav_menu(array(
     'theme_location'=>'primary', 
     'container'=>false,
     'menu_class'=>'navbar-nav mr-auto',
     'menu_id'=>'customAclassInWp_nav_menu'
    )
  ); 
?>

    dann jquery verwenden, um zu injizieren, die die fehlende Klasse.

    $( "#customAclassInWp_nav_menu li a" ).addClass( "nav-link" );

    tadammmm 🙂

    genießen

    Die Frage ausdrücklich angegeben wird Kein jQuery bitte..
    genau

    InformationsquelleAutor Emily Gagnon

Schreibe einen Kommentar