사용자 정의 메뉴에서 특정 링크에 클래스 추가

사용자 정의 메뉴 옵션에서 클래스를 추가 할 수 있다는 것을 알고 있지만 A 전에 클래스를 LI에 추가합니다. 클래스를 전체 LI 대신이 특정 A에 직접 적용하고 싶습니다.

따라서 출력 대신

<li id="menu-item-51" class="NEWCLASS menu-item menu-item-type-custom menu-item-51"><a href="#">Link</a> </li>

나도 이러길 바래

<li id="menu-item-51" class="menu-item menu-item-type-custom menu-item-51"><a href="#" class="NEWCLASS">Link</a></li>

어떤 아이디어?

nav_menu_css_class필터 를 사용할 수 있습니다

add_filter('nav_menu_css_class' , 'my_nav_special_class' , 10 , 2);
function my_nav_special_class($classes, $item){
    if(your condition){ //example: you can check value of $item to decide something...
        $classes[] = 'my_class';
    }
    return $classes;
}

이 $ item을 사용하면 원하는 모든 조건을 할 수 있습니다. 그러면 클래스가 특정 li에 추가되고 다음과 같이 태그 스타일을 지정할 수 있습니다.

.my_class a{
   background-color: #FFFFFF;
}

이 사이트 에서 맞춤형 워커를 사용 하여 해결책을 찾았습니다 .

두 단계 : 기본 wp_nav_menu 코드를 편집 된 코드로 바꾸고 테마의 functions.php에 코드를 추가하십시오.

먼저 기본 wp_nav_code를 다음으로 바꿉니다 (코드는 위 사이트에서 복사 됨).

    wp_nav_menu( array(
     'menu' => 'Main Menu',
     'container' => false,
     'menu_class' => 'nav',
     'echo' => true,
     'before' => '',
     'after' => '',
     'link_before' => '',
     'link_after' => '',
     'depth' => 0,
     'walker' => new description_walker())
     );

다음으로 functions.php에 다음 코드를 추가하십시오. 이렇게하면 실제로 메뉴 링크에 클래스를 추가 할 수 있습니다.

class description_walker extends Walker_Nav_Menu
{

  function start_el(&$output, $item, $depth, $args)
  {
       global $wp_query;
       $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

       $class_names = $value = '';

       $classes = empty( $item->classes ) ? array() : (array) $item->classes;

       $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
       $class_names = ' class="'. esc_attr( $class_names ) . '"';

       $output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';

       $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
       $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
       $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
       $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';

       $prepend = '<strong>';
       $append = '</strong>';
       $description  = ! empty( $item->description ) ? '<span>'.esc_attr( $item->description ).'</span>' : '';

       if($depth != 0)
       {
                 $description = $append = $prepend = "";
       }

        $item_output = $args->before;
        $item_output .= '<a'. $attributes .'>';
        $item_output .= $args->link_before .$prepend.apply_filters( 'the_title', $item->title, $item->ID ).$append;
        $item_output .= $description.$args->link_after;
        $item_output .= '</a>';
        $item_output .= $args->after;

        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );

                    if ($item->menu_order == 1) {
            $classes[] = 'first';
        }

        }
}

코드의 끝에는 $ item_output으로 시작하는 몇 줄이 있습니다. 특히, 당신은이 조각을보고 싶습니다 :

$item_output .= '<a'. $attributes .'>';

이 줄은 링크 html의 시작에 대한 출력을 결정하기 때문입니다. 이것을 다음과 같이 변경하면 :

$item_output .= '<a'. $attributes . 'class="abc"' .'>';

그런 다음 메뉴의 모든 링크에 class = "abc"가 추가됩니다.

즉, 각 링크마다 사용자 정의 클래스를 허용하지 않습니다 (또는 적어도 코딩 방법을 모르겠습니다). 이것은 나에게 문제입니다.

청하는 사람들을 위해 이 작업을 수행 할 왜? 메뉴 링크가 라이트 박스 (컬러 박스,보다 구체적으로)를 열도록하려면 링크에 클래스가 있어야합니다. 예를 들면 다음과 같습니다.

<a class="lightbox1" href="#">Photo</a>

첫 번째 링크의 경우 "lightbox1", 두 번째 링크의 경우 "lightbox2"등과 같이 클래스를 동적으로 생성하는 방법이 있습니까?

해결 !!!! 메뉴 상자를 fancybox의 인라인 HTML에 링크하기 위해 이것을 알아 내야했습니다. 테마의 function.php에 다음 코드를 붙여 넣습니다.

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

그런 다음 WP 대시 보드의 메뉴 탭에서 사용자 정의 링크를 작성하여 메뉴에 추가하십시오. 화면 옵션의 맨 위에 "링크 관계 (XFN)"가 선택되어 있는지 확인하십시오. 해당 필드가 사용자 정의 메뉴 항목에 추가됩니다. 필드에 "fancybox"(따옴표없이)를 입력하고 메뉴를 저장하십시오.

이 함수는 탐색 메뉴 호출을 찾은 다음 어디에서나를 찾아서로 rel="fancybox"바꿉니다 rel="fancybox" class="fancybox". fancybox를 메뉴 항목에 추가 할 클래스로 바꿀 수 있습니다. 완료했다!

현재 답변은 질문이 a요소가 아닌 요소에 클래스를 추가하는 방법 li이거나 너무 복잡 하다는 것을 인식하지 못하는 것 같습니다 . 다음은 nav_menu_link_attributes슬러그를 기반으로 특정 메뉴를 타겟팅하고 해당 메뉴의 ID를 기반으로 특정 페이지 링크를 타겟팅 할 수 있는 필터를 사용하는 간단한 방법 입니다. var_dump $ args 및 $ item을 사용하여 조건을 작성하는 더 많은 방법을 얻을 수 있습니다.

add_filter('nav_menu_link_attributes', 'custom_nav_menu_link_attributes', 10, 4);

function custom_nav_menu_link_attributes($atts, $item, $args, $depth){
    if ($args->menu->slug == 'your-menu-slug' && $item->ID == 1){

        $class = "button";

        // Make sure not to overwrite any existing classes
        $atts['class'] = (!empty($atts['class'])) ? $atts['class'].' '.$class : $class; 
    }

    return $atts;
}

나는 이것이 오래 전에 답변되었다는 것을 알고 있지만 일반적인 정보와 마찬가지로 사용자 정의 메뉴에 대한 WordPress 관리 페이지의 "화면"옵션을 사용하여 각 메뉴 항목에 개별적으로 클래스를 추가하는 방법을 찾았습니다.

나는 최근에 비슷한 것을해야하고 다른 방법을 알아 냈습니다. Nivo lightbox 플러그인에 비슷한 클래스를 추가해야했습니다. rel 속성 ( "Link Relationship (XFN)")에 "nivo"를 추가 한 다음 nav_menu_link_attributes필터에 다음을 추가했습니다 .

function add_nivo_menuclass($atts, $item, $args) {
    if( is_array($atts) && !empty($atts['rel']) && $atts['rel'] = 'nivo' ) {
        $atts['class'] = 'lightbox';
        $atts['data-lightbox-type'] = 'inline';
    }

    return $atts;

    }
add_filter('nav_menu_link_attributes','add_nivo_menuclass', 0,3);

Appearance -> Menus페이지 상단에서을 클릭하여을 확장 Screen Options하고 확인란을 선택 CSS Classes합니다. 추가 된 각 메뉴 항목을 확장하면 CSS Classes (optional)필드가 나타납니다.