Как можно более проще вывести информацию на вашем сайте – использовать виджеты. Обычно виджеты WordPress применяются в сайдбаре для отображения последних комментариев, новых публикаций и прочего. Однако в некоторых темах также доступны виджеты в подвале сайта (footer), что придает теме большую функциональность. Footer WordPress представляет собой дополнительное пространство для размещения полезной информации, такой как контактные данные, копирайт, кнопки социальных сетей и многое другое.
Если вашей теме отсутствует добавления виджета в footer WordPress, это можно легко исправить. Мы всего лишь отредактируем три файла. После чего в админке во вкладках «Внешний вид — Виджеты» появится возможность добавить ту или иную информацию, которая будет отображаться в footer WordPress.
Конструкция виджета включает в себя три колонки, расположенные по центру футера. В случае необходимости коррекции внешнего вида, можно внести изменения в стили, управляя параметрами, такими как ширина, цвета, отступы и другие.
Как добавить виджет в футер WordPress?
Шаг 1. Откройте файл footer.php и вставьте следующий код в начало файла, сразу после основного блока <div id="footer">
.
<div class="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>
Шаг 2. Теперь найдите файл functions.php в вашей теме и добавьте в него следующий код:
register_sidebar(array('name'=> 'Footer Widget 1', 'id'=> 'footer-1', 'description'=> 'Виджет в подвале. Первая область', 'before_widget'=> '<div class="ws-footer-wdget">', 'after_widget'=> '</div>', 'before_title'=> '<div class="ws-footer-wdget-title">', 'after_title'=> '</div>', )); register_sidebar(array('name'=> 'Footer Widget 2', 'id'=> 'footer-2', 'description'=> 'Виджет в подвале. Вторая область', 'before_widget'=> '<div class="ws-footer-wdget">', 'after_widget'=> '</div>', 'before_title'=> '<div class="ws-footer-wdget-title">', 'after_title'=> '</div>', )); register_sidebar(array('name'=> 'Footer Widget 3', 'id'=> 'footer-3', 'description'=> 'Виджет в подвале. Третья область', 'before_widget'=> '<div class="ws-footer-wdget">', 'after_widget'=> '</div>', 'before_title'=> '<div class="ws-footer-wdget-title">', 'after_title'=> '</div>', ));
Шаг 3. Откройте файл style.css и добавьте стили в конце.
/* Стили для виджетов в подвале */ .footer-widgets { display: flex; flex-wrap: wrap; margin: 0 auto; padding: 20px 0 0 20px; } .ws-footer-wdget { width: 33.3333333333%; padding: 2rem; } .ws-footer-wdget ul { padding: 0; margin: 0; } .ws-footer-wdget ul li { list-style: none; margin-bottom: 10px; } .ws-footer-wdget-title { text-transform: uppercase; margin-bottom: 20px; } @media (max-width: 720px) { .ws-footer-wdget { width: 50%; } } @media (max-width: 480px) { .ws-footer-wdget { width: 100%; } }
Теперь, как уже упоминалось, перейдите во вкладку «Внешний вид – Виджеты», и вы увидите три новых виджета.
Добавьте информацию в эти виджеты обычным способом, сохраните изменения и просмотрите результат.
Результат.
Здравствуйте!
Судя по комментариям у меня распространенная проблема: виджеты располагаются вертикально а не горизонтально. Подскажите пожалуйста что поправить?
День добрый. Нужно смотреть исходный код, что с чем конфликтует.
Константин, Код обновлен. Скопируйте сначала.
WordSmall, Обновил код, блоки по прежнему отображаются вертикально. Можете глянуть исходный код?
Кэш браузера почистите.
WordSmall, Не помогло.
В windows 10 не помогло
Операционная система вообще имеет значения. Что именно не помогло?
Отличная инструкция, сделал за пару минут и всё сразу заработало. Спасибо!
На теме Poseidon (в дочерней) стили в файле CSS не заработали. Только через админку в разделе «дополнительные стили».
Подскажите как изменить фон у футера на отличный от белого?
Ну дело не в стилях, а в самой теме. И правильно ли была создана дочерняя тема. Цвет футера в вашей теме меняется в этом классе
.footer-wrap { border-top: 1px solid rgba(0,0,0,0.12); background: #fff; }
Подскажите, пожалуйста, как это сделать через плагин ProFunctions? Первый код вставляю -пишет, что ошибка... Второй поставился и виджеты появились в настройках виджетов, но когда их настраиваю, ничего не меняется на сайте...
Я не знаком с этим плагином. Для работы с файлом functions.php не нужны плагины. Лучше работать с ним на прямую через дочернюю тему. И даже если вы работаете через этот плагин, судя по вашему комментарию, вы допускаете ошибку.
Первый код — это область виджета. Там где будет выводиться информация. И это код, как сказано в статье, нужно вставить в файл footer.php. Или другое место, там где хотите видеть виджеты.
Второй в functions.php
Третий в style.css
Это плагин от разработчиков WPShop , который заменяет functions.php, те есть не надо напрямую редактировать этот файл и устанавливать дочернюю тему, а все коды вносятся в этот плагин. Не даёт поставить первый код, вот что выдает: syntax error, unexpected '<', expecting end of file
Вот, что пишут: Добавьте Ваш код ниже, открывать <?php не нужно */. Я просто не умею создавать дочернюю тему и мне через плагин легче. Дуцмала, может получится, если вставить ваш код в него) В любом случае спасибо за информацию!
Елена, если вы собираетесь редактировать тему, то всегда нужно создавать дочернюю тему. А этот плагин, вообще, бесполезный. Реализация функциональности, «фишек» и пр, не ограничивается вставкой кода только в один файл functions.php
Тому пример эта статья, область для виджета. И таких примеров не сосчитать.
Понятно, спасибо за ответ!
здравствуйте! а как сделать что бы меню в footer было раскрывающиеся при нажатия?
День добрый. В стандартном виджете «рубрике» есть выбор «выпадающем меню»