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

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

E-mail Google+ Twitter
Комментариев: 62
  • Анастасия

    Спасибо за полезную статью. Сразу все получилось

  • Виталий

    а как сделать цветными заголовки в футере?

    • WordSmall

      Заголовок выводится в теги h2 следовательно задайте нужные стили. К примеру, #footer-widgets h2 {color:#fff; если не поможет добавьте (!important), #footer-widgets h2 {color: #fff !important;}

  • Виталий

    скажем так я вывел меню в футере но хочу надписи сделать цветными,после вставки этого кода что делать дальше?код я так понимаю надо вставить в стили css? и как отредактировать в виджете мои записи,ссылки?

    • WordSmall

      надо вставить в стили css?

      да.

      как отредактировать в виджете мои записи,ссылки?

      Что именно хотите отредактировать? цвет?, то таким же путем.

  • Виталий

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

  • Виталий

    хочу сделать что типа как в вашем примере выше,вставил код ничего не изменилось...

    • WordSmall

      давайте ссылку на сайт посмотрим что там.

  • Алексей

    Пробую делать сайт на базе WP темы MH Purity lite

    В ней уже есть данный блок виджетов

    Но не получается сменить фон и поставить картинку на футер

    Подскажите, заранее спасибо

    • WordSmall

      Это все делается с помощью CSS...достаточно базовых знаний.

  • Сергей

    Спасибо за статью, получилось, но у меня виджеты расположились по вертикали((( подскажите как сделать их горизонтальными?

    • WordSmall

      Ну если я правильно понял, то попробуйте так

      #footer1 { padding: 10px; } #footer1 li{ list-style: none; } #footer2 { padding: 10px; } #footer2 li { float: left; list-style: none; margin-left: 10px; } #footer3 { float: left; padding: 10px; } #footer-widgets { display: table; margin: 0 auto; width: 950px; }

      • Сергей

        Получилось, но теперь появилась полоса((( Как ее убрать?

      • WordSmall

        Высоту виджета уберите, я же написал вам стили.

      • Сергей

        Спасибо все получилось!!!!

      • WordSmall

        Не за что! Рад был помочь.

      • Sin

        Добрый вечер пробую вставить код в двух вариациях CSS и все равно нечего не получаться Выводит по вертикали... Может дело в теме у меня Twenty Twelve стандартная.

      • WordSmall

        Добрый вечер. Только что попробовал установить на тему Twenty Twelve, и получилось так, как и должно (горизонтально). Может вы где-то ошиблись? В файле footer.php я поместил код сразу после тега <footer id="colophon" role="contentinfo">

      • Sin

        Не получается если Вам нетрудно посмотрите Вашим профессиональным взглядом.

      • WordSmall

        Странно. Стили вообще не принимает. Попробуйте вставить код не через админку, а через FTP.

      • Sin

        Скачал CSS отредактировал и закинул обратно. Опять в 2 вариантах. .И ничего не изменилось.

        Может подскажите другие варианты как можно сделать футер?

        Спасибо за помощь!!! )))

      • WordSmall

        Скиньте мне вашу тему попробую на локале.

  • Руслан

    Спасибо большое !!! Все работает !

    • WordSmall

      Не за что! Приходите еще)

  • Алиса

    Работает отлично, спасибо что поделились!

  • Майк Петров

    Работает!

    Стиль прописывал в дочерней теме.

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