Как можно проще всего вывести информацию на сайт – использовать виджеты. Обычно виджеты WordPress применяются в сайдбаре для вывода последних комментарий, новых публикаций и т.д. Но также в некоторых темах есть виджеты в подвале сайта (footer), что делает тему более функциональной. Footer WordPress является дополнительным местом для размещения полезной информации такой как, контактные данные, копирайт, кнопки социальных сетей и многое другое.
Если вашей теме отсутствует добавления виджета в footer WordPress, то это легко исправить путем редактирования трех файлов. После чего в админ-панели во вкладках «Внешний вид-Виджеты» появится возможность добавить ту или иную информацию, которая будет отображаться в footer WordPress.
Конструкция виджета состоит из трех колонок размещенных по центру футера. На вид выглядит корректно и сохраняет дизайн сайта. Но в случае некорректного вида можно исправить с помощью стилей, указав меньше-больше ширину, высоту, отступы и т.д.
Как добавить виджет в футер WordPress?
1. Откройте файл footer.php и в начале файла после основного блока <div id="footer"> добавляем следующий код.
<div id="footer-widgets">
<div id="footer1">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('footer-1') ) : ?>
<?php endif; ?>
</div>
<div id="footer2">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('footer-2') ) : ?>
<?php endif; ?>
</div>
<div id="footer3">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('footer-3') ) : ?>
<?php endif; ?>
</div>
</div>
<div style="clear-both"></div>
2. Находим в теме файл functions.php — редактируем его, вставляя код в конце перед знаком ?>.
register_sidebar(array(
'name' => 'Footer Widget 1',
'id' => 'footer-1',
'description' => 'Первая область',
'before_widget' => '<div id="footer1">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
register_sidebar(array(
'name' => 'Footer Widget 2',
'id' => 'footer-2',
'description' => 'Вторая область',
'before_widget' => '<div id="footer2">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
register_sidebar(array(
'name' => 'Footer Widget 3',
'id' => 'footer-3',
'description' => 'Третья область',
'before_widget' => '<div id="footer3">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
3. Осталось добавить стили, откройте файл style.css и прописываем где-нибудь в конце стили.
#footer-widgets {
display: block;
width:950px;
height: 215px;
margin: 0 auto;
}
#footer1 {
width: 260px;
float: left;
margin: 15px 10px 10px 30px;
padding: 10px;
}
#footer2 {
width: 260px;
float: left;
margin: 15px 10px 10px 15px;
padding: 10px;
}
#footer3 {
width: 260px;
float: left;
margin: 15px 10px 10px 15px;
padding: 10px;
}
Теперь переходим, как было сказано выше, во вкладку «Внешний вид-Виджеты» и у вас появилось три новых виджета.
Добавляем в них стандартным путем информацию, сохраняем и смотрим результат.
Результат.
Этот способ был проверен на нескольких темах, работает отлично без замечаний. Не оставляйте свой футер пустым — наполняйте информацией.
Источник: www.wpsquare.com/add-3-column-footer-wordpress-theme/
Я так понимаю стили прописаны для статичного шаблона? Просто у меня адаптивный шаблон.
Да, стили не включают в себя адаптив, но если вы знакомы с css, то там 5 минут дела.
добрый день.
при попытке сохранить код в functions.php выкидывает на страницу 403.
подскажите, что делать?
Добрый. Вы в самый низ добавляли перед знаком
?>Добавил статью в закладку, так как я скоро собираюсь поменять тему на ту, в которой нет виджетов в футере. Но я предоставленную вами информацию проверил на тестовом сайте и у меня все получилось. Спасибо за подробное описание, реально помогли.
Алексей, Добрый день
Спасибо за отзыв! и не за что!
Здравствуйте! Все получилось с первого раза, спасибо! У Вас в примере Архивы, Страницы и Категории оранжевые. Это от цвета шаблона зависит или можно изменить как-то? Спасибо!
Vladislav, Здравствуйте! В принципе да, но можно самому менять цвет. Пример
#footer-widgets h2 { color: #FD6524; }WordSmall, получилось, но не совсем то, что нужно. Третий виджет переместился во второй ряд. Можно его поправить, чтобы снова все виджеты были в один ряд?
Vladislav, В смысле переместился? То есть зоголовок виджета? Тогда можно уменьшить размер шрифта. Или нарушилась вся конструкция? Если есть возможность, покажите скриншот или дайте ссылку на сайт.
WordSmall, немного перепутал, один виджет остается, а два смещаются и таким образом нарушается конструкция. Хочу сменить заголовки виджетов с серого на белый. Сайт karl-marks.ru
Vladislav, по всей видемости у вас отсутствуют стили к первому виджету
#footer1. Изменить цвет заголовка, выше я показывал пример,#footer-widgets h2 { color: #fff; }не проще ли плагин поставить? Плагин BNS Add Widget
Ну не всегда же плагины ставить.
автор красавец, все быстро и четко, код валидный, поставил за 5 мин, чуть доработал стили под себя и все зер гуд. Спасибо, не даром по запросу «добавить 3 виджета в футер wordpress» стоит на первом месте
Спасибо за отзыв! Да, там чуток не мешало бы под редактировать стили. Особенно, заменить пиксели на проценты.
WordSmall, вы выше отписались про адаптивность и что для этого надо еще что-то внести в таблицу стилей. А вот что именно?
Там минимум изменений. Выше говорил про проценты, так как там заданы пиксели и определенная высова — вот это нужно изменять. Мелкая корректность.)
WordSmall, такой вопрос: а если мне в футере не три виджета нужны, а два, то как тогда код будет выглядеть?
Точно так же, только убираем третий виджет из подключения и стилей. И пиксели лучше заменить на проценты.
Здравствуйте! Все строчки во всех виджетах выстраиваются в один столбец. Можете подсказать, как это исправить?
Здравствуйте. Смотрите в исходном коде, что и почему мешает. В каждой теме могут быть свои проблемы.
Спасибо все отлично работает! А есть материал как стили править для адаптивного шаблона (на мобильные)?
В медиа-запросе просто пропишите нужные стили: убрать обтекание, задать 100% ширину
Добрый день!
Сделал все по инструкции, попробовал изменения в соответствии с комментариями, но все равно виджеты не в столбик располагаются, а друг под другом. Подскажите, что можно поправить и где?
Тема merlin
Здравствуйте! Дайте ссылку на сайт, посмотрю из-за чего...
WordSmall, Доброго времени!
Полезные материалы, но проблема так и осталась с расположением виджетов в столбик, а не один ряд.
Прочёл коментарии, пробовал и проценты и пиксели выставлять но ничего не вышло тема Iconic One.
Даже стандартные стили не подгружает.
Добрый день. Нужно посмотреть, что в исходном коде. Скиньте ссылку на сайт. (извиняюсь за опоздалый ответ, был в отъезде)