RSS-лента

Лучшие CMS интернета бесплатно для создания сайта

Мар
2

Делаем красивый футер сайта

Все шаблоны wordpress состоят из нескольких файлов, которые отвечают за обработку и вывод той или иной части блога – шапка, основной контент, сайдбар и футер. Сегодня мы поговорим о последнем. Футер (подвал сайта) – это его нижняя часть со всем содержимым. Наиболее часто он используется веб-мастером для представления такой информации как  дата создания, защита авторских прав, название и т.п. Но, не во всех темах wordpress реализовать это легко, некоторые просто не имею простых опций добавления информации в футер.

Что размещать в футере сайта?

Для начала давайте определимся, какому типу сайта, что можно размещать в подвале  для улучшения поведенческих факторов.

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

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

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

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

Примеры красиво оформленных подвалов сайта

Для того чтобы создать красивый и информативный футер предлагаем вашему вниманию наиболее известные работы дизайнерских веб-студий:

1. Дизайнерское решение Французской веб-студия KDIGIT:

Посмотреть сайт 

2. Оформление футера дизайнерской веб-студии SNOWDEN industries:

Посмотреть сайт

3. Дизайнерское решение в оформлении футера шведской компании  Uforia CMS:

Посмотреть сайт

4. Изящное оформление футера компании Tapbots:

 

Посмотреть сайт

5. Футер дизайнерской веб-студии Ready made designs:

 

Посмотреть сайт

6. Оформление футера компании Mecannical:

Посмотреть сайт

7. Красивое оформление футера:

Посмотреть сайт

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

Добавление в футер блоков информации

Самым простым способом добавления в футер блоков информации будет добавление в админку вордпресс, блока виджетов подвала. Для создания, такого блока виджетов необходимо открыть админ меню—>редактор и в колонке справа, выбрать файл functions.php, в котором добавляем код:

if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Footer Sidebar',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<div>',
'after_title' => '</div>', ));

Это код регистрации нового блока виджетов в админке, где ‘name’ — задается имя виджета,  ‘before_widget’ — отображаемый HTML код до виджета, и ‘after_widget’ — отображаемый HTML код после виджета , а также код до и после заголовка title. Добавляется он как правило в самое начало файла functions.php.

Сохраняете содержимое functions.php и заходим в раздел «Виджеты». Если все было сделано без ошибок, то вы найдете там новый блок:

новый блок виджетов

Итак, в админ меню отображение нового блока виджетов мы сделали, теперь нам нужно вывести виджеты этого блока на сайте. Для этого открываем админ меню —>редактор и справа выбираем файл footer.php, кстати такие блоки виджетов, можно выводить не только в футере, но и в любом другом месте сайта.

 В файле footer.php добавляем следующий код:

<div class="footer-sidebar">
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar("Footer Sidebar") ) : ?>
<?php endif; ?>
</div>

Размещаем этот код после строк <div id=»footer»>, то есть после кода подключения футера к сайту. Для визуального оформления виджетов подвала (места расположения в футере, задания цвета отображения ссылок, вывода фонового изображения и.т.д), можно описать только что созданный нами класс #footer-sidebar в файле styly.css Для описания стилей виджетов, можете воспользоваться мощным ресурсом посвященного CSS и HTML — HtmlBook.

Получай первым обновления блога!

Введите Ваш e-mail:


Комментарии (15) на “Делаем красивый футер сайта”

  • Анна РУблева (1 коммент.) 3 Март 2013 в 12:01

    Добавить виджет в подвал — дело пары минут, максимум. А вот такое красивое, интерактивное, графическое оформление — вопрос, совершенно не знакомый. Как можно добавить фоновое изображение в футер на WordPress??

    • CMSONY
      CMSONY (172 коммент.) 3 Март 2013 в 15:07

      Это не составляет большого труда открываем файл style.css и оформляем сам футер. Фон футера задается свойством стиля
      background: к примеру вот как у меня описан футер:

      #footer
      {
      border-bottom:6px solid #282828;
      background:#000 url(images/footer_paint2.jpg) 0 0 repeat-x;
      padding:20px;
      width:920px;
      margin: 0 auto;
      color:#666;
      position:relative;
      font-size:12px;
      min-height:190px;
      padding-bottom: 80px;
      font-family: ‘Times New Roman’, Georgia, Helvetica, sans-serif;
      }

      За что отвечает каждое из свойств стиля можете посмотреть на HtmlBook.

  • Владимир (5 коммент.) 5 Март 2013 в 13:03

    Статья полезная, но вот если в футере уже есть ссылки разработчика то ставь дополнительные сайтбары — не ставь…. Без правки кода тут не обойтись.
    И то, если понятно какой именно файл править Зачастую ссылка торчит в футере а правятся функции.

    • CMSONY
      CMSONY (172 коммент.) 5 Март 2013 в 14:29

      Спасибо. Конечно, если есть в футере сторонние ссылки их нужно удалять, или хотя бы обернуть в тег nofollow…Да, иногда бывает так, что приходится править функции.

  • Анатолий (2 коммент.) 3 Июнь 2013 в 23:41

    Идея понравилась. Непременно использую.

  • Alex (4 коммент.) 8 Июнь 2013 в 14:20

    Отличная подборка. Жалко что примеров мало. Но всё равно спасибо огромное.

    • CMSONY
      CMSONY (172 коммент.) 13 Октябрь 2013 в 12:50

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

  • Максим (8 коммент.) 11 Июнь 2013 в 22:07

    А как разбить виджеты на колонки? Они идут сверху вниз?…

    • CMSONY
      CMSONY (172 коммент.) 12 Июнь 2013 в 8:44

      Я это писал, для каждого блока div использовать свой CSS стиль оформления.

  • Антон (5 коммент.) 20 Февраль 2014 в 19:37

    Добавил код,и у меня побелел экран.что мне делать?

    • CMSONY
      CMSONY (172 коммент.) 21 Февраль 2014 в 13:58

      У вас видимо возникли проблемы с файлом functions.php. Сделайте откат этого файла, а потом повторите процедуру… Как правило основные ошибки файла functions.php — лишние пробелы, удалите их.

  • Максим (8 коммент.) 27 Апрель 2014 в 19:59

    Статья очень полезная :)

  • Илья (5 коммент.) 2 Июнь 2015 в 17:15

    Полезная информация, спасибо! Меню в футере сайта — это очень важная часть, которой не стоит пренебрегать.

  • Михаил (2 коммент.) 24 Январь 2016 в 10:43

    Подскажите как настроить шрифт в футере, в одной из колонок у меня дублируются свежие записи с сайта, но они показаны в футере с оригинальным размером внутри самой статьи(размер шрифта в футере 14px, а в статье 20px), подскажите что дописать и где, что бы в футере отображались свежие записи, но с шрифтом так же как и в целом в нем без изменений в самих статьях??

    • CMSONY
      CMSONY (172 коммент.) 24 Январь 2016 в 11:11

      Вам нужно смотреть файл стилей оформления style.css В нем должно быть описание класса оформления футера.

Оставить комментарий


вверх