Куда идем?

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

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

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

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

1

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

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

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

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

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

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

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

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

2

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

3

Неплохо, но есть ряд связанных проблем. Если мы поступим описанным выше образом, то 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.

4

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

5

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

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

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

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

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

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

Об авторе
Wedal
(Виталий). Веб-разработчик полного цикла (Full Stack). Создатель и автор сайта Wedal.ru.
Основной профиль – создание сайтов и расширений на CMS Joomla.
Добавить комментарий

Комментарии  
0
а не планируете ли Вы написание статьи про альтернативный шаблон статьи Joomla? Столкнулась с тем, что потребовалось выложить много картинок статью блога, и чтобы выглядело красиво (если просто вставлять картинку как часть текста, то получается каша, и на мобильных устройствах не так упорядоченно) - в итоге пришлось в код статьи вставлять div row и все последующие прелести от бутстрап. А я ищу шаблон/плагин/компонент, в котором удобно было бы добавлять картинку и рядом текст, причем для человека, далекого от программирования. Просто окно для текста и окно для выбора картинки. Смотрела К2, но там одна большая картинка вверху текста, а если добавляешь customized fields - image - то выводит в конце статьи с идиотским заголовком: Дополнительно к этой статье, что ли... Хрень полная.
0
Dina, здесь нужен не альтернативный шаблон статьи, а именно плагин удобной вставки картинок в html-код статьи.

Если картинки нужно вставить после статьи, то все просто. С новыми дополнительными полями Joomla 3.7 не нужен даже никакой K2. Но это будет именно отдельный блок картинок до или после всего текста.

Если же нужно вставить картинки красиво непосредственно в текст, то тут сложнее. Статья - это именно html-код. Весь PHP находится или до или после нее. Можно вставить и внутрь, но это будет не универсально. Здесь нужен плагин, который умеет формировать bootstrap-совместимый html-код за вас при выборе картинки. Мне не попадались такие расширения, хотя хотелось бы.

Самое удобное, что я видел, это вставка изображений, как это сделано в форуме Kunena. Зайдите на http://wedal.ru/forum/, попробуйте создать новую тему. Внизу, под блоком ввода текста сообщения, будет форма "Вложения". На мой взгляд, ничего удобнее для добавления изображений в текст придумать просто нельзя. Но я не встречал подобных решений для материалов Joomla.
0
Большое спасибо за развернутый ответ, Wedal.
Меня уже начинают грызть сомнения, не проще ли было бы создать сайт на базе Wordpress, но я от себя такие мысли гоню :-)
Попробую еще раз установить JCE Image Manager Extended, о котором Вы писали. Я пробовала бесплатную версию, и она мне показалась очень уж архаичной - и дизайн старый, и интерфейс не очень понятный. Ощущение, что расширение просто забросили. Покопаюсь в JED. Спасибо!
0
Привет! Нашла вот такую штуку http://www.admiror-design-studio.com/admiror-joomla-extensions/admiror-columnizer - добавляешь в тело статьи таги и статья разбивается на столько колонок, сколько нужно. Просто и красиво. Картинки тоже можно добавлять в колонки, выравнивать по центру или по краям.
Одна проблема: на мобильном экране количество колонок не меняется. Плагин на самом деле не новый, достижений бутстрапа не учитывает. Я нашла пользователя этого плагина, который решает проблему с помощью еще одного плагина https://www.regularlabs.com/forum/sourcerer/40011-adding-css-class-to-article#48965 - но хоть убей не пойму, что надо делать. Может, вы сможете понять, как это делать? :)
заранее спасибо!
0
Dina, если плагин с первой ссылки в принципе вас устраивает, то проще всего немного отредактировать его код, так чтобы он добавлял классы Bootstrap. Найдите в plugins/content/имя_плагина файл плагина и отредактируйте выходную разметку так, как вам нужно. Я посмотрел код плагина (вам нужен файл AC_helper.php). В нем в переменную $html выводится разметка, но она табличная. Вы можете переделать ее под разметку Bootstrap. Если знаний не хватит, можете обратиться ко мне для решения этой задачки за отдельную плату.
0
Ну вот, я вам такую идею подкинула - бесплатно, между прочим! :) а вы мне сразу - за доплату.
Да, я дошла в своих поисках именно до этого файла, но не рискнула править код. Покумекаю. Если что - вернусь к вам. Сколько Вы возьмете за правку кода?
0
Dina, написал вам на email.
0
Я правильно понял, использование альтернативного макета позволяет оформлять разное стилевое оформление, например color для одной и той же иконки без правки общего для всего иконошрифта стиля?
Например, если мне нужно чтобы в верхнем меню иконка домика была красная, а в нижнем белая, но при этом общий стиль у всех других синий. Достаточно назначить разные CSS-классы иконок и получить желаемое оформление?
0
Александр, нет. Для различного стилевого оформления достаточно использовать суффикс класса модуля. На сайте есть статья по его использованию. Можете почитать. Альтернативный макет - это изменение в структуре модуля, т.е изменения самого макета модуля, верстки, функционала. Можно применять его и для изменения стилевого оформления, но это не совсем корректно, поскольку избыточно. Получается из пушки по воробьям.
0
Добрый день! Очень полезные статьи и сайт!
Один вопрос, с которым пока не могу разобраться: почему-то не отображаются фотографии в материалах (шаблон создан по вашим урокам с помощью Bootstrap).
Буду признателен за подсказку.
0
Михаил, если это возможно, покажите сайт, где наблюдается проблема.
0
Планируете статью о шаблонах Joomla 4? Или разбор файла index.php стандартного шаблона ( что за что отвечает).
0
Сергей, пока нет. По той простой причине, что там особенно ничего и не изменилось в шаблоне. Есть некоторые отличия, но если вы ориентируетесь в шаблоне Joomla 3, то можете открыть стандартный шаблон Joomla 4 и посмотреть их. Также рекомендуется подключать файлы скриптов и стилей через веб-ассеты, но и старые способы подключения будут работать.