Сложность урока: Средний
Редактируем стандартный шаблон и создаем футер для сайта на Joomla 3

Мы начинаем пятый урок посвященный редактированию шаблонов в CMS Joomla 3, на этот раз мы поговорим о футере для сайта. Разберем возможные варианты оформления футера и некоторые подходы к его созданию.

Что такое футер

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

Стандартный футер для сайта в шаблоне Protostar

Стандартное содержание футера такое – текущий год, имя сайта и ссылка «Наверх» ведущая в начало страницы. Если честно такой вариант футера совершенно бесполезен посетителям нашего сайта, кроме того ссылка «Наверх» в нашем случае абсолютно не нужна, мы для этих целей уже сделали красивую кнопку.

Поэтому для начала предлагаю избавиться от стандартного содержимого футера. Открываем файл index.php стандартного шаблона Protostar и ищем код, который отвечает за вывод футера. За вывод футера отвечает код между строками 205 и 219, который выглядит следующим образом (в зависимости от версии Joomla и внесенных изменений в индексный файл строки кода могут отличаться):

<!-- Footer -->
<footer class="footer" role="contentinfo">
 <div class="container<?php echo ($params->get('fluidContainer') ? '-fluid' : ''); ?>">
  <hr />
  <jdoc:include type="modules" name="footer" style="none" />
  <p class="pull-right">
   <a href="#top" id="back-top">
    <?php echo JText::_('TPL_PROTOSTAR_BACKTOTOP'); ?>
   </a>
  </p>
  <p>
   &copy; <?php echo date('Y'); ?> <?php echo $sitename; ?>
  </p>
 </div>
</footer>

А теперь удалим лишний код с 210 по 217 строку, в результате код для футера будет таким:

<!-- Footer -->
<footer class="footer" role="contentinfo">
 <div class="container<?php echo ($params->get('fluidContainer') ? '-fluid' : ''); ?>">
  <hr />
  <jdoc:include type="modules" name="footer" style="none" />
 </div>
</footer>

По сути, мы удалили все что можно, оставив лишь возможность вывода модулей в футере, за это отвечает строка:

<jdoc:include type="modules" name="footer" style="none" />

Сохраняем индексный файл, переходим на сайт и обновляем страницу. Содержимое футера исчезло, этого мы и добивались. Теперь можно добавлять в футер новую информацию по своему усмотрению, но прежде чем её добавить стоит ответить на вопрос – а что может находиться в футере сайта?

Какую информацию отображать в футере сайта

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

  • Дополнительное меню – это меню может дублировать уже существующее, либо быть уникальным. Дублировать меню в футер полезно, когда на Ваш сайт часто заходят с мобильных устройств, посетитель, пролистав страницу в самый низ, может воспользоваться дополнительной навигацией по сайту.
  • Контактная информация – для продающих сайтов, либо для сайтов которые оказывают различные услуги наличие контактной информации просто необходимо, а в футере ей самое место.
  • Кнопки социальных сетей – в современном мире социальные сети для многих людей это есть все, поэтому подобная информация лишней никогда не будет.
  • Различные ссылки – например, ссылки на карту сайта, ленты новостей и т.д.
  • Виджеты – можно вывести в футер информацию отражающую активность на сайте, счетчики посещаемости, последние комментарии и т.п.
  • Реклама - наступает момент, когда хочется получить от сайта не только его наличие, но и прибыль, в этом случае футер может быть не плохим контейнером для рекламы.

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

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

Создание футера для сайта

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

  • Автоматический – подразумевает использование различных модулей для вывода определенной информации
  • Ручной – модули не используются, все изменения вносятся вручную по средствам редактирования файлов шаблона
  • Смешанный – в данном случае используются оба вышеперечисленных варианта совместно

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

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

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

Для начала создадим новые позиции для модулей в футере (как это сделать мы говорили на уроке по настройке и редактированию шаблонов) в количестве двух штук. Так как они будут располагаться в левой и правой части футера то и имя у них получилось соответствующее - footer-left и footer-right. Объявляем их в файле templateDetails.xml.

Теперь вносим изменения в индексный файл шаблона, мой код получился таким:

<div class="foot-left"><jdoc:include type="modules" name="footer-left" style="none" /></div>
 <div class="foot-center">
  <a href="/" title="Joom4all - создай свой сайт с нуля">
   <img alt="Joom4all - создание сайта от А до Я" class = "foot-img" src="<?php echo $this->baseurl . 'templates/'. $this->template . '/images/joom4all.png'?>" />
  </a>
</div>
<div class="foot-right"><jdoc:include type="modules" name="footer-right" style="none" /></div>

И для наглядности скриншот:

Добавляем новые позиции модулей в футер сайта

