Сайт для художника. Разный span у колонок на разных страницах в Joomla 3.8

: Опубликовано: 04 октября 2018

Не так давно, а именно сегодня утром передо мной встала задача присвоения колонкам на разных страницах сайта, созданного в CMS Joomla 3.8, разной ширины, т.е. уникальных значений span (в терминах фреймворка Bootstrap 2). Стандартными настройками в самой CMS, к сожалению, ничего не поделать, так как размеры колонок жёстко фиксированы в коде. Беглый поиск решения в сети тоже не дал результатов. Поэтому пришлось придумывать свой оригинальный способ решения проблемы о котором вы можете узнать из этой статьи!

Думаю, для вас не будет сюрпризом узнать, что система управления контентом сайта (Content Management System, CMS) Joomla 3.8, как прочем и предыдущие и будущие её версии, используют для своей адаптивной к различной ширине экрана разметки фреймворк Bootstrap. В свою очередь одним из основных достоинств этого фреймворка является использование сетки (Grid) для выравнивания и разделения контента на страничке сайта. Основным элементом сетки выступает параметр span, показывающий сколько частей из 12 использовать под конкретную колонку. Более подробно о сетке и её использовании можно почитать в прекрасной документации по ссылке. Joomla использует сетку таким образом, что на всех страницах она одинакова для конкретного шаблона. Например для стандартного шаблона Protostar параметры span при отображении обеих панелек слева и справа имеют значения - "span3 - span6 - span3". Другими словами под левую панельку отводится 3 части страницы, под основной контент 6, а под правую панельку - 3. Также наглядно это можно отобразить следующей схемкой:

Проблема заключается в том, что подобная сетка сохраняется для всех страниц сайта и стандартными настройками Joomla никак не поменять сетку! По крайней мере я не нашёл нигде описания, как это можно было бы сделать. Моя задача, например заключалась в том, чтобы на главной странице сайта была сетка "span4 - span4 - span4", а для всех остальных "span3 - span6 - span3". Вот, как это можно сделать:

1) Открываем редактор кода, встроенный в Joomla по следующему пути: Расширения -> Менеджер шаблонов -> Templates. Затем выбираем шаблон, который используется в настоящее время. В открывшимся редакторе слева будет отображаться список папок и файлов Joomla.

2) Открываем для редактирования файл index.php, просто кликнув на него мышкой.

3) В начале файла, после определения span основного контента добавляем следующий php код:

// Adjusting content width
...
//On main page I will use my own bootstrap span!!!
//default spans for position-7 (sidebar) and for position-8 (aside):
$spanSidebar = "span3";
$spanAside = "span3";
if (JFactory::getURI()->toString() == "http://www.juvusart.com/ru/") {
$span = "span4"; //span for content
$spanSidebar = "span4";
$spanAside = "span4";
}

Здесь вначале по умолчанию панелькам слева и справа присваивается span3, а вот затем код проверяет открыта ли сейчас главная страница или нет. Если страница действительно главная, то метод JFactory::getURI()->toString() вернёт URL главной страницы. Если сравнение со строкой (тут надо вставить URL главной страницы вашего сайта) прошло успешно, то меняем значения span для элементов так, как мы хотим! Я, например захотел, чтобы вся страница была бы разделена на 3 колонки и каждая шириной по span4.

4) Затем уже в разделе <body> меняем кусок кода следующим образом. Те места, которые следует изменить помечены жирным шрифтом.

<div class="row-fluid">
<?php if ($this->countModules('position-8')) : ?>

<div id="sidebar" class="<?php echo $spanSidebar; ?>">
<jdoc:include type="modules" name="position-8" style="well" />
</div>

<?php endif; ?>

<main id="content" role="main" class="<?php echo $span; ?>">
...
</main>

<?php if ($this->countModules('position-7')) : ?>
<div id="aside" class="<?php echo $spanAside; ?>">

<jdoc:include type="modules" name="position-7" style="well" />

</div>
<?php endif; ?>
</div>

Тут видно, что панельке sidebar (та, что отображается слева) и панельке aside (та, что отображается справа) присваиваются определённые нами ранее значения span.

5) Сохраняем изменения и при необходимости удаляем кэш из Joomla по следующему пути: Система -> Очистить весь кэш -> Delete all. После этого можно обновить страничку с сайтом и наблюдать сделанные нами изменения.

После всех изменений главная страница сайта будет отличаться от других страниц своей собственной разметкой сетки! Надеюсь материал этой статьи был для вас полезным! До встречи!)