Как сделать шапку в 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 с виджетами.
Теперь нам остается только стилизовать шапку на Вордпресс. Задав ей правильное соотношение сторон, отступы и размеры. Для этого нам нужен файлик 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.
Весь виджет оборачиваем в <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.
Если нравится статья, напишите комментарий, так вы покажите, что мой труд не был напрасным. Надо лечить эгоизм в нише и делиться полезными лайфками и опытом, только так мы станем лучше.
