Как сделать шапку для WordPress с виджетами если в теме её не предусмотрено

Как сделать шапку в WordPress наполняемую виджетами, без модулей, без костылей. С вами Zullbatol и мы просто сделаем виджет область и запихнем туда нужное нам содержимое. Затем мы выведем эту область туда где нам требуется и стилизуем.  Звучит круто!

Никаких вам конструкторов типа Elementor, Page Bilder и прочей ериси, хотя я и уважаю данные технологии, но они очень тяжелые. Погнали короче!

 Для создания шапки WordPress нам понадобится отредактировать следующие файлы:

  • function.php (отвечающий за весь функционал темы здесь)
  • content-page.php (отвечающий за страницы)
  • style.css (отвечает за стили сайта)

Делаем шапку WordPress

Открываем файл function.php и ищем область через CTL+F в файле Register widget area. Нашли? Отлично, копируем там имеющийся код и вставляем чуть ниже, меняя отмеченные стрелочками значения.

Создаем новую область виджетов под шапку
Создаем новую область виджетов под шапку

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

Сделали? Красавцы, теперь идите в раздел виджеты и редактируйте новую появившуюся область. Наполняем чем только душе угодно, и идем дальше, нам нужно разместить следующий код в странице content-page.php, ну или в зависимости от темы в header.php.

Появилась новая область вижетов для шапки
Появилась новая область вижетов для шапки

Как вывести виджет в шапку WordPress?

Заходим в файл sidebar.php ищем код похожий на это. Он выводит виджеты в ваш стандартный подвал. Теперь вам остается лишь его скопировать и поменять значения sidebar-1 на ваше значение из файла function.php.

Вставляем код для вызова виджета в нужный файл темы
Вставляем код для вызова виджета в нужный файл темы

Идем в наш файл conten-page.php или header.php и вставляем свой виджет, туда, где хотели бы его видеть. Обычно можно быстро найти область через поиск по коду.

Вставив код мы сразу увидим вывод данных в шапке
Вставив код мы сразу увидим вывод данных в шапке

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

Wordpress шапка появилась в теме
шапка появилась в теме

Стилизация шапки WordPress с виджетами.

Теперь нам остается только стилизовать шапку на Вордпресс. Задав ей правильное соотношение сторон, отступы и размеры. Для этого нам нужен файлик style.css

Виджету задаём класс .header-widget-area и вставляем следующие стили в файл style.css.

/** 
стили для виджетов шапки.
*/
.header-widget-area {
	margin: -2.0% auto 0;
	display:flex;
	justify-content: space-between;
}
.header-widget-area aside { 
	padding: 3% 6%;
	margin: -3%;
}

Не забудьте поменять класс в вызове виджета в файле conten-page.php.

Меняем класс стилей для виджета шапки WordPress
Меняем класс стилей для виджета шапки WordPress

Весь виджет оборачиваем в <div> блок и задаем в файле style.php новый класс .site-preheader с следующим содержимым.

.site-preheader {
	background-color: #fff;
	border-bottom: 1px solid rgba(51, 51, 51, 0.1);
	border-top: 0;
	box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
	float: left;
	margin: -7.0% 0 0 32.741%;
	padding: 3.84615% 7.6923%;
	width: 58.8235%;
}

Готово, после сохранения у вас должно получиться вот такая вот шапка для сайта на WordPress.

Вот мы и добавили шапку для нашего сайта WordPress
Вот мы и добавили шапку для нашего сайта

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

Как сделать шапку ВордПресс Видео

Автор

Bondap SEO-команда

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

Как сделать шапку для WordPress с виджетами если в теме её не предусмотрено: 4 комментария

  1. Спасибо, помогли. А то я уже устал искать как телефон и контакты в шапку удобно вывести. Реально с виджетами удобно! Сделайте еще как дополнительный сайдбар с боку вывести

    1. Пожалуйста, запишу видео, сделаю отдельную статью про создание сайдбара слева и справа, там где их быть не должно. Следите за сайтом и подписывайтесь на ютуб канал.

  2. Долго страдал от перегрузки сайта и стандартных тем. Хотелось чего-то свежего и легкого, но самому лезть страшно было. Думал найти каких-нибудь грамотных верстальщиков, но это дело такое, кто сливается, кто за пару изменений требует сверх меры. Отложил, сейчас решил плотно заняться, прочитал статью, закрепил видео, оказалось вполне доступная верстка для меня. Уже переделал шапку и думаю над стилизацией подвала

    1. Рады помочь, интересно что у вас еще получится сделать. Сейчас делаем статью по ускорению страниц с видео на сайте

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

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