Footer WordPress — добавляем виджет

Без плагина WordSmall

Как можно проще всего вывести информацию на сайт – использовать виджеты. Обычно виджеты 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;
}
}

Теперь переходим, как было сказано выше, во вкладку «Внешний вид-Виджеты» и у вас появилось три новых виджета.

Footer WordPress — добавляем виджет

Добавляем в них стандартным путем информацию, сохраняем и смотрим результат.

Результат.

Footer WordPress — добавляем виджет

Этот способ был проверен на нескольких темах, работает отлично без замечаний. Не оставляйте свой футер пустым — наполняйте информацией.

Источник: www.wpsquare.com/add-3-column-footer-wordpress-theme/

Автор, он же Андрей, он же Admin, он же WordSmall

Лентяй-любитель, окончил высшую школу безделья с многочисленными знаками отличия. Создатель этого небольшого «чудо-блога» о еще более «чудном» контенте.

Подписаться на новые статьи
Комментариев: 73
  • Константин

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

    Судя по комментариям у меня распространенная проблема: виджеты располагаются вертикально а не горизонтально. Подскажите пожалуйста что поправить?

    • WordSmall

      День добрый. Нужно смотреть исходный код, что с чем конфликтует.

    • WordSmall

      Константин, Код обновлен. Скопируйте сначала.

      • Константин

        WordSmall, Обновил код, блоки по прежнему отображаются вертикально. Можете глянуть исходный код?

  • WordSmall

    Кэш браузера почистите.

    • Константин

      WordSmall, Не помогло.

  • Анатолий

    В windows 10 не помогло

    • WordSmall

      Операционная система вообще имеет значения. Что именно не помогло?

  • Андрей

    Отличная инструкция, сделал за пару минут и всё сразу заработало. Спасибо!

  • Егор

    На теме Poseidon (в дочерней) стили в файле CSS не заработали. Только через админку в разделе «дополнительные стили».

    Подскажите как изменить фон у футера на отличный от белого?

    • WordSmall

      Ну дело не в стилях, а в самой теме. И правильно ли была создана дочерняя тема. Цвет футера в вашей теме меняется в этом классе

      .footer-wrap { border-top: 1px solid rgba(0,0,0,0.12); background: #fff; }

  • Елена

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

    • WordSmall

      Я не знаком с этим плагином. Для работы с файлом functions.php не нужны плагины. Лучше работать с ним на прямую через дочернюю тему. И даже если вы работаете через этот плагин, судя по вашему комментарию, вы допускаете ошибку.

      Первый код — это область виджета. Там где будет выводиться информация. И это код, как сказано в статье, нужно вставить в файл footer.php. Или другое место, там где хотите видеть виджеты.

      Второй в functions.php

      Третий в style.css

      • Елена

        Это плагин от разработчиков WPShop , который заменяет functions.php, те есть не надо напрямую редактировать этот файл и устанавливать дочернюю тему, а все коды вносятся в этот плагин. Не даёт поставить первый код, вот что выдает: syntax error, unexpected '<', expecting end of file

  • Елена

    Вот, что пишут: Добавьте Ваш код ниже, открывать <?php не нужно */. Я просто не умею создавать дочернюю тему и мне через плагин легче. Дуцмала, может получится, если вставить ваш код в него) В любом случае спасибо за информацию!

    • WordSmall

      Елена, если вы собираетесь редактировать тему, то всегда нужно создавать дочернюю тему. А этот плагин, вообще, бесполезный. Реализация функциональности, «фишек» и пр, не ограничивается вставкой кода только в один файл functions.php

      Тому пример эта статья, область для виджета. И таких примеров не сосчитать.

      • Елена

        Понятно, спасибо за ответ!

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