Шаблоны страниц и частей
Минимальная тема уже описывает ленту, но одиночные материалы пока не имеют отдельного представления. Добавим шаблоны страницы и записи, а повторяющиеся элементы вынесем в части header и footer. Результат урока — общая оболочка: изменение одного файла хедера должно распространяться на все шаблоны, которые его подключают. Это знакомая задача ProfessorWeb, перенесённая в механизм блочной темы WordPress.
Шаблон определяет целую страницу определённого вида, а часть шаблона — повторяемую область. Разница не сводится к размеру файла. Хедер не должен знать заголовок текущего урока или случайно содержать редакционный текст страницы study. У него собственная ответственность: название сайта и общая навигация. Содержимое статьи берётся из текущего объекта через Post Content. Основной порядок выбора файлов сохраняется в иерархии шаблонов.
Общие части темы
В каталоге pw-workshop создадим parts/header.html и parts/footer.html. Начальный хедер содержит файловые ссылки из согласованной карты. Они предполагают установку в корне хоста с постоянными адресами урока 8. Для другого расположения WordPress ссылки нужно адаптировать явно. Мы не используем неизвестный ref существующего меню: его ID в каждой базе отличался бы.
Полное содержимое parts/header.html:
<!-- wp:group {"tagName":"header","layout":{"type":"constrained"}} -->
<header class="wp-block-group"><!-- wp:site-title {"level":0} /-->
<!-- wp:navigation {"overlayMenu":"mobile"} -->
<!-- wp:navigation-link {"label":"Как учиться","url":"/study/","kind":"custom"} /-->
<!-- wp:navigation-link {"label":"О мастерской","url":"/about/","kind":"custom"} /-->
<!-- wp:navigation-link {"label":"Контакты","url":"/contacts/","kind":"custom"} /-->
<!-- /wp:navigation --></header>
<!-- /wp:group -->Полное содержимое parts/footer.html:
<!-- wp:group {"tagName":"footer","layout":{"type":"constrained"}} -->
<footer class="wp-block-group"><!-- wp:paragraph -->
<p>Веб-мастерская — учебный сайт. Примеры требуют самостоятельного прохождения.</p>
<!-- /wp:paragraph --></footer>
<!-- /wp:group -->Site Title с уровнем 0 не создаёт дополнительный заголовок H1 для названия сайта. Одиночный материал получит H1 из Post Title. Это помогает избежать ситуации, когда каждую страницу начинают два равноправных основных заголовка. HTML-элементы header и footer задают семантические области. Они не создают автоматически нужную высоту, фиксированное положение или другие визуальные свойства, которые нужно выбирать отдельно.
Содержимое одиночного материала
Создадим templates/page.html. Это полный файл, который подходит нашим обычным страницам и выводит текущий текст без копирования его внутрь темы:
<!-- wp:template-part {"slug":"header"} /-->
<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group"><!-- wp:post-title {"level":1} /-->
<!-- wp:post-content {"layout":{"type":"constrained"}} /--></main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer"} /-->В этом учебном шаге templates/single.html содержит точно такой же полный текст. Это допустимая небольшая копия каркаса: различаться позже будет область main, а большие повторяемые части уже вынесены. Для записи можно добавить автора и дату, для служебной страницы они могут быть лишними. Не делаем страницу «Контакты» записью ради использования single и не вставляем дату вручную в содержимое каждого документа.
Обновим index.html: замените его первоначальный Site Title на подключение header, а после закрытия Query добавьте подключение footer. Остальная выборка из предыдущего урока сохраняется. В архиве есть полный снимок темы после этой операции, поэтому читатель может выбрать весь конечный каталог вместо сборки фрагментов наугад. Снимок не содержит базы и не заменяет материалы первых восьми уроков.
Файл и изменение в редакторе
Откройте страницу study: ожидаются общий хедер, один H1 «Как учиться», содержимое страницы со своими H2 и общий футер. Затем откройте запись image-shift: оболочка та же, данные другой записи. Измените только текст футера на «Учебная версия Веб-мастерской» и сравните эти страницы. Если одна продолжает показывать старую строку, выясните, какой шаблон или пользовательское переопределение она использует, прежде чем создавать ещё одну копию футера.
Блочные шаблоны могут редактироваться через редактор сайта. Сохранённое изменение живёт в базе и способно иметь приоритет над файлом темы. Это удобно для дизайнера, но создаёт второй источник состояния. В нашем файловом примере ожидается отсутствие пользовательских переопределений. Если вы намеренно сохраняете изменение в редакторе, запишите это в паспорте и экспортируйте его перед дальнейшими экспериментами. Изменённый файл Git сам по себе не воспроизводит всё оформление базы.
То же касается Navigation. Файловые ссылки являются начальным вариантом. После редактирования сохранённого меню нужно понимать, где находится его актуальное содержимое и какая часть хедера ссылается на него. Не обещаем автоматическую двустороннюю синхронизацию строк в HTML-файле с любой навигацией панели. При передаче редактору позже потребуется указать конкретный источник, иначе два человека смогут одновременно править разные версии одного видимого меню.
Различайте удаление части из одного шаблона и изменение самой части. Если убрать подключение footer из single.html, записи останутся без него, даже когда файл существует и другие страницы показывают актуальный текст. Если изменить содержимое parts/footer.html, действие относится ко всем потребителям этого файла. Так можно локализовать неисправность: проверить выбранный шаблон, наличие подключения, имя части и её источник. Поиск только по видимому тексту в базе не заменяет этот порядок, поскольку ошибка может находиться в файловом каркасе.
Для нашего single пока нет отдельной карточки автора и даты. Это сознательное отсутствие функции, а не обещание полностью готовой публикационной темы. При добавлении даты используйте динамический блок текущей записи и определите, что показывается: публикация или последнее изменение. При добавлении автора оцените, нужен ли переход к его архиву. Каждый новый элемент в общей части создаёт обязанность проверить его на всех видах страницы. Поэтому расширяем оболочку небольшими связанными шагами, не копируя чужую сложную тему целиком.
Проверка общей оболочки
Проверьте три служебные страницы, три записи и ленту. В таблице ожидаемого результата сравните порядок пунктов, текст футера и назначение ссылок. Сделайте одну намеренную ошибку только на стенде: переименуйте slug части в подключении на missing-header. Отсутствие правильного хедера показывает, что значение должно соответствовать существующему файлу. Не рассчитывайте на случайный подходящий элемент из другой темы. Верните имя header и сохраните правильный конечный снимок.
Ещё одна граница — короткая страница. Наличие footer в документе не означает его прижатие к нижнему краю окна. Для этого потребуются согласованные правила компоновки, а не дублирование пустых абзацев в странице. В этой серии сначала закрепляем общий источник оболочки, затем настройки размеров и типографики. Так исправление общего элемента не будет зависеть от длины конкретной статьи.
Здесь активация темы, редактор сайта и просмотры не запускались. Ожидаемый результат относится к подготовленным файлам и исходным данным серии. Если структура блоков восстанавливается с предупреждением, запишите точную версию и источник изменения. Следующий урок продолжит работу с повторяемыми фрагментами уже внутри содержимого: паттерн поможет создать одинаковую структуру вводного блока курса, не превращая разные описания в одну общую копию текста.