Все шаблоны wordpress состоят из нескольких файлов, которые отвечают за обработку и вывод той или иной части блога – шапка, основной контент, сайдбар и футер. Сегодня мы поговорим о последнем. Футер (подвал сайта) – это его нижняя часть со всем содержимым. Наиболее часто он используется веб-мастером для представления такой информации как дата создания, защита авторских прав, название и т.п. Но, не во всех темах wordpress реализовать это легко, некоторые просто не имею простых опций добавления информации в футер.
Что размещать в футере сайта?
Для начала давайте определимся, какому типу сайта, что можно размещать в подвале для улучшения поведенческих факторов.
Контактная информация больше всего подходит для веб-магазинов. Размещение в подвале адреса карты проезда, телефона, адреса почты магазина или организации и т.п., позволяет человеку быстрее совершить заказ или покупку.
Навигация или повторение блока навигации подойдет, для любого вида сайтов. Это весьма актуально для длинных страниц. В этом случае пользователю не придется возвращаться наверх, чтобы зайти в нужный раздел. Но если вы не хотите располагать в футере блок навигации, то быстрое возвращение наверх можно реализовать при по стрелки вверх.
Социальные закладки, если контент вашего сайта предполагает массовое обсуждение, либо вы выкладываете обзоры событий, причисляющихся к развитию темы, то в подвале можно расположить ссылки на социальные сети в которых вы продвигаете ресурс. Облако тегов также как и дополнительный блок навигации подойдет всем видам сайтов. Расположение в футере 3D облака тегов, это будет не только удобно пользователям, но и красиво с стороны дизайна.
Необходимо обратить внимание, что шанс перехода по ссылкам футера, если он не является красивым и информативным близится к нулю по причине неприметности подобного подвала.
Примеры красиво оформленных подвалов сайта
Для того чтобы создать красивый и информативный футер предлагаем вашему вниманию наиболее известные работы дизайнерских веб-студий:
1. Дизайнерское решение Французской веб-студия KDIGIT:
2. Оформление футера дизайнерской веб-студии SNOWDEN industries:
3. Дизайнерское решение в оформлении футера шведской компании Uforia CMS:
4. Изящное оформление футера компании Tapbots:
5. Футер дизайнерской веб-студии Ready made designs:
6. Оформление футера компании Mecannical:
7. Красивое оформление футера:
Как вы надеюсь уже поняли все эти футеры реализованы на основе красивых фоновых изображений и размещенных на них блоков информации. Если с созданием фонового изображения у вас не должно возникнуть особых трудностей, благо для этого есть различные редакторы изображений на подобии фотошопа, то с быстрым и удобным размещением в блоках информации возможно.
Добавление в футер блоков информации
Самым простым способом добавления в футер блоков информации будет добавление в админку вордпресс, блока виджетов подвала. Для создания, такого блока виджетов необходимо открыть админ меню—>редактор и в колонке справа, выбрать файл functions.php, в котором добавляем код:
1
2
3
4
5
6
7
|
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 добавляем следующий код:
1
2
3
4
5
|
<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.
Актуальная версия справочника CSS теперь находится на сайте WebReference.ru.
Статья взята из открытых источников: http://goldserfer.ru/delaem-krasivyj-futer-sajta/