wp_nav_menu에서 링크를 위한 클래스를 추가하는 방법

wp_nav_menu에서 링크를 위한 클래스를 추가하는 방법

저는 ul과 li를 제외한 wp메뉴를 만들고 엘리먼트에 클래스를 추가하려고 합니다.

나는 이것을 내 기능에 추가해 보았다.php

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

템플릿에는 다음이 있습니다.

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

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

그러나 출력은 클래스를 첫 번째 항목에만 적용하며 모든 항목에는 적용되지 않습니다.<a>예상대로 입니다.

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

저는 이것을 달성하기 위해 노력하고 있습니다.기본적으로 그 클래스를 ALL my item에 적용하려고 합니다(왜 1개만 적용하는지 확실하지 않습니다).- jQuery는 필요 없습니다.

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

메뉴 리스트에 클래스를 추가하는 것이 가장 간결하다는 것을 알게 된 이 답변에서 힌트를 얻어 클래스 추가에 적합한 nav_menu_link_attributes 필터를 사용했습니다.

functions.php에서 다음을 추가합니다.

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

선택적으로 목록 항목에 클래스를 추가하는 옵션을 추가할 수 있습니다.

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

템플릿에서 메뉴를 작성하려면 다음 두 개의 새로운 인수를 추가합니다.

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

모양이 다른 여러 메뉴의 테마에 적합합니다.

Sergiu Paraschiv 코멘트 덕분에 이 문제는 1로 제한되었습니다.

따라서 작동해야 합니다.php:

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

갱신하다

실제로 더 나은 방법이 있습니다.제프 스타는 이 포스트에서 코드를 제공하고 있습니다.

메모: 이것은 현재 클래스를 추가하지 않습니다.

wp에서 메뉴를 만들고 메뉴 에디터에서 위치를 클릭한 후 기능에서 다음을 수행합니다.

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

마지막으로 메뉴를 호출할 수 있습니다.

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

상기 코드는 상기 링크 게시물에서 가져온 것으로, 이 질문은 방문 횟수가 많은 것 같아서 이 답변을 포함하려고 합니다.

업데이트 2

또 다른 솔루션은 다음과 같습니다(아마도 최선이 될 수 있습니다.

header.syslog:

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

기능.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');

앵커 태그에 클래스를 추가하는 솔루션이 있습니다.

1: 스텝: 이 기능을 추가합니다.php

function add_additional_class_on_a($classes, $item, $args)
{
    if (isset($args->add_a_class)) {
        $classes['class'] = $args->add_a_class;
    }
    return $classes;
}

add_filter('nav_menu_link_attributes', 'add_additional_class_on_a', 1, 3);

2: 그럼 테마에서 이렇게 사용하세요.

<?php
        // Show Menu here
        wp_nav_menu(array(
            'theme_location' => 'my-footer-menu',
            'container_id'    => '',
            'menu_class'      => 'footer-top list-unstyled',
            'menu_id'         => '',
            'add_a_class'     => 'box-link text-dark',
        ));
?>

'아이템' 클래스를 li에 추가하고 싶은데 다음 코드를 작성해야 합니다.

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

Java Script를 사용한 1개의 mroe 솔루션:

const allLIItems = document.querySelectorAll(".menu-item");

for (let i = 0; i < allLIItems.length; i++) {
    allLIItems[i].classList.add("nav-item");
    var aHref = allLIItems[i].innerHTML.split(" ");
    const newAHref = `${aHref[0]} class="nav-link" ${aHref[1]}`;
    allLIItems[i].innerHTML = newAHref;
  }

@stol의 답변이 도움이 되었습니다!정말 감사합니다!

예를 들어 (이것은 나의 상황입니다)

기능들.php

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

header.displaces를 지정합니다.

                <?php
                    wp_nav_menu(
                        array(
                            'theme_location'  => 'primary',
                            'items_wrap'      => '<ul class="%2$s">%3$s</ul>',
                            'fallback_cb'     => false,
                            'link_class'   => 'nav-header hidden'
                        )
                    );
                ?>

내 솔루션은 간단합니다. 친구 jquery를 사용합니다.

메뉴에서 커스텀 menu_id 삽입

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

그런 다음 jquery를 사용하여 누락된 클래스를 주입합니다.

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

tadammmm :)

즐거운 시간 되세요.

언급URL : https://stackoverflow.com/questions/26180688/how-to-add-class-to-link-in-wp-nav-menu