Создание адаптивного шаблона Joomla с использованием Bootstrap. Часть 5. Добавление иконок Bootstrap пунктам меню Joomla

В данной статье мы продолжим совершенствовать наш адаптивный шаблон Joomla, созданный с помощью Bootstrap Framework. Я расскажу о том, как можно добавлять иконки Bootstrap к отдельным пунктам меню Joomla, просто редактируя настройки этих пунктов. Иконки созданы с помощью иконочного шрифта, а значит, их можно добавлять в любом количестве не боясь замедления загрузки сайта.

Как добавляются иконки Bootstrap

Не так давно я писал статью Добавление иконочных шрифтов на сайт Joomla, в которой достаточно подробно описывал, что такое иконочные шрифты и почему использовать их лучше, чем традиционные иконки-картинки.  Если вы еще не ознакомились с этой статьей, настоятельно рекомендую сделать это, прежде чем читать дальше.

По умолчанию Bootstrap предоставляет достаточно внушительный набор иконок (более 250 штук), который покрывает большинство задач.  Вот некоторые из них:

Если Bootstrap уже подключен в вашем шаблоне, то добавить иконку на страницу очень просто. Достаточно вставить в html-код страницы следующую строку:

<span aria-hidden="true"></span>

Определяется иконка CSS-классом, который добавлен в данный код. Название классов для каждой иконки можно посмотреть на этой странице документации  по Bootstrap.

Но что, если мы не хотим каждый раз добавлять html-код? Что, если мы вообще не знаем о том, что такое html-код?

Я вижу задачу добавления иконок пунктам меню Joomla следующим образом. Когда мы создаем новый пункт меню, которому хотим добавить иконку, то в его настройках указываем CSS-класс этой иконки и после сохранения она автоматически появляется у пункта меню.

Вообще, такая задача может решаться даже без каких-либо правок. Смотрите, например, мы хотим добавить нашему пункту меню «Home» иконку домика. Что нужно сделать:

1. Открыть на редактирование пункт меню Home
2. Перейти на вкладку Параметры ссылки
3. В опции CSS-класс ссылки указать glyphicon glyphicon-home

Примерно вот так:

В результате, на сайте мы увидим следующее:

Неплохо, но есть ряд связанных проблем. Если мы поступим описанным выше образом, то HTML-код будет следующим:

<a href="/ ">Home</a>

Это не совсем то, что требовалось сделать по документации Bootstrap.

Из-за такого подхода возникнут трудности, связанные с единым стилевым оформлением иконки и текста ссылки пункта меню. Можно попробовать обойти их средствами CSS, но лучше и правильнее все-таки последовать документации и привести ссылку к виду:

<a href="/">
           <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
           <span class="item-text">Home</span>
</a>

Таким образом, мы сделаем иконку и текст ссылки независимыми друг от друга и легко сможем оформить их в CSS по своему вкусу. Как добиться такой структуры? Редактированием макета модуля меню Joomla.

Создание макета модуля меню, поддерживающего иконки Bootstrap

Отредактировать макет модуля меню Joomla для поддержки иконок Bootstrap достаточно просто, но в этой задачке есть несколько тонкостей. Как обычно, будем действовать по шагам.

Шаг 1. Переопределяем макет модуля меню в шаблон Joomla

Здесь есть следующая особенность. Макет модуля меню состоит из нескольких подмакетов. Перейдите в каталог:

modules/mod_menu/tmpl/

Вы увидите следующие файлы:

• default.php – основной макет модуля
• default_component.php – подмакет, формирующий ссылку на какой-либо компонент Joomla
• default_heading.php – подмакет, формирующий подзаголовок в меню
• default_separator.php – подмакет, формирующий разделитель в меню
• default_url.php – подмакет, формирующий внешнюю ссылку на другой сайт

Поскольку нам требуется изменить структуру формирования ссылки в меню, то и переопределять нужно только те подмакеты, которые формируют ссылки и, конечно, основной макет модуля.

Таким образом, копируем файлы:

• default.php
• default_component.php
• default_url.php

в директорию:

templates/masterbootstrap/html/mod_menu/

В этой директории, скорее всего, уже есть макеты с аналогичными названиями. Если так, то изменяем названия копируемых файлов на:

• icons.php
• icons _component.php
• icons _url.php

Таким образом, мы создали альтернативный макет для модуля меню, который, в дальнейшем, может быть выбран в настройках модуля.

Шаг 2. Исправляем название подмакетов в основном альтернативном макете меню

