Редактируем подвал WordPress на примере темы, которая по умолчанию не содержит нормально реализованного функционала подвала.
Twenty Fifteen – неплохая стандартная тема от разработчиков WordPress. И как любую тему её нужно допиливать под себя и дорабатывать напильником. И первая доработка которую хочется сделать, настраиваемый подвал сайта. Наполнять подвал планируется через виджеты, так удобнее и проще.
Для выполнения работ нам желательно установить себе на сайт FileManager или простой зайти по FTP. Не забудьте сохранить резервную копию следующих файлов: footer.php, function.php, style.css.
Готовы? Погнали редактировать подвал WordPress для темы Twenty Fifteen!
Первое. Сохраняем себе сам блок вывода области виджетов в блокнот, чтобы потом вставить в подвал WordPress.
Взять его можно в файле sidebar.php
<? php if ( is_active_sidebar( 'sidebar-2' ) ) : ?>
<div class="widget-area" role="complementary">
<? php dynamic_sidebar( 'sidebar-2' ); ?>
</ div>
<? php endif; ?>
Второе. В коде function.php темы Twenty Fifteen вашего WordPress сайта. Ищем блок создающий процесс вывода области виджетов:
/**
* Register widget area.
*
* @since Twenty Fifteen 1.0
*
* @link https://developer.wordpress.org/reference/functions/register_sidebar/
*/Копируем функцию и меняем в ней значения sidebar-1 на sidebar-2. Далее настраиваем init добавляя в его конец единичку. Важно чтобы init были с другим названием (init1, init2, init3 и так далее) иначе произойдет сбой так как первый init уже запущен.
Всё сделали и добавили, молодцы! Теперь нам остаётся добавить нужное кол-во виджетов в созданную область, например, три, и сделать их в одну строку слегка доработав стили.
Стилизация добавленных виджетов в подвале.
После добавления виджеты появятся на сайте. Но будут так себе выглядеть, надо их стилизовать для этого лезем в файл style.css в папке темы.
Копируем родной стиль виджетов widget-area:
.widget-area {
margin: 9.09090% auto 0;
}Делаем копию и задаём класс в подвале foter-widget-area, где выводим наш виджет. В стилях прописываем код.
.foter-widget-area {
margin: 9.09090% auto 0;
display:flex;
justify-content: space-between;
}
.foter-widget-area aside {
padding: 3% 6%;
}
Готово, виджеты ровно расположились в ряд и можно их содержимое приводить в порядок. Да, конечно же можно сразу задать html+css код в тело подвала. Но какой тогда простите смысл использовать CMS. Весь функционал WordPress надо использовать по максимуму.
Редактируем подвал WordPress Twenty Fifteen делаем его адаптивным.
Редактируем подвал WordPress, работаем с мобильной версией сайта. Теперь добавляем адаптивность для мобильной версии. Делается все очень просто. Пишем прямо под созданным классом foter-widget-area.
@media (max-width: 991px) {
.foter-widget-area {
margin: 2.09090% auto 0;
flex-direction: column;
justify-content: space-between;
}
}Обновляем страницу и получаем. Качественный перенос контента по блокам. Что отлично вписывается в концепт сайта.
Если надо чтобы Footer WordPress сайта состоял из 2-3 полос с различными блоками. Повторяем процедуру. Создаем новые области виджетов. Далее кидаем виджеты, далее стилизуем или заимствуем стили первого виджета.
Спасибо за внимание! Оставьте свои комментарии и задавайте волнующие вас вопросы по данной и любой другой теме. Это поможет сделать сайт лучше. С удовольствием отвечу на них. По вопросам консультации по переделке или доработке темы, пишите на почту или в whatsapp.
