INOYAKAIGOR

Внимание! Сайт незапланированно сломался и вскорости я его починю. Местами он уже, вроде, работает.

Как добавить data-атрибуты к меню wordpress


Запись от: 2014-10-24 16:56:50

   Случилась тут необходимость применить некоторые фишки из фронтэнд-фреймворка Foundation требующие data-аттрибуты для меню. Решений как это сделать для элементов меню в интернете валом вали, а вот как их добавить к контейнеру меню мне с ходу найти не удалось.

В теории это должно происходить через дополнительный класс, расширяющий стандартный класс Walker_Nav_Menu(пример из документации). Для гуру PHP и Wordpress'а, которые знают API последнего как «Отче наш» это не составляет проблемы, но если вы такой человек, вы бы не читали эту запись.

Вот и я впервые столкнулся с API Wordpress'а, а времени изучать, дебажить и делать всё правильно не было. Ибо время-деньги.

Итак, делаем свой костыль.

Открываем файл, /wp-includes/nav-menu-template.php и мотаем до 232-й строки. Видим ассив $defaults. Там задаются дефолтные значения параметров будущего меню. Дописываем в конец массива следующее:
, 'data_attrs' => ''
чтобы получился вот такой код:
$defaults=array('menu'=>'', 'container'=>'div', 'container_class'=>'', 'container_id'=>'', 'menu_class'=>'menu', 'menu_id'=>'', 'echo'=>true, 'fallback_cb'=>'wp_page_menu', 'before'=>'', 'after'=>'', 'link_before'=>'', 'link_after'=>'', 'items_wrap'=>'%3$s', 'depth'=>0, 'walker'=>'', 'theme_location'=>'', 'data_attrs'=>'');
Отлично. Мотаем дальше. До строки 326. Там видим такую строку.
$nav_menu .= '<'. $args->container . $id . $class . '>';
Меняем его на следующий код:
$nav_menu .= '<'. $args->container . $id . $class;
if(is_array($args->data_attrs)){
foreach($args->data_attrs as $key => $value){
$nav_menu .= 'data-'.$key.'="'.$value.'"';
}
}
$nav_menu .= '>';

В нём проверяется массив data-аттрибутов на существование и, если он есть, добавляет их к тегу.
Теперь в шаблоне, в вызове функции wp_nav_menu можно добавить наши аттрибуты:
wp_nav_menu( array('menu_class' => 'main-menu',
'container' => 'nav',
'data_attrs' => array('magellan-expedition' => 'fixed')
)
);

ВАЖНО! Ограничения использования этого метода



  1. Я работал с новым, на момент написания этой записи, Wordpress 4.0
  2. Так как мы правим базовые файлы Wordpress возможно, что если вы обновитесь на новую версию движка все изменения затруться обновлением
  3. Я никак не тестировал это решение. Возможные последствия вы и без меня понимаете.



Теги: wordpress php программирование tips & tricks API html5 

Комментарии:



©Игорь InoY Звягинцев