Разное

Wp get template part: get_template_part() | Function | WordPress Developer Resources

21.04.2023

Шаблоны и части шаблона — полное редактирование сайта

В этом упражнении вы научитесь создавать шаблоны и части шаблона для блочных тем.

Шаблоны — это ваши базовые файлы. Урок начинается с index.html, , а затем вы добавите шаблоны для отдельного поста, страницы, архива и поиска.

Вы будете использовать частей шаблона для организации и добавления структуры темы, чтобы избежать повторения кода. Вы начнете с верхнего и нижнего колонтитула сайта и объедините их с файлами шаблонов.

Для этого полного урока по редактированию сайта вам потребуется:

  • Установка WordPress с тестовым содержимым.
  • Плагин Gutenberg, версия 15.1 или новее. — Этот урок был обновлен в рамках подготовки к WordPress 6.2.
  • Пустая тема, в которую вы добавите файлы шаблонов блоков.

Если вы создали пустую тему на предыдущем уроке, продолжайте использовать ее в этом упражнении.


Если вы еще не настроили тему, вы можете загрузить первую часть файлов урока с GitHub.

Расчетное время чтения: 17 минут

Последнее обновлено

СОДЕРЖАНИЕ

  • Создание вашего первого шаблона. блок
    • Шаблон поста
    • Пагинация
  • Создание единого шаблона поста
    • Навигация по следующему и предыдущему посту
    • Добавление области комментариев.
    • Шаблоны архивов
    • Настройка страницы результатов поиска
    • Следующие шаги

    Создание первых частей шаблона

    Если ваша начальная тема еще не включает папку с именем templates с пустым файлом index.html внутри, создайте их, прежде чем продолжить.

    Часть шаблона представляет собой файл HTML, настраиваемый тип записи (wp_template_part) и блок.
    Звучит сложно? Думайте о них как о блоках, которые отображают содержимое, которое вы разместили внутри них. Части шаблона не являются обязательными, но они помогают авторам темы структурировать тему с помощью многократно используемых более мелких частей.

    Внутри корневой папки темы создайте папку с именем parts . Создайте в этой папке файлы footer.html и header.html .
    WordPress будет искать в этой папке действительные файлы, поэтому вы не сможете использовать другое имя папки.

    Затем добавьте содержимое в части шаблона, чтобы их можно было идентифицировать при тестировании темы. Вы можете добавить блоки заголовка и слогана сайта в header.html со следующей разметкой блока:

    В footer.html добавьте общеизвестный кредитный текст нижнего колонтитула:

    Объединение шаблонов и частей шаблона

    Чтобы включить часть шаблона в файл шаблона, вы используете блочную разметку для частей шаблона.
    Части шаблона самозакрывающиеся, так как содержимое находится внутри файлов HTML.

    Откройте index. html и добавьте две части шаблона :

    Точно так же, как блоки, шаблоны и части шаблонов самодостаточны.
    Открывающий тег и закрывающий тег должны быть в одном и том же шаблоне.
    Вы не сможете поместить открывающий тег для группового блока в шаблон заголовка и закрыть его в шаблоне нижнего колонтитула.

    Для этих двух важных ориентиров необходимо использовать правильный HTML-элемент. Добавьте атрибут tagName для

    и
    :

    Если вы хотите иметь возможность идентифицировать и нацеливать верхний и нижний колонтитулы с помощью CSS, добавьте пользовательский CSS className :

    ClassName атрибут эквивалентен добавлению класса в поле «Дополнительные классы CSS» на расширенной панели боковой панели настроек блока:

    Если вы сейчас просматриваете свой веб-сайт, он должен выглядеть примерно так:

    Добавление раздела блога

    Вы создадите блог, используя цикл запросов и блоки шаблонов сообщений. Но сначала вам нужно добавить элемент

    в качестве оболочки для списка сообщений в блоге. Вы также включаете ссылку автоматического пропуска, включив элемент
    .

    В index.html между двумя частями шаблона добавьте групповой блок с атрибутом tagName

    со значением основной . Затем обновите
    до
    :

    Если вам интересно, почему внутри этой группы нет внутреннего контейнера, WordPress удалил внутренний контейнер для тем полного редактирования сайта в Gutenberg 10.3.

    ✋ Настройка типа макета была обновлена ​​в Gutenberg версии 14.1 и WordPress 6.1.

    Существует три типа макета:

    • Ограниченный : Блоки внутри группы располагаются по центру по горизонтали. Ширина блоков — это значение, которое вы добавили к contentSize в файле theme.json.
    • По умолчанию : Блоки внутри группы выравниваются по левому краю и заполняют контейнер по ширине.
    • Flex : Используется с вариантами блоков строк и групп стека.

    Тип макета заменил предыдущую настройку макета, в которой вы устанавливаете атрибут наследовать на true или false . Я привожу этот пример на случай, если вы хотите создать тему, которая поддерживает версии WordPress ниже 6.1:9.0003

    Обновленные параметры макета будут подробно объяснены в следующем уроке.

    Блок цикла запроса

    Блок цикла запроса имеет множество дополнительных функций. Вы можете положиться на настройки по умолчанию для базового блога: Отображать сообщения по дате, по убыванию. Блок цикла запроса без каких-либо настроек наследует запрос от шаблона страницы. Другими словами, он отображает различный контент в зависимости от контекста.

    • В индексном или домашнем шаблоне блок запроса отображает сообщения из каждой категории
    • В архиве показывает элементы из выбранного типа записи или таксономии (категории или тега)
    • На странице результатов поиска отображаются результаты поиска

    Когда вы вручную добавляете запрос в редакторе блоков, это эквивалентно включению параметра «Наследовать запрос из шаблона»: блок-контейнер для почтовых блоков, таких как заголовок и содержание сообщения.


    WordPress передает данные из запроса в шаблон сообщения, а затем повторяет блоки внутри шаблона сообщения для каждого сообщения.

     