В отличие от других переопределений макетов, с макетом меню есть такая тонкость: в основном макете icons.php фигурируют названия подмакетов. А раз мы их изменили, то нужно отразить эти изменения и в макете меню.

Открываем файл icons.php, находим строчку:

require JModuleHelper::getLayoutPath('mod_menu', 'default_' . $item->type);

заменяем на:

require JModuleHelper::getLayoutPath('mod_menu', icons_' . $item->type);

Находим строчку:

require JModuleHelper::getLayoutPath('mod_menu', 'default_url');

заменяем на:

require JModuleHelper::getLayoutPath('mod_menu', 'icons_url');

После этой правки основной макет будет вызывать не стандартные подмакеты, а те, в которые мы будем вносить изменения на следующем шаге.

Шаг 3. Изменяем подмакеты модуля меню.

Теперь нужно найти в подмакетах  icons _component.php и icons _url.php ссылки и изменить их структуру на нужную нам.

Здесь также есть одна особенность. Открыв файл icons _component.php, вы обнаружите в нем следующий код:

switch ($item->browserNav)
{
                default:
                case 0:
?><a <?php echo $class; ?>href="<?php echo $item->flink; ?>" <?php echo $title; ?>><?php echo $linktype; ?></a><?php
                               break;
                case 1:
                               // _blank
?><a <?php echo $class; ?>href="<?php echo $item->flink; ?>" target="_blank" <?php echo $title; ?>><?php echo $linktype; ?></a><?php
                               break;
                case 2:
                // Use JavaScript "window.open"
?><a <?php echo $class; ?>href="<?php echo $item->flink; ?>" onclick="window.open(this.href,'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes');return false;" <?php echo $title; ?>><?php echo $linktype; ?></a>
<?php
                               break;
}

Здесь ссылка формируется отдельно для каждого из трех вариантов:

• Ссылка открывается в том же окне
• Ссылка открывается в новом окне
• Ссылка открывается в отдельном окне браузера

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

Чтобы не раздувать статью, я покажу исправление только для первого варианта, для второго и третьего они аналогичны. Если вам сложно внести исправления самостоятельно, то в конце статьи вы сможете скачать готовые, полностью исправленные макеты, которые останется просто скопировать в шаблон.

Код:

<a <?php echo $class; ?>href="<?php echo $item->flink; ?>" <?php echo $title; ?>><?php echo $linktype; ?></a>

Исправляем на:

<a href="/<?php echo $item->flink; ?>" <?php echo $title; ?>>
                <span <?php echo $class; ?> aria-hidden="true"></span>
                <span><?php echo $item->title; ?></span>
</a>

По аналогии делаем для остальных вариантов и подмакета icons _url.php.

Шаг 4. Устанавливаем альтернативный макет в настройках модуля меню.

Всё, что нам осталось сделать, это указать новый альтернативный макет в настройках модуля меню, которое будет показывать иконки Bootstrap. Для этого переходим в редактирование модуля меню в менеджере модулей, и на вкладке Дополнительные параметры, в опции Альтернативный макет, выбираем макет icons.

После этого, если на предыдущем шаге вы изменили макет правильно, на сайте URL будут сформированы согласно задуманной нами структуре (я добавил CSS-классы иконок для каждого пункта меню):

Вот и всё. Используя подобную технику, вы можете легко добавлять иконки из набора Bootstrap к пунктам меню Joomla.

Скачать архив с исправленными макетами.

----------------

Помимо, собственно, адаптивного дизайна есть еще и некоторые другие варианты, позволяющие дать пользователям доступ к вашей информации с телефонов и планшетов. Одним из таких вариантов являются мобильные приложения.

Да, этот вариант более дорогой, но он может привлечь трафик, недоступный простым сайтам. Дело в том, что приложение размещается в каталогах App store, Google Play или Microsoft Store. Люди, которых можно найти там, возможно, никогда не зашли бы на ваш сайт из поисковых систем.

По аналогии с обычным SEO-продвижением, существуют компании, которые продвигают мобильные приложения в маркетах. Одна из них Advertmobile (http://advertmobile.net) предлагает продвижение мобильных приложений Android и IOS. Если вы ищите дополнительный способ привлечения клиентов, загляните к ним на сайт. Возможно, вас заинтересует их предложение.

Об авторе

Wedal (Виталий). Веб-разработчик полного цикла (Full Stack). Создатель и автор сайта Wedal.ru.

Основной профиль – создание сайтов и расширений на CMS Joomla.

• Об авторе
• Портфолио
• Услуги
• Контакты