Урок - Темизация меню в Drupal 7. Шаблон menu_tree(). Шаблон menu_link().

Главная » Курсы » Курс Drupal 7, Темизация для зайцев. » Урок - Темизация меню в Drupal 7. Шаблон menu_tree(). Шаблон menu_link().

Обучающий онлайн курс
Drupal 7, Темизация для зайцев.

Лицензия: Копирование запрещено.

Для темизации меню Drupal 7 предоставлет два шаблона:

  • menu_tree - обертка для всего меню.
  • menu_link - вывод отдельного пункта меню и дочерних элементов.

Шаблон menu_link.

Шаблон menu_link отвечает за вывод одного пункта меню, включая под меню. Базовой реализацией  шаблона является функция theme_menu_link() в файле ./includes/menu.inc и выглядит следующим образом:

/**
 * Возвращает HTML для ссылки меню включая подменю.
 *
 * @param $variables
 *   Ассоциативный массив содержащий:
 *   - element: Структурированный массив дданных для ссылки меню.
 *
 * @ingroup themeable
 */
function theme_menu_link(array $variables) {
  $element = $variables['element'];
  $sub_menu = '';

  if ($element['#below']) {
    $sub_menu = drupal_render($element['#below']);
  }
  $output = l($element['#title'], $element['#href'], $element['#localized_options']);
  return '<li' . drupal_attributes($element['#attributes']) . '>' . $output . $sub_menu . "</li>\n";
}

Для изменения шаблона menu_link необходимо переопределить шаблон menu_link и создать новую реализацию шаблона menu_link.

Шаблон menu_tree.

Шаблон menu_tree отвечает за вывод обертки для всего меню, или под меню. Базовой реализацией  шаблона является функция theme_menu_tree() в файле ./includes/menu.inc и выглядит следующим образом:

/**
 * Вовращает HTML для оборачивания поддерева меню.
 *
 * @param $variables
 *   Ассоциативный массив содержит:
 *   - tree: HTML-строка содержащая элементы дерева меню.
 *
 * @see template_preprocess_menu_tree()
 * @ingroup themeable
 */
function theme_menu_tree($variables) {
  return '<ul class="menu">' . $variables['tree'] . '</ul>';
}

Для изменения шаблона menu_tree необходимо переопределить шаблон menu_tree и создать новую реализацию шаблона menu_tree.

Расширение шаблона menu_link и шаблона menu_tree.

Для более гибкой темизации, на уровне шаблонов, Drupal 7 предоставляет возможность темизировать каждое меню отдельно:

  • шаблон menu_tree__<menu_name> позволяет задать шаблон-обёртку для меню с именем <menu_name>.
  • шаблон menu_link__<menu_name> позволяет задать шаблон для отдельного пункта из меню <menu_name>.

В результате имеем следующий приоритет использования шаблонов для обёртки меню:

  • В первую очередь Drupal 7 будет искать реализацию шаблона menu_tree__<menu_name> в текущей теме.
  • Если не найдена реализация шаблона menu_tree__<menu_name>, то Drupal 7 будет искать реализацию шаблона menu_tree в текущей теме.
  • Если не найдена реализация шаблона menu_tree, то Drupal 7 будет использовать функцию theme_menu_tree() из файла ./includes/menu.inc.

Для шаблона пункта меню Drupal 7 поступает аналогично:

  • В первую очередь Drupal 7 будет искать реализацию шаблона menu_link__<menu_name> в текущей теме.
  • Если не найдена реализация шаблона menu_link__<menu_name>, то Drupal 7 будет искать реализацию шаблона menu_link в текущей теме.
  • Если не найдена реализация шаблона menu_link, то Drupal 7 будет использовать функцию theme_menu_link() из файла ./includes/menu.inc.

Практическое занятие.

Создайте новое меню "Test Menu". Обратите внимание, что системное имя у нашего меню будет "test-menu".

Добавьте несколько пунктов для меню:

Настраиваем вывод блоков с меню Navigation и меню "Test menu" в левую колонку:

В файле template.php, разрабатываемой темы добавляем реализацию хука hook_theme():

/**
 * Реализация hook_theme().
 */
