WordPress 메뉴 항목에 데이터 속성을 추가하는 방법

Twitter Bootstrap이고 메뉴 링크 태그에 data-toggle = "modal"속성을 추가해야합니다. 대부분의 모든 결과 참조를 검색하면 Twitter Bootstrap 드롭 다운 메뉴 걷기를 수행하지만이 메뉴에는 드롭 다운이 없으며 특정 속성 만 추가하면됩니다.

다음 나는 이것을 발견했다 : 플러그인없이 메뉴 항목에 사용자 정의 속성을 추가하십시오 .WordPress 3.6 이상에서 볼 때 매우 유용합니다. 더 이상 복잡한 보행기를 할 필요가 없으며 대신 이것을 사용할 수 있습니다 : http://codex.wordpress.org/Plugin_API / Filter_Reference / nav_menu_link_attributes

그러나이 실행 시점에서 API 참조는 거의 없으며 예제를 제공하지 않으며 너무 새롭기 때문에 Google에 대한 참조는 거의 없습니다.

나는 이것을 먼저 시도했다.

add_filter( 'nav_menu_link_attributes', 'mywp_contact_menu_atts', 10, 3 );

function pb_contact_menu_atts( $atts, $item, $args )
{
    // inspect $item, then …
    $atts['data-toggle'] = 'modal';
    return $atts;
}

그것은 예상대로 작동하지만 메뉴의 모든 a 태그에 속성을 추가합니다. 그래서 # menu-item-7857 a 등으로 하나의 메뉴 항목을 타겟팅하는 방법을 알아 내려고합니다.

메뉴 항목을 타겟팅하는 예를 어디에서 찾을 수 있는지 또는 위의 링크 된 API 참조에있는 정보를 기반으로하는 방법을 결정할 수있는 사람이 있습니까?

참고로 다음 예제를 찾았지만 도움이되지 않지만 올바른 방향에있을 수있는 자식이있는 항목 만 대상으로합니다.

add_filter('nav_menu_link_attributes', function($atts, $item, $args) {
    if ( $args->has_children )
    {
        $atts['data-toggle'] = 'dropdown';
        $atts['class'] = 'dropdown-toggle';
    }

    return $atts;
}, 10, 3);

업데이트-아래의 유일한 대답은 무언가에있는 것처럼 들리지만 실제로 특정 링크를 대상으로하는 숫자를 찾는 방법과 실제 예제에서 해당 조건을 추가하는 위치 / 방법을 결정할 수 없었습니다. 댓글을 추가했지만 듣지 못했습니다. 약 18 일 동안 현상금이 도움이 될지 알 것으로 생각했습니다.

링크의 코드를 볼 때 타겟팅하고 싶습니다.

<li id="menu-item-7858" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-7858"><a href="#" data-toggle="modal">Chat</a></li>

7858이라는 숫자가 표시되므로 타겟팅해야하는 숫자 일 수 있습니다.

그러나 예를 들어 시도하면 :

add_filter( 'nav_menu_link_attributes', 'my_chat_menu_atts', 10, 3 );


function my_chat_menu_atts( $atts, $item, $args ) {
    if ( 7857 == $item['ID'] ) {
        // inspect $item, then …
        $atts['onclick'] = 'SnapEngage.startLink();';
        return $atts;
    }
}

그러나 한 의견 제시자가 제안한 if 문을 추가하면 다음 오류가 발생합니다.

Fatal error: Cannot use object of type WP_Post as array

더 많은 코드가 필요하지만 잃어버린 것으로 가정합니다. if 문이없는 알림은 작동하지만 타겟팅하려는 하나의 링크가 아닌 모든 링크를 대상으로합니다.

원래 질문에서 제공 한 코드를 구체적으로 편집하십시오.

add_filter( 'nav_menu_link_attributes', 'wpse121123_contact_menu_atts', 10, 3 );
function wpse121123_contact_menu_atts( $atts, $item, $args )
{
  // The ID of the target menu item
  $menu_target = 123;

  // inspect $item
  if ($item->ID == $menu_target) {
    $atts['data-toggle'] = 'modal';
  }
  return $atts;
}

