Простой html код подвала для wordpress из трех колон. Более подробное описание создания красивого подвала для блога.

Footer для Wordpress

Красивый подвал (footer) для сайта на WordPress


27.07.2013 | Создание блога | Теги: комментариев 8 | 14227 просмотров | Автор статьи: Александр Рус


Всем доброго времени суток! В этом посте я Вам расскажу, как сделать красивый подвал для сайта.

Большинство блогеров, наверное, как и я стараются использовать бесплатные методы при  создании и раскрутки своего блога.  Одним из элементов этого является визуальное оформление, которое играет одну из важных ролей на вашем блоге, показывает серьезность проекта и опыт webmastera. Поэтому этой детали  стоит уделить определенное количество времени. Всем наверное известно, что для движка wordpress уже создано сотни тем, которые можно с легкостью скачать и установить через админ панель вашего сайта за считанные минуты.

Есть темы как бесплатные, так и платные. Большей популярностью конечно пользуются бесплатные темы, объяснять не буду почему :smile:. Но порой хорошую бесплатную тему очень сложно найти, ну а если удается, то со временем, находим в ней различные недостатки или не доработки.

Одним из элементов, который предаст вашему блогу некую частичку нечто большего, является красивый подвал, ну или другими словами, как все привыкли его называть — это footer.

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

Мой блог не исключение. Как и большинство блогеров, изначально я установил на него бесплатную самую простую тему. За дизайном я  не гонюсь, а надо бы :smile:. Ну как и ожидалось, я столкнулся со множеством проблем, решить которые помогли разные плагины и знание web-программирования.

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

Для создания footer больших знаний программирования не понадобиться. Делается все довольно просто.

Итак, я опишу довольно простой способ, как сделать красивый подвал для своего блога.

Как сделать простой подвал для блога?

Следующий код ниже создает подвал (footer), который состоит из 3 столбцов визуально разделенных между собой.

Вот так будет выглядеть наш подвал:

Подвал для блога

myworkpro.ru

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div style=»width: 100%; height: 195px; background: #99958c; color: #fff;»>
<div style=»float: left; width: 33%; height: 100%; border-right: 1px solid #fff; text-align: center;» >
ПОПУЛЯРНЫЕ СТАТЬИ:
<ul style=»text-align: left;»>
<li><a href=»ваша ссылка на статью»>Название вашей статьи.</a></li>
<li><a href=»ваша ссылка на статью»>Название вашей статьи.</a></li>
<li><a href=»ваша ссылка на статью»>Название вашей статьи.</a></li>
<li><a href=»ваша ссылка на статью»>Название вашей статьи.</a></li>
<li><a href=»ваша ссылка на статью»>Название вашей статьи.</a></li>
<li><a href=»ваша ссылка на статью»>Название вашей статьи.</a></li>
<li><a href=»ваша ссылка на статью»>Название вашей статьи.</a></li>
</ul>
</div>
<div style=»float: left; width: 33%; height: 100%; text-align: center;»>
<p>Copyright © 2013. Все права защищены.<br />
Разрешается републикация материалов сайта с обязательным указанием ссылки cледующего содержания:<br /> http://www.myworkpro.ru/ — Авто-кликом по РуНету.</p> </div>
<div style=»float: left; width: 33%; height: 100%; border-left: 1px solid #fff; text-align: center;»>
СТАТИСТИКА:
<br>
Здесь у меня расположен код счетчика
<br>
Здесь у меня расположен код счетчика
<br>
Здесь у меня расположен код счетчика
</div>
</div>

Теперь давайте разберемся, как это работает.

Для начала я сделал бокс с фоновым изображением в который затем поместил три информационных бокса:

1
&lt;div style="width: 100%; height: 195px; background: #99958c; color: #fff;"&gt;

Здесь мы задаем ширину в процентах width: 100%; чтобы у нас и получился эффект резинового подвала, далее фиксированная высота height: 195px; равная высоте фонового рисунка, подгружаем сам фоновый рисунок background: url(bg.png); если же нет фонового рисунка просто указывает цвет фона. Цвет фона подвала необходимо изменить значение атрибута background в первой строчке кода. К примеру у меня указан серый цвет фона #99958c.   Вот так это будет выглядеть background: #99958c .

За цвет текста отвечает параметр color.

Затем делаем первый информационный бокс:

1
2
3
4
5
6
7
8
9
10
11
<div style=»float: left; width: 33%; height: 100%; border-right: 1px solid #fff; text-align: center;» >
ПОПУЛЯРНЫЕ СТАТЬИ:<ul style=»text-align: left;»>
<li><a href=»ваша ссылка на статью»>Название вашей статьи.</a></li>
<li><a href=»ваша ссылка на статью»>Название вашей статьи.</a></li>
<li><a href=»ваша ссылка на статью»>Название вашей статьи.</a></li>
<li><a href=»ваша ссылка на статью»>Название вашей статьи.</a></li>
<li><a href=»ваша ссылка на статью»>Название вашей статьи.</a></li>
<li><a href=»ваша ссылка на статью»>Название вашей статьи.</a></li>
<li><a href=»ваша ссылка на статью»>Название вашей статьи.</a></li>
</ul>
</div>

