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