Как можно проще всего вывести информацию на сайт – использовать виджеты. Обычно виджеты WordPress применяются в сайдбаре для вывода последних комментарий, новых публикаций и т.д. Но также в некоторых темах есть виджеты в подвале сайта (footer), что делает тему более функциональной. Footer WordPress является дополнительным местом для размещения полезной информации такой как, контактные данные, копирайт, кнопки социальных сетей и многое другое.
Если вашей теме отсутствует добавления виджета в footer WordPress, то это легко исправить путем редактирования трех файлов. После чего в админ-панели во вкладках «Внешний вид-Виджеты» появится возможность добавить ту или иную информацию, которая будет отображаться в footer WordPress.
Конструкция виджета состоит из трех колонок размещенных по центру футера. На вид выглядит корректно и сохраняет дизайн сайта. Но в случае некорректного вида можно исправить с помощью стилей, указав меньше-больше ширину, высоту, отступы и т.д.
Как добавить виджет в футер WordPress?
1. Откройте файл footer.php и в начале файла после основного блока <div id="footer">
добавляем следующий код.
<div id="footer-widgets"> <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('footer-1') ) : ?> <?php endif; ?> <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('footer-2') ) : ?> <?php endif; ?> <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('footer-3') ) : ?> <?php endif; ?> </div> <div style="clear-both"></div>
2. Находим в теме файл functions.php — редактируем его, вставляя код в конце перед знаком ?>
.
register_sidebar(array( 'name' => 'Footer Widget 1', 'id' => 'footer-1', 'description' => 'Первая область', 'before_widget' => '<div class="wsfooterwdget">', 'after_widget' => '</div>', 'before_title' => '<h2>', 'after_title' => '</h2>', )); register_sidebar(array( 'name' => 'Footer Widget 2', 'id' => 'footer-2', 'description' => 'Вторая область', 'before_widget' => '<div class="wsfooterwdget">', 'after_widget' => '</div>', 'before_title' => '<h2>', 'after_title' => '</h2>', )); register_sidebar(array( 'name' => 'Footer Widget 3', 'id' => 'footer-3', 'description' => 'Третья область', 'before_widget' => '<div class="wsfooterwdget">', 'after_widget' => '</div>', 'before_title' => '<h2>', 'after_title' => '</h2>', ));
3. Осталось добавить стили, откройте файл style.css и прописываем где-нибудь в конце стили.
#footer-widgets { width: 100%; max-width: 1100px; margin: 10px auto; overflow: hidden; } #footer-widgets .wsfooterwdget { padding: 15px; padding-bottom: 5px; width: 32%; float: left; overflow: hidden; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; } #footer-widgets .wsfooterwdget:nth-child(2){ margin-left: 2%; margin-right: 2%; } @media screen and (max-width: 967px) { #footer-widgets .wsfooterwdget { width: 45%; margin-bottom:3%;} } @media screen and (max-width: 890px) { #footer-widgets .wsfooterwdget { width:100%;} #footer-widgets .wsfooterwdget:nth-child(2){ margin-left: 0; margin-right: 0; } }
Теперь переходим, как было сказано выше, во вкладку «Внешний вид-Виджеты» и у вас появилось три новых виджета.
Добавляем в них стандартным путем информацию, сохраняем и смотрим результат.
Результат.
Этот способ был проверен на нескольких темах, работает отлично без замечаний. Не оставляйте свой футер пустым — наполняйте информацией.
Источник: www.wpsquare.com/add-3-column-footer-wordpress-theme/
Здравствуйте!
Судя по комментариям у меня распространенная проблема: виджеты располагаются вертикально а не горизонтально. Подскажите пожалуйста что поправить?
День добрый. Нужно смотреть исходный код, что с чем конфликтует.
Константин, Код обновлен. Скопируйте сначала.
WordSmall, Обновил код, блоки по прежнему отображаются вертикально. Можете глянуть исходный код?
Кэш браузера почистите.
WordSmall, Не помогло.
В windows 10 не помогло
Операционная система вообще имеет значения. Что именно не помогло?
Отличная инструкция, сделал за пару минут и всё сразу заработало. Спасибо!
На теме Poseidon (в дочерней) стили в файле CSS не заработали. Только через админку в разделе «дополнительные стили».
Подскажите как изменить фон у футера на отличный от белого?
Ну дело не в стилях, а в самой теме. И правильно ли была создана дочерняя тема. Цвет футера в вашей теме меняется в этом классе
.footer-wrap { border-top: 1px solid rgba(0,0,0,0.12); background: #fff; }