<дел>

    • 

    • 

    • 

    • 

    • 

    • 

    • 

    • 

    • 

    •

    Я хочу, чтобы в блоге над выдержкой сообщения отображались избранное изображение, заголовок сообщения, автор и дата. Вы можете экспериментировать с другими блоками сообщений, если поместите их в шаблон сообщения.

    Заголовок сообщения должен быть ссылкой. В противном случае посетители не смогут добраться до отдельных сообщений из блога. В том числе

    "isLink":true добавит правильную ссылку для каждого сообщения внутри цикла.
    В примере кода я решил не отображать аватар автора сообщения, установив для showAvatar значение false:

    Наконец, я думаю, что мог бы улучшить этот блог, показав категории, а разметка блока для отображения категорий:

    Вы можете использовать блок терминов публикации для отображения любых терминов таксономии, а категория — это только один вариант.

    Вы не хотите, чтобы блог повторял нумерацию страниц для каждого поста, поэтому вместо этого поместите блок пагинации

    внутри запроса, но вне шаблона сообщения:

    Блок разбивки на страницы запроса также может отображать количество страниц и показывать, какую страницу вы просматриваете. В примере я включил только ссылки на следующую и предыдущую страницы.

    Теперь ваш файл index.html должен выглядеть следующим образом:

    Передняя часть вашего веб-сайта должна выглядеть примерно так:

    Создание единого шаблона сообщения

    Я хочу показать немного разные вещи для страниц и отдельных сообщений. А для этого мне нужно дать каждому формату свой шаблон блока, начиная с отдельного поста.

    Сохраните копию index.html как single.html в папке templates .
    Конечно, вы хотите показать только текущую запись, поэтому вам нужно убрать цикл.
    В single.html вы оставили следующий код:

    Поскольку это один пост, я также удалил атрибут isLink из заголовка поста.

    Чтобы отобразить все содержимое, замените с
    :

    Эквивалент the_content() в классическом PHP- на основе темы.

    Вы можете отображать теги, используя вариант тегов сообщений в блоке терминов сообщений. В примере я добавил теги под содержимым:

    Если вы хотите добавить дополнительный интервал, Этого можно добиться, добавив отступы, поля или разделители между содержимым и метаинформацией поста:

    Переход к следующему и предыдущему сообщению

    Блок ссылок навигации по сообщению добавляет ссылку на следующее сообщение, а ссылка на предыдущее сообщение является вариантом блока . Если нет следующей или предыдущей записи, на которую можно было бы сослаться, блок не отображается на лицевой стороне веб-сайта. Разметка для двух вариантов блока:

    Версия Gutenberg 13. 0 устарела от блока комментариев к записи в пользу нового блока цикла запроса комментариев. С новым блоком у вас гораздо больше контроля над макетом.
    Вы можете размещать, добавлять и удалять внутренние блоки, такие как имя автора комментария, дата комментария и ссылка для ответа.

    Но это также означает, что на веб-сайтах WordPress, где вы не используете Gutenberg, возникают проблемы с обратной совместимостью, поэтому я покажу вам два способа отображения комментариев.

    Если ваша тема поддерживает WordPress 5.9 и не требует Гутенберга, вам необходимо отображать комментарии с помощью одного блока, называемого комментариями к сообщениям:

    Блок цикла запроса комментариев настроен так же, как цикл запроса, который вы использовали для отображения сообщений в блоге. Он извлекает комментарии для текущего поста или страницы и использует блок шаблона комментария в качестве контейнера для внутренних блоков.
    Внутренние блоки: аватар, имя автора комментария, дата комментария, ссылка на редактирование комментария, содержание комментария и ссылка на ответ на комментарий.


    Кроме того, есть блок пагинации комментариев и блок формы комментариев постов.

    Я предлагаю создать область комментариев под содержимым, внутри

    , добавив заголовок и затем используя стандартный цикл запроса комментариев.

     

    


 
    Комментарии

    Разметка для блоков комментариев немного сложнее, чем то, что я рассматривал до сих пор, поскольку включает несколько вложенных блоков. — Если вы не привыкли читать блочную разметку, легко растеряться и потеряться, пытаясь определить, где начинается и где заканчивается блок.

    Я рекомендую начать с добавления блока цикла запроса комментариев в редакторе блоков WordPress, а затем скопировать и вставить код в шаблон в редакторе кода.

    Позвольте мне показать вам внутренние блоки по умолчанию:
    Во-первых, у вас есть цикл запросов комментариев, который является родительским блоком, и шаблон комментариев:

     
<дел>

    • Шаблон комментария использует блок столбцов для отображения аватара автора комментария рядом с комментарием по горизонтали.

    Крайний левый столбец имеет атрибут ширины, установленный на 40 пикселей, чтобы соответствовать ширине аватара:

     

<дел>

flex-basis:40px  ">