Как добавить атрибут данных в пункт меню WordPress


17

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

Однако, добавив, что если заявление, предложенное одним комментатором, я получаю следующую ошибку:

Fatal error: Cannot use object of type WP_Post as array

Я предполагаю, что больше кода требуется, но в потере. В качестве напоминания без оператора if он работает, однако он нацелен на все ссылки, а не на одну ссылку, на которую я хочу ориентироваться.


Я хочу вставить <? Php the_id ();?> В переменную $ atts. Примерно так: // осмотреть $ item if ($ item-> ID == $ menu_target) {$ atts ['data-toggle'] = 'modal - <? php the_id ();?>'; } вернуть $ atts; Можете ли вы помочь мне, как я могу вставить the_id в переменную $ atts. Спасибо
Наджк

Ответы:


36

Конкретно редактируя код, который вы указали в исходном вопросе:

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

После того, как я поменял некоторые из моих собственных ценностей, это сделал! Спасибо! Отмечено как правильное, но говорит, что мне нужно подождать еще 23 часа, прежде чем я смогу присудить награду.
cchiera

Рад был помочь! : D
Джен

Я поставил напоминание в «Фантастике», чтобы не забыть присудить награду завтра.
Cchiera

Что делать, если у вас есть несколько пунктов меню в качестве цели?
Эрик Митжанс

просто используйте несколько if, если значение data-toggle отличается. Или вы можете сохранить идентификатор в ключе массива (учитывая, что они уникальны) и модальное имя в качестве значения массива. Затем проверьте утверждение if сarray_key_exists()
Сисир

8

Второй $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'] )


Спасибо за это! Однако я не совсем уверен, что понимаю, как получить идентификатор $ item для моего конкретного пункта меню. В вашем примере 2220 также совпадает с вашим URL " dev.rarst.net/?p=2220 ". Моя ссылка, к которой я хочу добавить атрибут data, не переходит на другой URL-адрес WordPress, а скорее href = "# ContactForm". На основе вашего примера выше я погуглил и попытался запустить echo var_export ($ GLOBALS ['post'], TRUE); но когда я смотрю рядом с отдельным пунктом меню, я не вижу ни одного уникального идентификатора. Вы можете уточнить? Или в "if (2220 == $ item ['ID'])" Заранее спасибо!
Cchiera

2
Вы видите ошибку, потому что $itemэто объект, а не массив; изменить $item['ID']To $item->ID.
Джен

1

Почему вы не подходите к этой проблеме с другой стороны? Вместо того, чтобы пытаться выбрать пункт меню с идентификатором == ?? который может измениться в какой-то момент (пункт меню, а не идентификатор), используйте область WP Admin, чтобы добавить пользовательский класс в пункт меню, на который вы хотите настроить таргетинг. Затем используйте этот класс в своем Javascript, чтобы вызвать необходимую информацию:

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

Мой JavaScript не гарантируется. Если вы не используете JQuery, вы можете попробовать это .


1

Я хотел добавить буквы данных в пользовательское меню, которое я создал в WordPress.

Шаги, которые я выбрал, были:

  1. Нашел номер идентификатора моего меню.
  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;
}

Надеюсь, это поможет вам.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.