
В данной статье мы продолжим совершенствовать наш адаптивный шаблон Joomla, созданный с помощью Bootstrap Framework. Я расскажу о том, как можно добавлять иконки Bootstrap к отдельным пунктам меню Joomla, просто редактируя настройки этих пунктов. Иконки созданы с помощью иконочного шрифта, а значит, их можно добавлять в любом количестве не боясь замедления загрузки сайта.
Содержание
Как добавляются иконки Bootstrap
Не так давно я писал статью Добавление иконочных шрифтов на сайт Joomla, в которой достаточно подробно описывал, что такое иконочные шрифты и почему использовать их лучше, чем традиционные иконки-картинки. Если вы еще не ознакомились с этой статьей, настоятельно рекомендую сделать это, прежде чем читать дальше.
По умолчанию Bootstrap предоставляет достаточно внушительный набор иконок (более 250 штук), который покрывает большинство задач. Вот некоторые из них:
Если Bootstrap уже подключен в вашем шаблоне, то добавить иконку на страницу очень просто. Достаточно вставить в html-код страницы следующую строку:
<span aria-hidden="true"></span>
Определяется иконка CSS-классом, который добавлен в данный код. Название классов для каждой иконки можно посмотреть на этой странице документации по Bootstrap.
Но что, если мы не хотим каждый раз добавлять html-код? Что, если мы вообще не знаем о том, что такое html-код?
Я вижу задачу добавления иконок пунктам меню Joomla следующим образом. Когда мы создаем новый пункт меню, которому хотим добавить иконку, то в его настройках указываем CSS-класс этой иконки и после сохранения она автоматически появляется у пункта меню.
Вообще, такая задача может решаться даже без каких-либо правок. Смотрите, например, мы хотим добавить нашему пункту меню «Home» иконку домика. Что нужно сделать:
- Открыть на редактирование пункт меню Home
- Перейти на вкладку Параметры ссылки
- В опции 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. Если вы ищите дополнительный способ привлечения клиентов, загляните к ним на сайт. Возможно, вас заинтересует их предложение.
Если картинки нужно вставить после статьи, то все просто. С новыми дополнительными полями Joomla 3.7 не нужен даже никакой K2. Но это будет именно отдельный блок картинок до или после всего текста.
Если же нужно вставить картинки красиво непосредственно в текст, то тут сложнее. Статья - это именно html-код. Весь PHP находится или до или после нее. Можно вставить и внутрь, но это будет не универсально. Здесь нужен плагин, который умеет формировать bootstrap-совместимый html-код за вас при выборе картинки. Мне не попадались такие расширения, хотя хотелось бы.
Самое удобное, что я видел, это вставка изображений, как это сделано в форуме Kunena. Зайдите на http://wedal.ru/forum/, попробуйте создать новую тему. Внизу, под блоком ввода текста сообщения, будет форма "Вложения". На мой взгляд, ничего удобнее для добавления изображений в текст придумать просто нельзя. Но я не встречал подобных решений для материалов Joomla.
Меня уже начинают грызть сомнения, не проще ли было бы создать сайт на базе Wordpress, но я от себя такие мысли гоню
Попробую еще раз установить JCE Image Manager Extended, о котором Вы писали. Я пробовала бесплатную версию, и она мне показалась очень уж архаичной - и дизайн старый, и интерфейс не очень понятный. Ощущение, что расширение просто забросили. Покопаюсь в JED. Спасибо!
Одна проблема: на мобильном экране количество колонок не меняется. Плагин на самом деле не новый, достижений бутстрапа не учитывает. Я нашла пользователя этого плагина, который решает проблему с помощью еще одного плагина https://www.regularlabs.com/forum/sourcerer/40011-adding-css-class-to-article#48965 - но хоть убей не пойму, что надо делать. Может, вы сможете понять, как это делать? :)
заранее спасибо!
Да, я дошла в своих поисках именно до этого файла, но не рискнула править код. Покумекаю. Если что - вернусь к вам. Сколько Вы возьмете за правку кода?
Например, если мне нужно чтобы в верхнем меню иконка домика была красная, а в нижнем белая, но при этом общий стиль у всех других синий. Достаточно назначить разные CSS-классы иконок и получить желаемое оформление?
Один вопрос, с которым пока не могу разобраться: почему-то не отображаются фотографии в материалах (шаблон создан по вашим урокам с помощью Bootstrap).
Буду признателен за подсказку.