alina29 10.01.2023 13:56

Как добавить кастомный атрибут к ссылкам в меню WordPress?

Здравствуйте! У меня возникла проблема с добавлением кастомного атрибута к ссылкам в меню WordPress. Я создала свое меню в административной панели и хочу добавить к каждой ссылке дополнительный атрибут "data-myattribute". В результате должно получиться нечто подобное:

<ul>
  <li><a href="#" data-myattribute="value1">Ссылка 1</a></li>
  <li><a href="#" data-myattribute="value2">Ссылка 2</a></li>
  <li><a href="#" data-myattribute="value3">Ссылка 3</a></li>
</ul>

Я пробовала использовать функцию wp_nav_menu(), но не смогла найти способ добавить кастомный атрибут к ссылкам в меню. Пожалуйста, помогите мне решить эту проблему.

Заранее благодарю за помощь!

Ответы:

tatyyanaM2021 10.01.2023 14:11

Проблема, с которой Вы сталкиваетесь, может быть решена с помощью хуков (hooks) и фильтров (filters) в WordPress. Вам понадобится создать и зарегистрировать свою собственную функцию-фильтр в файле functions.php вашей темы.

Вот пример кода, который позволит добавить кастомный атрибут "data-myattribute" к ссылкам в вашем меню:


function add_custom_attribute($atts, $item, $args) {
    $atts['data-myattribute'] = 'value' . $item->ID; // здесь можно задать значение атрибута в зависимости от элемента меню
    return $atts;
}
add_filter('nav_menu_link_attributes', 'add_custom_attribute', 10, 3);

Этот код добавляет фильтр "nav_menu_link_attributes", который вызывается для каждой ссылки в меню. Функция "add_custom_attribute" принимает три аргумента: $atts (массив атрибутов ссылки), $item (объект, представляющий элемент меню) и $args (аргументы, переданные в функцию "wp_nav_menu"). Внутри этой функции мы добавляем новый кастомный атрибут "data-myattribute" к массиву атрибутов и возвращаем измененный массив.

Вы можете настроить значение кастомного атрибута для каждой ссылке в меню, используя данные из объекта $item. В примере выше мы используем ID элемента меню, чтобы динамически генерировать значение атрибута.

После добавления этого кода в functions.php вашей темы, ссылки в вашем меню будут иметь дополнительный атрибут "data-myattribute" с заданным значением:


<ul>
  <li><a href="#" data-myattribute="value1">Ссылка 1</a></li>
  <li><a href="#" data-myattribute="value2">Ссылка 2</a></li>
  <li><a href="#" data-myattribute="value3">Ссылка 3</a></li>
</ul>

Надеюсь, это поможет Вам решить Вашу проблему! Если у Вас возникнут дополнительные вопросы, не стесняйтесь задавать.

Добавить ответ