Как выводятся модули понятно, а вот на логотипе хочу остановиться подробнее. За вывод логотипа отвечает код:

<img alt="альтернативный текст" class = "foot-img" src="<?php echo $this->baseurl . 'templates/'. $this->template . '/images/joom4all.png'?>" />

На первый взгляд обычный HTML тег для изображения, но вместо привычного пути расположения файла написан php код. Данный код на первый взгляд может показаться сложным и непонятным, но на самом деле если его разобрать, то становится понятно, что ничего сложного в нем нет:

  • <?php – начало php кода
  • echo – отвечает за вывод строки
  • $this->baseurl – данная строка возвращает имя сайта
  • templates/ – тут мы указываем, что изображение хранится в папке templates
  • $this->template – возвращает имя текущего шаблона
  • /images/joom4all.png – путь до изображения внутри корневой папки шаблона и имя файла с изображением
  • ?> - конец php кода

В результате использования данного php кода мы получаем относительный путь до файла с изображением. Другими словами не зависимо от того какое имя будет у сайта и какой используется шаблон изображение будет взято из папки images выбранного шаблона.

Сохраняем файл index.php, теперь его можно закрыть, он нам больше не пригодится.

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

Я для примера создал новое меню с несколькими пунктами специально для футера (тем, кто забыл, как создавать меню прочитайте уроки – как создать новое меню и как создавать пункты меню):

Создаем новое меню которое разместим в футере сайта

На следующем этапе создаем модули – для меню с типом «Меню» и для текста с типом «HTML-код» (как создать модуль). В качестве позиций для них выбираем только что созданные позиции модулей:

Создаем модули в новых, только что созданных позициях модулей

Чтобы отличать наше меню для футера среди остального меню на сайте, в настройках модуля меню добавляем к нему суффикс класса «_footer»:

Добавляем суффикс класса меню к нашему меню для футера

Для того чтобы не объяснять что за модуль с типом «HTML-код» я покажу принцип его действия на скриншоте:

Модуль с типом «HTML-код» отлично подойдет для вывода информации в футер сайта

Я заполнил данный модуль определенным текстом, который будет выведен в футер, кроме обычного текста я написал небольшой php код, который отображает текущий год:

<?php echo date('Y'); ?>

Сохраняем модули и идем на сайт для проверки результата и вот что у меня получилось:

Новый, пока еще не оформленный футер для сайта Joomla

Результат хоть и есть, но не сильно впечатляет. Теперь нам необходимо более адекватно оформить элементы футера при помощи CSS.

Для начала оформим новые блоки футера:

.foot-left, .foot-center{float: left;} /*выравнивание блоков футера*/
.foot-left {width: 20%;} /*ширина левого блока*/
.foot-center {margin-left: -6px;} /*отступ центрального блока*/
.foot-right { /*правый блок*/
 float: none;
 height: 60px;
}

Следующий кандидат на оформление это меню, к которому я применил следующие стили:

ul.nav.menu_footer {margin: 0;} /*нулевые отступы у меню*/
ul.nav.menu_footer li { /*оформление текста меню*/
    font-family: 'Lobster', cursive;
    font-size: 16px;
    line-height: 18px;
}
ul.nav.menu_footer li.item-179 a { /*пункт меню Карта сайта*/
    margin-left: 15px;
    color: #fc8f30;
}
ul.nav.menu_footer li.item-180 a { /*Пункт меню О сайте*/
    color: #5aa426;
    border-top: 3px solid #5aa426;
}
ul.nav.menu_footer li.item-181 a { /*Пункт меню Контакты*/
    margin-left: 45px;
    border-bottom: 3px solid #0f70ad;
    color: #0f70ad;
}

И в завершении отделяем футер от основной части контента:

footer.footer hr {border-top: 3px solid #fc8f30;} /*отделяем футер от основного контента*/

Сохраняем файл стилей, переходим на сайт и смотрим на результат:

Окончательный вариант оформления футера для сайта Joomla

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

 
 

Добавить комментарий


Комментарии   

Павел
0 #1 Павел 17.03.2019 15:41
Отличные материалы по редактированию сайта на CMS Joomla. Я просто обалдел. Это то, что я давно искал. А кокой компонент используется для комментариев на сайте?
Цитировать
Алина
0 #2 Алина 13.10.2019 14:32
Сколько же всяких мелочей всплывает, когда дело доходит до того, чтобы сделать свой сайт…Я вот раньше даже не задумывалась о том, что тот же футер – это отдельный элемент, который надо оформлять отдельно, пока не начала искать всякую информацию о сайтах. Про футер вот у этих ребят, например, написано неплохо https://ifish2.ru/futer-sajta/. Там есть разные идеи оформления для разных нужд)
Цитировать