$item필터 함수에서 사용할 수있는 두 번째 인수에는 메뉴 항목 객체가 포함되어 있습니다. 덤프하면 다음과 같이 보입니다.

[1] => WP_Post Object
    (
        [ID] => 2220
        [post_author] => 1
        [post_date] => 2012-12-26 19:29:44
        [post_date_gmt] => 2012-12-26 17:29:44
        [post_content] => 
        [post_title] => Home
        [post_excerpt] => 
        [post_status] => publish
        [comment_status] => open
        [ping_status] => open
        [post_password] => 
        [post_name] => home-3
        [to_ping] => 
        [pinged] => 
        [post_modified] => 2013-06-05 01:55:20
        [post_modified_gmt] => 2013-06-04 22:55:20
        [post_content_filtered] => 
        [post_parent] => 0
        [guid] => http://dev.rarst.net/?p=2220
        [menu_order] => 1
        [post_type] => nav_menu_item
        [post_mime_type] => 
        [comment_count] => 0
        [filter] => raw
        [db_id] => 2220
        [menu_item_parent] => 0
        [object_id] => 2220
        [object] => custom
        [type] => custom
        [type_label] => Custom
        [title] => Home
        [url] => http://dev.rarst.net/
        [target] => 
        [attr_title] => 
        [description] => 
        [classes] => Array
            (
                [0] => 
                [1] => menu-item
                [2] => menu-item-type-custom
                [3] => menu-item-object-custom
                [4] => current-menu-item
                [5] => current_page_item
                [6] => menu-item-home
            )

        [xfn] => 
        [current] => 1
        [current_item_ancestor] => 
        [current_item_parent] => 
    )

특정 메뉴 항목을 타겟팅하려면 조건을 공식화하고 객체에서 사용 가능한 데이터와 비교하여 확인해야합니다 (예 : if ( 2220 == $item['ID'] )

왜 다른 방향에서이 문제에 접근하지 않습니까? id == ??로 메뉴 항목을 타겟팅하려고 시도하는 대신 특정 시점 (ID가 아닌 메뉴 항목)에서 변경 될 수있는 경우 WP 관리 영역을 사용하여 대상 메뉴 항목에 사용자 정의 클래스 를 추가하십시오 . 그런 다음 Javascript에서 해당 클래스를 사용하여 필요한 정보를 트리거하십시오.

$('.my-class').click(function(e){
  // do other stuff
  e.preventDefault;
});

내 자바 스크립트가 보장되지 않습니다. jQuery를 사용하지 않는 경우 이것을 시도 할 수 있습니다.

WordPress에서 만든 사용자 지정 메뉴에 데이터 문자를 추가하고 싶었습니다.

내가 선택한 단계는 다음과 같습니다.

1. 내 메뉴의 ID 번호를 찾았습니다.
2. @guiniveretoo에서 해당 코드 줄을 추가했습니다.
3. 각 메뉴 항목에 대해 if 문을 작성했습니다 (다른 속성 값을 주입하기를 원했기 때문에).
4. 일했다!

여기 내 코드가 있습니다.

add_filter( 'nav_menu_link_attributes', 'wpse121123_contact_menu_atts', 10, 3 );
function wpse121123_contact_menu_atts( $atts, $item, $args )
{  
  $menu_target = 6;

  if ($item->ID == $menu_target) {
    $atts['data-letters'] = 'PROJECTS';
  }

  elseif ($item->ID == 7) {
    $atts['data-letters'] = 'RESUME';
  }
  elseif ($item->ID == 8) {
    $atts['data-letters'] = 'ARTWORKS';
  }
  elseif ($item->ID == 9) {
    $atts['data-letters'] = 'HELLO!';
  }
  return $atts;
}

이것이 도움이되기를 바랍니다.