function vera_theme(){
    return array(
        //    переопределяем шаблон menu_tree
        'menu_tree' => array(
            'render element' => 'tree',
        ),
        //    переопределяем шаблон menu_link
        'menu_link' => array(
            'render element' => 'element',
        ),
        //    добавляем шаблон menu_tree для меню Test menu
        'menu_tree__menu_test_menu' => array(
            'render element' => 'tree',
        ),
        //    добавляем шаблон menu_link для меню Test menu
        'menu_link__menu_test_menu' => array(
            'render element' => 'element',
        ),
    );
}

Добавляем реализации для шаблонов:

  • для шаблона menu_link это будет функция vera_menu_link().
  • для шаблона menu_tree это будет функция vera_menu_tree().
  • для шаблона menu_link__test_menu это будет функция vera_menu_link__test_menu().
  • для шаблона menu_tree__test_menu это будет функция vera_menu_tree__test_menu().

Ниже указан код который необходимо вставить в файл template.php:

function vera_menu_tree($variables) {
  return '<fieldset><legend>Шаблон menu_tree</legend><ul class="menu">' . $variables['tree'] . '</ul></fieldset>';
}

function vera_menu_link(array $variables) {
  $element = $variables['element'];
  $sub_menu = '';

  if ($element['#below']) {
    $sub_menu = drupal_render($element['#below']);
  }
  $output = l($element['#title'], $element['#href'], $element['#localized_options']);
  return '<li' . drupal_attributes($element['#attributes']) . '><strong style="color:green;">[[</strong>' . $output . $sub_menu . "<strong style=\"color:green;\">]]</strong></li>\n";
}

function vera_menu_tree__menu_test_menu($variables) {
  return '<fieldset><legend>Шаблон&nbsp;menu_tree__menu_test_menu</legend><ul class="menu">' . $variables['tree'] . '</ul></fieldset>';
}

function vera_menu_link__menu_test_menu(array $variables) {
  $element = $variables['element'];
  $sub_menu = '';

  if ($element['#below']) {
    $sub_menu = drupal_render($element['#below']);
  }
  $output = l($element['#title'], $element['#href'], $element['#localized_options']);
  return '<li' . drupal_attributes($element['#attributes']) . '><strong style="color:red;">[[</strong>' . $output . $sub_menu . "<strong style=\"color:red;\">]]</strong></li>\n";
}

Очищаем кэш тем.

В результате на главной странице имеем результат:

И собственно полученный HTML-код

<div id="block-system-navigation" class="block block-system contextual-links-region block-menu">
    <h2>Navigation</h2>
    ...
    <div class="content">
        <fieldset>
            <legend>Шаблон menu_tree</legend>
            <ul class="menu">
                <li class="first last leaf">
                    <strong style="color:green;">[[</strong>
                    <a href="/node/add">Add content</a>
                    <strong style="color:green;">]]</strong>
                </li>
            </ul>
        </fieldset>
    </div>
</div>
<div id="block-menu-menu-test-menu" class="block block-menu contextual-links-region">
    <h2>Test menu</h2>
    ...
    <div class="content">
        <fieldset>
            <legend>Шаблон&nbsp;menu_tree__menu_test_menu</legend>
            <ul class="menu">
                <li class="first last expanded">
                    <strong style="color:red;">[[</strong>
                    <a href="http://ramech.net/" title="">Link to Ramech.net</a>
                    <fieldset>
                        <legend>Шаблон&nbsp;menu_tree__menu_test_menu</legend>
                        <ul class="menu">
                            <li class="first expanded">
                                <strong style="color:red;">[[</strong>
                                <a href="http://ramech.net/docs" title="">Docs</a>
                                <fieldset>
                                    <legend>Шаблон&nbsp;menu_tree__menu_test_menu</legend>
                                    <ul class="menu">
                                        <li class="first last leaf">
                                            <strong style="color:red;">[[</strong>
                                            <a href="http://ramech.net/docs/css3" title="">CSS 3</a><strong style="color:red;">]]</strong>
                                        </li>
                                    </ul>
                                </fieldset>
                                <strong style="color:red;">]]</strong>
                            </li>
                            <li class="last leaf">
                                <strong style="color:red;">[[</strong>
                                <a href="http://ramech.net/courses" title="">Courses</a>
                                <strong style="color:red;">]]</strong>
                            </li>
                        </ul>
                    </fieldset>
                    <strong style="color:red;">]]</strong>
                </li>
            </ul>
        </fieldset>
    </div>
</div>

Который мы сейчас и будем разбирать.

Разбор полученного кода.

На рисунке ниже выделены места шаблона и их место в полученном HTML-коде.