SVOBODAKODA!

Заметки о веб-разработке: css, jquery, wordpress, drupal

21 Март

Drupal → Темизация меню в Drupal 7

В статье пойдет речь о переопределении стандартного вывода меню в 7-й версии друпала. Обычно решение подобных задач сводится к написанию css-классов для пунктов меню, но бывают случаи, когда меню имеет нетривиальную структуру и нужен другой подход. О таких случаях мне и хочется рассказать.


Для начала о темизации меню стандартными способами.

1. В файле шаблона темы используем функцию theme() примерно так:

<? print theme('links__system_main_menu', array(
	'links' => $main_menu,
	'attributes' => array(
	'id' => 'custom-id',
	'class' => array('links', 'clearfix'),
	),
	'heading' => array(
	'text' => t('Main menu'),
	'level' => 'h2',
	'class' => array('element-invisible'),
	),
));?>

Таким образом можно задать идентификаторы и классы для списков и их элементов.
2. Второй вариант заключается в создании оберточного блока для меню, и последующих манипуляций с css темы. Например, в файле page.tpl.php создаем блок с id=”navigation”, помещаем в него вызов нашего меню, тогда в файле стилей пишем #navigation ul {…}

<div id="navigation">
    <? echo render(menu_tree('main-menu'));?>
</div>

Но оба этих способа позволяют лишь изменять внешний вид меню, но не его структуру.
Что делать, если нужна структура меню, например такая:

<ul>
    <li><a href="#"><span>Drupal 5</span></a></li>
    <li><a href="#"><span>Drupal 6</span></a></li>
    <li><a href="#"><span>Drupal 7</span></a></li>
</ul>

Для того, чтобы изменить структуру вывода меню в друпале, воспользуемся функцией THEME_NAME_menu_link__MENU_NAME().
Пример использования для реализации приведенной выше структуры:

function THEME_NAME_menu_link__MENU_NAME(array $variables) {
	$element = $variables['element'];
	$output = l(''.$element['#title'].'', $element['#href'], $options = array('html' => TRUE));
	return '<li' . drupal_attributes($element['#attributes']) . '>' . $output . "</li>\n";
}

Таким образом можно переопределить любое меню на сайте, будь то системное или созданное пользователем. Если меню содержит подпункты, и они должны отображаться, то функция приобретет следующий вид:

function THEME_NAME_menu_link__MENU_NAME(array $variables) {
    $element = $variables['element'];
    $sub_menu = '';
    if ($element['#below']) {
        $sub_menu = drupal_render($element['#below']);
    }
    $output = l('<span>'.$element['#title'].'</span>', $element['#href'], $options = array('html' => TRUE));
    return '<li' . drupal_attributes($element['#attributes']) . '>' . $output . $sub_menu . "</li>\n";
}

Изменить Вид списка можно с помощью функции THEME_NAME_menu_tree__MENU_NAME()

function THEME_NAME_menu_tree__MENU_NAME($variables) {
  return '<ul>' . $variables['tree'] . '</ul>';
}

Таким образом, переопределить можно что угодно. Удачных экспериментов!

 
Обсуждение закрыто.