Как сделать шапку в 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.
Если нравится статья, напишите комментарий, так вы покажите, что мой труд не был напрасным. Надо лечить эгоизм в нише и делиться полезными лайфками и опытом, только так мы станем лучше.
Спасибо, помогли. А то я уже устал искать как телефон и контакты в шапку удобно вывести. Реально с виджетами удобно! Сделайте еще как дополнительный сайдбар с боку вывести
Пожалуйста, запишу видео, сделаю отдельную статью про создание сайдбара слева и справа, там где их быть не должно. Следите за сайтом и подписывайтесь на ютуб канал.
Долго страдал от перегрузки сайта и стандартных тем. Хотелось чего-то свежего и легкого, но самому лезть страшно было. Думал найти каких-нибудь грамотных верстальщиков, но это дело такое, кто сливается, кто за пару изменений требует сверх меры. Отложил, сейчас решил плотно заняться, прочитал статью, закрепил видео, оказалось вполне доступная верстка для меня. Уже переделал шапку и думаю над стилизацией подвала
Рады помочь, интересно что у вас еще получится сделать. Сейчас делаем статью по ускорению страниц с видео на сайте
Прикольно… С областями получается можно вообще, что хочешь делать и куда хочешь теперь вставлять.
Всегда так можно было.
Попробовала сделать, не поняла куда вообще вставлять эти коды, чтобы виджет области появились
В header. Потом в виджет области содержимое
А с подвалом также можно сделать или там какой-то иной подход?
Решение перед вами, дерзайте как и с шапкой.
А стоит ли делать один виджет или все-таки три под информацию в шапку?
С тремя прикольнее. делайте три
А я вставил свою шапку просто html в код header.php не понимаю зачем заморачиваться…
Ну, а зачем тогда вообще wordpress ставить если есть просто Html + css
Обычно покупаю готовую тему и не парюсь, но тут понадобилось допилить, попробовал получилось
Адекватный подход, с вами солидарен