Wordpress

WordPress get template part: get_template_part() – Ищет и подключает указанный файл темы (сначала проверят файл в дочерней теме, если она есть).

13.02.2023

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

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

Шаблоны — это ваши базовые файлы. Урок начинается с 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 для

      и
      :

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

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

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

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

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

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

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

      до
      :

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

      ✋ Параметр типа макета был обновлен в Gutenberg версии 14.1 и WordPress 6.1 (выпуск запланирован на ноябрь 2022 г.). Есть два новых типа макета:

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

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

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

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

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

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

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

      Шаблон сообщения

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

       
<дел>

      • 

      • 

      • 

      • 

      • 

      • 

      • 

      • 

      • 

      •

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

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

      В примере кода я решил не отображать аватар автора сообщения, установив для параметра 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  ">