Как растянуть картинку на header и home одновременно на WordPress?
Сайт в процессе посадки верстки на WordPress.
Проблема состоит в том, что делая дизайн-макет и верстку, я не предполагала, что при посадке страницы на Word Press невозможно будет разделить header еще одним информационным блоком. Чтобы было нагляднее, прикладываю скрины.
В статичной версии сайта разделение блока с логотипом, номером телефона и соцсетями не представляло никакой сложности. Между верхней частю header и меню стоит блок, задним фоном в стилях висит картинка, верстка соответсвует макету, все красиво и как задумано.
Но вот при переносе на WP получается, что если шаблонизировать header, переносится и блок, который между верней частью header и меню ,а он на всех страницах не нужен. Тогда приходится переносить меню к верхней части header и подставлять в информационный блок другую фоновую картинку. Теряется заудмка, и страница выглядит уже не так гармонично. Я придумала это решение не сама: видела урок в фигме по созданию такого макета. Но вот интересно, как же его перенести на WP в том виде, в каком он задуман?
*Скриншот 1 - сайт на WP
* Скриншот 2 - статичная версия с здумкой из макета
Дополнительно:
Начинающим для информации
Пока что придется оставить уродский вариант с разными фонами на домашней странице, что ж... Изучу материалы, тогда и исправлю. Спасибо большое Вам)
и просто 1 вид шаблона я буду на домашней использовать ,а другой - на всех остальных.
Это хорошее решение? Если оно нормльное, буду искать, как его реализовать.
а сделать 2 разных шаблона для header можно?
Сколько угодно. См. https://developer.wordpress.org/reference/function... Там даже пример есть "Different header for different pages."
а сделать 2 разных шаблона для header можно?
Можно. Причём разными способами (например так). Но для этого нужно знать хотя бы основы.
И да, это вполне нормальное решение.
Просто волшебство! Благодарю Вас от все души и удачного Вам дня!
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
В WordPress не обязательно весь визуальный верх страницы держать внутри одного общего
header.php. Если в макете есть блок, который нужен только на главной или только на отдельных страницах, его нужно вынести из общей шапки в отдельный шаблонный блок и подключать условно.Например, в
header.phpоставьте только то, что повторяется везде: верхняя панель, логотип, меню. А большой фоновой блок вынесите в отдельный файл:template-parts/hero/home-hero.php
На главной подключайте его так:
if (is_front_page()) { get_template_part('template-parts/hero/home-hero'); }
Можно подключить этот блок в
front-page.php, а не вheader.php. Тогда он вообще не будет мешать внутренним страницам.Фоновое изображение можно задавать CSS-классом только для нужного шаблона:
.home-hero { background-image: url("../images/home-hero.jpg"); background-size: cover; background-position: center; }
Если на разных страницах нужны разные hero-картинки, используйте featured image, ACF-поле или условные классы body. Не нужно ломать меню и переносить его к другой части header только потому, что один блок нужен не везде.
Итого: общая шапка отдельно, hero/информационный блок отдельно. Так макет сохранится, а шаблон останется управляемым.