Пришли последние оставшиеся заголовки! Теперь мы можем закончить их и сделать все наши настраиваемые заголовки. В этом скринкасте мы поработаем над настраиваемыми заголовками для демонстрационного раздела, сделанными Джоном Найнером.
Интересно, что Джон был единственным иллюстратором, который предоставил иллюстрацию в Illustrator. В данном случае это хорошо для нас, потому что мы можем масштабировать его до любого необходимого размера при полном качестве. Оглядываясь назад, мы, вероятно, должны были оставить его векторным (как SVG) и, возможно, использовать растровый откат. Но в этом скринкасте мы исследуем различные варианты сохранения растра и остановимся на JPG.webp.
Была некоторая путаница с сохранением, когда я не мог найти сохраненный файл, потому что искал неправильное имя. Реальная ситуация с DUH.
Затем мы переходим в WordPress и повторяем наш процесс подготовки шаблонов к стилизации. Мы следим за тем, чтобы демонстрационные страницы загружали только для них специальный файл CSS. Это означает добавление логики в наш файл header.php ( is_page_template()). Мы находим правильный шаблон для демонстрационной области (используя классический тест, в котором мы вносим очевидные изменения в шаблон и видим его отражение на реальном сайте.
Мы удаляем весь старый мусор из этого шаблона и приводим его в наш новый стиль. Мы пишем небольшую разметку, необходимую для того, чтобы страница была в сетке и имела область заголовка только для этого нового настраиваемого заголовка и всего такого.
В конечном итоге мы применяем нашу настраиваемую графику заголовка в качестве фонового изображения к элементу оболочки с достаточным отступом вверху (в процентах), чтобы соответствовать графику вверху (размер, чтобы соответствовать). Мы даже добавили градиент позади изображения, который плавно переходил от темно-зеленого к черному, так что похоже, что вы погружаетесь в океан при прокрутке вниз.
На этой странице нужно еще поработать, но заголовок готов и шаблон в хорошей форме!