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

Без плагина WordSmall

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

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

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

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

Результат.

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

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

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

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

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

E-mail Google+ Twitter
Комментариев: 50
  • Андрей

    Я так понимаю стили прописаны для статичного шаблона? Просто у меня адаптивный шаблон.

    • WordSmall

      Да, стили не включают в себя адаптив, но если вы знакомы с css, то там 5 минут дела.

  • valeria

    добрый день.

    при попытке сохранить код в functions.php выкидывает на страницу 403.

    подскажите, что делать?

    • WordSmall

      Добрый. Вы в самый низ добавляли перед знаком ?>

  • Алексей

    Добавил статью в закладку, так как я скоро собираюсь поменять тему на ту, в которой нет виджетов в футере. Но я предоставленную вами информацию проверил на тестовом сайте и у меня все получилось. Спасибо за подробное описание, реально помогли.

    • WordSmall

      Алексей, Добрый день ;-) Спасибо за отзыв! и не за что!

  • Vladislav

    Здравствуйте! Все получилось с первого раза, спасибо! У Вас в примере Архивы, Страницы и Категории оранжевые. Это от цвета шаблона зависит или можно изменить как-то? Спасибо!

    • WordSmall

      Vladislav, Здравствуйте! В принципе да, но можно самому менять цвет. Пример

      #footer-widgets h2 { color: #FD6524; }

      • Vladislav

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

      • WordSmall

        Vladislav, В смысле переместился? То есть зоголовок виджета? Тогда можно уменьшить размер шрифта. Или нарушилась вся конструкция? Если есть возможность, покажите скриншот или дайте ссылку на сайт.

      • Vladislav

        WordSmall, немного перепутал, один виджет остается, а два смещаются и таким образом нарушается конструкция. Хочу сменить заголовки виджетов с серого на белый. Сайт karl-marks.ru

      • WordSmall

        Vladislav, по всей видемости у вас отсутствуют стили к первому виджету #footer1. Изменить цвет заголовка, выше я показывал пример, #footer-widgets h2 { color: #fff; }

  • ZardoZ

    не проще ли плагин поставить? Плагин BNS Add Widget

    • WordSmall

      Ну не всегда же плагины ставить.

  • Бешеный пес

    автор красавец, все быстро и четко, код валидный, поставил за 5 мин, чуть доработал стили под себя и все зер гуд. Спасибо, не даром по запросу «добавить 3 виджета в футер wordpress» стоит на первом месте

    • WordSmall

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

      • Burunduk

        WordSmall, вы выше отписались про адаптивность и что для этого надо еще что-то внести в таблицу стилей. А вот что именно? :)

      • WordSmall

        Там минимум изменений. Выше говорил про проценты, так как там заданы пиксели и определенная высова — вот это нужно изменять. Мелкая корректность.)

  • Алексей

    WordSmall, такой вопрос: а если мне в футере не три виджета нужны, а два, то как тогда код будет выглядеть?

    • WordSmall

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

  • nikkur

    Здравствуйте! Все строчки во всех виджетах выстраиваются в один столбец. Можете подсказать, как это исправить?

    • WordSmall

      Здравствуйте. Смотрите в исходном коде, что и почему мешает. В каждой теме могут быть свои проблемы.

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