Шаблоны и части шаблона — полное редактирование сайта
В этом упражнении вы научитесь создавать шаблоны и части шаблона для блочных тем.
Шаблоны — это ваши базовые файлы. Урок начинается с index.html , а затем вы добавите шаблоны для отдельного поста, страницы, архива и поиска.
Вы будете использовать частей шаблона для организации и добавления структуры темы, чтобы избежать повторения кода. Вы начнете с верхнего и нижнего колонтитула сайта и объедините их с файлами шаблонов.
Для этого полного урока по редактированию сайта вам потребуется:
Установка WordPress с тестовым содержимым.
Плагин Gutenberg, версия 14.1 или новее. — Этот урок был обновлен в рамках подготовки к WordPress 6.1, и для работы примеров требуется активация плагина Gutenberg.
Пустая тема, в которую вы добавите файлы шаблонов блоков.
Если вы создали пустую тему на предыдущем уроке, продолжайте использовать ее в этом упражнении. Если вы еще не настроили тему, вы можете загрузить первую часть файлов урока с GitHub.
Расчетное время чтения: 17 минут
Обновлено 17 сентября 2022 г. для Gutenberg 14.1.
Оглавление
Создание первых частей шаблона
Объединение шаблонов и частей шаблона
Добавление раздела блога
Блок цикла запросов
Шаблон сообщения
9 9 Разбиение на страницы80018
Создание единого шаблона сообщения
Переход к следующему и предыдущему сообщению
Добавление области комментариев
Отображение комментариев в более старых версиях WordPress
Отображение комментариев с активным плагином Gutenberg или с WordPress 6.0+
Разбивка комментариев на страницы
форма
Создание шаблона одной страницы
Шаблоны архива
Настройка страницы результатов поиска
Следующие шаги
Создание первых частей шаблона
Если ваша начальная тема еще не включает папку с именем templates с пустым файлом index. html внутри, создайте их, прежде чем продолжить.
Часть шаблона представляет собой файл HTML, настраиваемый тип записи (wp_template_part) и блок. Звучит сложно? Думайте о них как о блоках, которые отображают содержимое, которое вы разместили внутри них. Части шаблона не являются обязательными, но они помогают авторам темы структурировать тему с помощью многократно используемых более мелких частей.
Внутри корневой папки темы создайте папку с именем parts . Создайте в этой папке файлы footer.html и header.html . WordPress будет искать в этой папке действительные файлы, поэтому вы не сможете использовать другое имя папки.
Затем добавьте содержимое в части шаблона, чтобы их можно было идентифицировать при тестировании темы. Вы можете добавить блоки заголовка сайта и слогана в header.html со следующей разметкой блока:
В footer.html добавьте общеизвестный текст кредита нижнего колонтитула:
Объединение шаблонов и частей шаблона
Чтобы включить часть шаблона в файл шаблона, вы используете блочную разметку для частей шаблона. Части шаблона самозакрывающиеся, так как содержимое находится внутри файлов HTML.
Откройте index.html и добавьте две части шаблона :
Точно так же, как блоки, шаблоны и части шаблонов самодостаточны. Открывающий тег и закрывающий тег должны быть в одном и том же шаблоне. Вы не сможете поместить открывающий тег для группового блока в шаблон заголовка и закрыть его в шаблоне нижнего колонтитула.
Для этих двух важных ориентиров необходимо использовать правильный HTML-элемент. Добавьте атрибут tagName для
и
Шаблон комментария использует блок столбцов для отображения аватара автора комментария рядом с комментарием по горизонтали. Крайний левый столбец имеет атрибут ширины, установленный на 40 пикселей, чтобы соответствовать ширине аватара:
<дел>
flex-basis:40px ">
<дел>
Для второго столбца не задана ширина, и он будет использовать оставшееся пространство:
<дел>
<дел>
<дел>
Дата комментария и ссылка на редактирование размещаются внутри группового блока с вариантом row , располагая их рядом:
<дел>
<дел>
<дел>
Вы можете идентифицировать строку по настройке гибкого макета "layout":{"type":"flex"} и отсутствие ориентации:
Групповой блок с гибкой компоновкой и вертикальной ориентацией называется стеком :
Стек доступен с версии Gutenberg 13. 0.
Как и разбивка на страницы сообщений, блок разбивки на страницы комментариев имеет номер внутри запроса , но вне шаблона комментария . — Я разместил его под комментариями, но если хотите, можете разместить его над комментариями или почему бы и нет или в обоих положениях?
<дел>
<дел>
<дел>
<дел>
В нашей области комментариев по-прежнему отсутствует форма комментариев. Текущий блок формы комментариев представляет собой единый блок без возможности редактирования полей формы.
Форма комментариев отображается на передней панели вашего веб-сайта, только если комментарии включены. Разметка блока для добавления формы комментариев:
А вот вид готового отдельного поста:
Создание шаблона одной страницы
Я рекомендую вам создать блочный шаблон для отдельных страниц, сохранив копию single.html как page.html внутри папки templates . Затем удалите неподдерживаемые блоки: навигацию по записям, категорию и теги.
— Так же решил убрать дату, автора и комментарии, Но это личный выбор, и вы сами выбираете какие блоки включать.
Шаблоны архивов
В этой части упражнения вы создадите базовую страницу архива. Вы можете создать файл archive.html, используемый для всех таксономий, или объединить его с различными шаблонами для категорий (category. html) или тегов (tag.html). Если вы хотите создать шаблон для определенной категории, используйте имя файла category-{слаг категории}.html .
Если вы не включите шаблоны архивных блоков в свою тему, WordPress вернется к использованию index.html , и ваш веб-сайт по-прежнему будет отображать правильный контент. Причина, по которой я предлагаю вам создавать отдельные шаблоны, состоит в том, чтобы разрешить настройку и отобразить заголовок архива.
Откройте файл index.html в редакторе кода и сохраните копию файла как archive.html . В файле archive.html добавьте заголовок архива, вариант блока заголовка запроса , над запросом:
Категории, теги и другие таксономии могут дополнительно иметь описание. Чтобы отобразить описание, вы можете использовать блок описания термина:
Полный код файла archive.html теперь:
Настройка страницы результатов поиска
С добавлением «блока без результатов» в Gutenberg версии 12. 9 , вы, наконец, можете настроить страницу результатов поиска так, чтобы при отсутствии результатов поиска отображалось сообщение вместо пустой страницы. Блок без результатов находится в ранней упрощенной версии, и я надеюсь продолжить работу над его улучшением. Как и шаблон сообщения и комментария, он используется внутри запроса и представляет собой блок-контейнер, в который вы помещаете другие блоки.
Скопируйте index.html и сохраните его как search.html в папке шаблонов.
При необходимости добавьте блок заголовка над запросом, чтобы показать пользователям, что они просматривают страницу поиска:
Поиск
WordPress показывает блоки внутри блока без результатов вместо шаблона сообщения, поэтому не имеет значения, где вы их размещаете, если они находятся внутри запроса:
<основной>
Поиск
<дел>
<дел>
Вы можете добавить основное сообщение, форму поиска, список последних сообщений или даже использовать второй запрос:
Результаты не найдены
К сожалению, по условиям поиска ничего не найдено. Пожалуйста, попробуйте еще раз с другими ключевыми словами.
Ищете конкретную тему?
Вид страницы результатов поиска спереди:
Следующие шаги
Возможно, вы уже подумали о том, как улучшить эти базовые шаблоны. Для практики переместите область комментариев в часть шаблона и включите ее в соответствующий шаблон.
Отсюда я рекомендую перейти к следующей главе, где вы узнаете, как добавить дополнительные параметры в theme.json. Вы также можете сначала узнать больше о различных шаблонах.
Загрузите тему с шаблонами и частями шаблона с GitHub.
Блок части шаблона — служба поддержки WordPress.com
Используйте блок части шаблона для редактирования различных глобальных областей вашего сайта, таких как верхний и нижний колонтитулы или боковая панель. Вы также можете создать свой собственный! Этот блок работает с темами, поддерживающими редактирование шаблонов.
Содержание
Когда использовать блок части шаблона
Используйте блок части шаблона , если на вашем сайте используется тема, поддерживающая редактирование шаблона. Вы можете использовать этот блок только при создании и редактировании шаблонов для управления блоками в областях, повторяющихся на веб-сайте (например, в верхнем и нижнем колонтитулах вашего сайта). изменить блоки внутри части шаблона, эти блоки обновляются в каждом шаблоне, который использует эту часть шаблона.
↑ Содержание ↑
Добавление блока части шаблона
Чтобы добавить блок части шаблона , убедитесь, что вы находитесь в редакторе шаблона или редакторе сайта. Затем нажмите значок + Блок Вставка и выполните поиск по фразе «часть шаблона». Щелкните ее, чтобы добавить блок в шаблон.
Затем вам будет предложено два варианта:
Выбрать существующий: Выберите одну из частей шаблона, поставляемых с вашей темой, например, верхний и нижний колонтитулы.
Новая часть шаблона: Создайте новую часть шаблона с нуля. Когда вы выбираете эту опцию, вы можете дать части шаблона имя, а затем начать добавлять к ней блоки.
Вот пошаговое руководство по добавлению части шаблона :
💡
Используя клавиатуру, вы также можете ввести /template в новой строке и нажать клавишу ввода, чтобы быстро добавить новый блок части шаблона .
Для получения дополнительной информации посетите наши подробные инструкции по добавлению блоков.
↑ Содержание ↑
Части шаблона вашего сайта
Чтобы просмотреть полный список всех частей шаблона вашего сайта, перейдите на Внешний вид → Редактор → Части шаблона :
Список частей шаблона сайта
Вы также можете создать новые части шаблона с этого экрана, нажав Добавить новый. Дайте здесь вашему новому элементу шаблона описательный заголовок. Затем вы можете добавить блоки в свою часть шаблона на следующем экране. Позже вы сможете использовать эту часть шаблона во всех шаблонах вашего сайта.
↑ Содержание ↑
Работа с частями шаблона
После добавления или выбора блока части шаблона вы можете настроить все блоки внутри него. Самый простой способ сделать это — использовать List View. Чтобы получить доступ к представлению списка , нажмите кнопку, которая выглядит как три горизонтальные линии в верхнем левом углу:
представление списка
Здесь вы можете увидеть все блоки в своей части шаблона, а затем удалить, изменить порядок и добавить новые блоки.
Смотреть видео
В следующем видео показано, как редактировать часть шаблона в режиме фокусировки. Чтобы получить доступ к режиму фокусировки, перейдите в Внешний вид → Редактор сайта и щелкните значок сайта, чтобы открыть навигацию в Редакторе сайта.