Итак, здесь я в первую очередь задал выравнивание бокса по левому краю float: left; затем задал ширину так же в процентах width: 33%; и так же высоту height: 100%. Далее я создал белую черту по правому краю border-right: 1px solid #fff; шириной 1 пиксель и белым цветом, для визуального разделения блоков и последнее, сделал выравнивание текста в боксе по центру text-align: center;. Ну и поместил туда обычный список с популярными статьями.

Теперь создаем второй информационный бокс:

1
2
3
<div style=»float: left; width: 33%; height: 100%; text-align: center;»>
<p>Copyright © 2013. Все права защищены.<br />
Разрешается републикация материалов сайта с обязательным указанием ссылки cледующего содержания:<br /> http://www.myworkpro.ru/ — Авто-кликом по РуНету.</p> </div>

Думаю понятно что к чему.

Ну и наконец создаем последний 3 блок:

1
2
3
4
5
6
7
8
9
10
11
<div style=»float: left; width: 33%; height: 100%; border-right: 1px solid #fff; text-align: center;» >
ПОПУЛЯРНЫЕ СТАТЬИ:<ul style=»text-align: left;»>
<li><a href=»ваша ссылка на статью»>Название вашей статьи.</a></li>
<li><a href=»ваша ссылка на статью»>Название вашей статьи.</a></li>
<li><a href=»ваша ссылка на статью»>Название вашей статьи.</a></li>
<li><a href=»ваша ссылка на статью»>Название вашей статьи.</a></li>
<li><a href=»ваша ссылка на статью»>Название вашей статьи.</a></li>
<li><a href=»ваша ссылка на статью»>Название вашей статьи.</a></li>
<li><a href=»ваша ссылка на статью»>Название вашей статьи.</a></li>
</ul>
</div>

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

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

И на по следок, интересное видео 🙂

Материалы по теме:

Что такое CMS, а так же правила ее выбора
Сейчас мы разберемся с вопросом: "Что такое CMS?". На самом деле тут все просто, CMS расшифровывается как "Content Management Software" ("программное обеспечение для управления ...
Как разместить флэш-баннер на сайте
Флэш-баннер установить на свой сайт достаточно просто – он ставится так же, как и простой графический баннер. Требуется выполнить пару несложных действий, с которыми ...
Настройка URL-адреса на платформе WordPress
Прогрессивное продвижение сайта невозможно без правильной настройки URL-адреса и работы с файлом .htaccess. Ниже вы найдете базовые рекомендации по этим двум аспектам. Посещаемость интернет-сайтов во ...
Как закрыть ссылки от индексации в комментариях WordPress.
Всем доброго дня! Недавно, как то зашел в гости к Александру Каратаеву, на его блоге меня заинтересовала информация о новых методах закрытия ссылок от ...
Плагин de: comment: адаптивная форма комментариев.
Плюсы плагина Регистрация на сайте Настройки de:comments Партнерская программа. Всем привет! Сегодня я расскажу про один из лучших плагинов, который заменяет стандартную форму комментариев ...

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

1
Александр

Всё бы хорошо, только вы забыли написать код стилей для этого подвала.

Автор2
Александр Рус (участник БКС) http://myworkpro.ru/

Пост писал давно. Сейчас его просмотрел, стили есть в коде. Да и вообще эта тема уже неактуально. Сейчас есть множество бесплатных шаблонов типа Hueman, в которых очень красиво сделан подвал. http://myworkpro.ru/besplatnaya-tema-hueman-dlya-wordpress/

3
Андрей

Здравствуйте.

Подскажите пожалуйста, как мне сделать сайт объявлений на вордпресс. Нужно чтобы можно было настроить поддомены для регионов. (чтобы присвоить в яндексе регион). Вот нашел одну доску объявлений http://moskva.biglus.com/ с регионами, подскажите какой шаблон или плагин тут используется, нужно именно, чтобы поддомены работали как в указанном сайте. Я находил плагин для создания поддоменов, но там только для категорий, тоесть из категорий создаются поддомены, а мне так не нужно.

Автор4
Александр Рус (участник БКС) http://myworkpro.ru/

Извините, мне не приходилось сталкиваться с таким. Попробуйте спросить на форуме у участников БКС, может они помогут.

5
Дмитрий http://правовой-центр-гарантия.рф/

А куда в админке Word Press вставить этот код ??

Автор6
Александр Рус http://myworkpro.ru/

Footer.php файл. Там пробуй, редактируй, экспериментируй.

7
Людмила http://domashni-yut.ru

Здравствуйте, спасибо за полезный код. Только у меня всё в один столбик получилось. А как сделать в три колонки? Подскажите пожалуйста 🙄

Автор8
Александр Рус (участник БКС) http://myworkpro.ru/

Я же именно про это все в статье написал. А так советую поменять шаблон блогу, в котором сразу будут 3 виджета в подвале сайта.

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

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.