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

Question

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

4 нояб. 2013 г., 08:02:43

Просмотры: 61.2K

Голосов: 21

Я использую Twitter Bootstrap и мне нужно добавить атрибут data-toggle="modal" к тегу a ссылки меню. При поиске большинство результатов ссылаются на использование walker'ов для выпадающих меню Twitter Bootstrap, однако в моем меню нет выпадающих списков, и мне нужно добавить только определенный атрибут.

Затем я нашел это: Добавление пользовательских атрибутов к пунктам меню без плагина, что очень полезно, так как начиная с WordPress 3.6+ нам больше не нужно использовать сложные walker'ы, а можно использовать это: 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 )
{
    // проверяем $item, затем ...
    $atts['data-toggle'] = 'modal';
    return $atts;
}

и это работает, однако, как и ожидалось, добавляет атрибут ко всем тегам a в меню. Поэтому я пытаюсь понять, как нацелиться на один пункт меню с #menu-item-7857 a или подобным.

Кто-нибудь знает, где найти пример targeting'а пункта меню или может определить, как это сделать на основе информации, которая есть в указанной выше ссылке на 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);

ОБНОВЛЕНИЕ - Единственный ответ ниже звучит многообещающе, но из него не удалось определить, как найти номер для targeting'а моей конкретной ссылки и где/как добавить это условие в рабочем примере. Добавил комментарий, но ответа не получил. Прошло около 18 дней, решил попробовать привлечь внимание с помощью награды.

Когда я смотрю на код ссылки, которую хочу targeting'овать:

<li id="menu-item-7858" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-7858"><a href="#" data-toggle="modal">Чат</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'] ) {
        // проверяем $item, затем ...
        $atts['onclick'] = 'SnapEngage.startLink();';
        return $atts;
    }
}

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

Fatal error: Cannot use object of type WP_Post as array

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

TechRemarker

393

функции меню

Комментарии

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

nadzhq

15 февр. 2014 г. 08:42:56

Все ответы на вопрос

Комментарии

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

TechRemarker

22 нояб. 2013 г. 17:50:18

Рад был помочь! :D

Jen

22 нояб. 2013 г. 17:51:12

Поставил напоминание в Fantastical, чтобы не забыть назначить вознаграждение завтра.

TechRemarker

22 нояб. 2013 г. 18:07:00

Что делать, если у вас несколько целевых пунктов меню?

Eric Mitjans

20 нояб. 2015 г. 14:23:29

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

Sisir

17 апр. 2016 г. 16:32:33

Второй аргумент $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'] )

Rarst

100K

4 нояб. 2013 г. 11:20:03

Комментарии

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

TechRemarker

4 нояб. 2013 г. 16:07:44

Ошибка возникает потому, что $item является объектом, а не массивом; замените $item['ID'] на $item->ID.

Jen

22 нояб. 2013 г. 17:36:49

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

$('.my-class').click(function(e){
  // выполните другие действия
  e.preventDefault;
});

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

Jen

2.92K

22 нояб. 2013 г. 17:31:19

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

Выполнил следующие шаги:

Нашел ID своего меню.
Добавил строки кода от @guiniveretoo
Написал условные операторы для каждого пункта меню (так как мне нужно было вставить разные значения атрибутов).
Заработало!

Вот мой код:

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'] = 'ПРОЕКТЫ';
  }

  elseif ($item->ID == 7) {
    $atts['data-letters'] = 'РЕЗЮМЕ';
  }
  elseif ($item->ID == 8) {
    $atts['data-letters'] = 'РАБОТЫ';
  }
  elseif ($item->ID == 9) {
    $atts['data-letters'] = 'ПРИВЕТ!';
  }
  return $atts;
}

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

Anoop Anson

11

1 мая 2018 г. 09:56:15

Jen 2.92K · Accepted Answer · 2013-11-22T17:41:52Z

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

add_filter( 'nav_menu_link_attributes', 'wpse121123_contact_menu_atts', 10, 3 );
function wpse121123_contact_menu_atts( $atts, $item, $args )
{
  // ID целевого пункта меню
  $menu_target = 123;

  // проверяем $item
  if ($item->ID == $menu_target) {
    $atts['data-toggle'] = 'modal';
  }
  return $atts;
}

Jen

2.92K

22 нояб. 2013 г. 17:41:52