делаем подвал Twenty Fifteen

Редактируем подвал WordPress footer из виджетов в теме Twenty Fifteen.

Редактируем подвал 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 уже запущен.

Редактируем подвал WordPress добавляем область виджетов в function.php
Редактируем подвал WordPress добавляем область виджетов в function.php

Всё сделали и добавили, молодцы! Теперь нам остаётся добавить нужное кол-во виджетов в созданную область, например, три, и сделать их в одну строку слегка доработав стили.

Редактируем подвал WordPress добавляем виджеты

Стилизация добавленных виджетов в подвале.

После добавления виджеты появятся на сайте. Но будут так себе выглядеть, надо их стилизовать для этого лезем в файл 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

Редактируем подвал 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;
}
}

Обновляем страницу и получаем. Качественный перенос контента по блокам. Что отлично вписывается в концепт сайта.

Редактируем подвал WordPress
Добавляем адаптивность для Footer WordPress

Если надо чтобы Footer WordPress сайта состоял из 2-3 полос с различными блоками. Повторяем процедуру. Создаем новые области виджетов. Далее кидаем виджеты, далее стилизуем или заимствуем стили первого виджета.

Спасибо за внимание! Оставьте свои комментарии и задавайте волнующие вас вопросы по данной и любой другой теме.  Это поможет сделать сайт лучше. С удовольствием отвечу на них.  По вопросам консультации по переделке или доработке темы, пишите на почту или в whatsapp.

Редактируем подвал WordPress делаем еще две виджет области для footer, видео-гайд

Автор

Bondap SEO-команда

Команда оптимизаторов. Мы профильно занимаемся контентным белым продвижением сайтов в Яндексе и Google.

Редактируем подвал WordPress footer из виджетов в теме Twenty Fifteen.: 2 комментария

  1. За пункт с адаптивностью под мобильную версию отдельное спасибо. Почему-то многие при переделке подвала забывают рассказать про эту часть, видимо считают, что не так уж это и важно в реальности, где в основном все с телефона ищут инфу

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *