Цикл WordPress является неотъемлемой частью того, как ваш сайт WordPress отображает контент. Если вы хотите иметь возможность настраивать некоторые части вашего сайта (или, может быть, окунуться в разработку WordPress), вам нужно знать о цикле WordPress.

Здесь мы разберем особенности использования цикла WordPress в php-шаблонах в классической теме в виде кода и в визуальном редакторе в блочной теме.

Что такое цикл WordPress?

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

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

Поэтому с точки зрения используемой вами темы цикл реализуется через PHP-код в классической теме или через блок Query Loop, который используют новые блочные темы WordPress.

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

  1. Сначала цикл проверит наличие каких-либо сообщений.
  2. Если есть сообщения, отобразится первое сообщение в соответствии с вашим шаблоном.
  3. Затем он проверит, существует ли другой пост. Если есть другой пост, он снова «зациклит» шаблон и покажет второй пост в соответствии с тем же шаблоном.
  4. Он продолжит «цикл» по вашим сообщениям до тех пор, пока не останется больше сообщений (или пока не будет достигнуто какое-либо другое ограничение, например, правила нумерации страниц).

Вот пример интерфейса того, как выглядит Loop из блога для строительного сайта, в котором каждый выделенный блок – это одна итерация цикла WordPress.

blog page

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

Когда WordPress использует цикл для отображения контента?

WordPress использует цикл для отображения контента на любой странице, содержащей несколько фрагментов контента (посты, страницы, пользовательские типы постов и т. д.).

Вы будете использовать цикл WordPress на таких страницах:

  • Домашняя страница сайта с последними сообщениями (index.php)
  • Страницы со списком категорий
  • Страницы со списком тегов
  • Страницы результатов поиска
  • Пользовательские страницы со списком типов записей
  • Продукты WooCommerce

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

Чаще всего, говоря о цикле WordPress, мы подразумеваем цикл, выводящий несколько однотипных элементов для отображения их в виде некоего списка. Кроме того, мы будем говорить об использовании WordPress Loop для классических тем.

Как использовать WordPress Loop с классическими темами

Разница между классической и блочной темой WordPress заключается в том, что в первой мы имеем набор php-файлов, а во второй - шаблоны на основе html-файлов + файл theme.json, в котором описаны настройки темы.

Код ниже подразумевает использование классической темы WordPress. Например, так выглядит очень простая реализация цикла WordPress:

Давайте разберем подробнее, что сюда входит.

Составные части цикла WordPress

Чтобы открыть цикл WordPress, вам понадобятся четыре элемента:

  • <?php ... ?>– блок PHP-кода.
  • if ( have_posts() )– это говорит вашему серверу, что он должен проверить, есть ли в базе данных вашего сайта какие-либо записи, соответствующие запросу, а затем выполнить следующий код, если записи есть. Если записей нет, вы можете использовать оператор else , чтобы добавить некоторый резервный текст, который мы рассмотрим ниже.
  • endif - это окончание блока проверки наличия постов.
  • while ( have_posts() )– запускаем цикл до тех пор, пока есть посты для отображения. Ограничение обычно устанавливается по вашему выбору в разделе Настройки → Чтение (чаще всего это 10 постов). То есть, если вы настроите свой сайт на отображение до 10 постов на странице, то цикл будет выводить 10 постов (если их не меньше этого количества).
  • endwhile - окончание цикла.
  • the_post();функция для извлечения данных для каждого поста из базы данных вашего сайта. Вы можете управлять отображением этих данных с помощью тегов шаблонов, которые мы рассмотрим в следующем разделе.
  • the_title(), the_post_thumbnail(), the_excerpt() или the_content() - это теги шаблона.
  • else - если постов для отображения нет (например, в одной из категорий)

Теги шаблона, которые вы используете внутри цикла, будут повторяться для каждого отображаемого поста. Разумеется, в реальном проекте, кроме функций WordPress, которые выводят заголовок, изображение записи или контент, вы еще будете использовать блочные или строчные html-теги, классы и т.п.

Вот некоторые из наиболее распространенных тегов шаблонов, которые вы, возможно, захотите использовать:

Если вы создаете много сайтов WordPress с разным контентом, вы можете включить данные из пользовательских полей в цикл WordPress. Самый простой способ сделать это — использовать плагин, такой как Advanced Custom Fields (ACF) , Meta Box или Pods , каждый из которых включает собственную функциональность для тегов шаблонов, которые вы можете использовать в цикле WordPress.

Еще один вариант с использованием внедрения php-кода в html-разметку:

Использование функции get_posts()

В том случае, если вам нужно вывести какие-то посты по определенным критериям, например, подобные посты или случайные, как в примере ниже, можно использовать функцию get_posts():

При использовании get_posts() в конце цикла обязательно нужно вызывать функцию wp_reset_postdata(). Она возвращает глобальную переменную $post в правильное состояние: в соответствие с текущей страницей. Иначе вы столкнетесь с сюрпризами при выведении ваших записей.

Использование условных операторов для управления поведением в цикле WordPress

Базовая структура цикла, представленная выше, не всегда может отобразить ваши дизайнерские идеи. Поэтому вам, скорей всего, придется использовать, условные функции, или теги WordPress. Они позволяют вам легко настроить поведение цикла для разных типов контента, например, для главной страницы или для страницы категории.

Вот некоторые условные теги, которые вы можете использовать:

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

Например, вот как может выглядеть применение другого стиля к постам в категории с идентификатором «8» с помощью функции in_category() и применения другого класса для <div> с этими постами.

 

Как использовать WordPress Loop в блочных темах

Если вы используете блочную тему, вместо классического цикла WordPress, описанного выше, вы будете использовать блок Query Loop. Для его создания вам не понадобится писать код - достаточно визуально отредактировать шаблон вашей темы. Тем не менее, основные принципы остаются такими же, то есть вы управляете тем, какие блоки и в какой последовательности будут выводиться для определенного типа записей.

По сути, вы будете использовать блок Query Loop, чтобы открыть цикл. Внутри блока Query Loop находится контейнер Post Template, а также контейнеры для пагинации и блока «нет результатов».

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

Как добавить блок Query Loop

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

Вам нужно перейти в редактор сайта ( Внешний вид → Редактор ) и создать или отредактировать соответствующий шаблон. В нашем примере это будет главная страница блога. Для ее редактирования вам надо перейти в редакторе внешнего вида в раздел Оформление, а затем  выбрать Шаблоны.

Редактор шаблонов

В самом шаблоне вам нужно нажать в нужном месте на плюс и добавить блок Query Loop. На русском языке он называется "Цикл запроса". Затем вы можете выбрать между использованием одного из существующих шаблонов Query Loop вашей темы, нажав Выбрать (Choose)  или "Начать с чистого листа" (англ. кнопка Start blank). Мы используем вторую кнопку.

Query Loop start

Затем мы выберем вариант "Заголовок и дата" . Внешний вид постов в этом случае будет таким:

Заголовок и дата

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

Если мы посмотрим на структуру шаблона в блоке "Цикл запроса" (Query Loop), то увидим, что в него входят вложенные блоки "Заголовок" и "Дата".

Структура цикла запроса

Настройки Query Loop

Вы можете управлять настройками Query Loop. Для выбранного нами варианта можно изменить, например, количество столбцов, нажав на кнопку в виде сетки в панели управления блока с циклом. Справа в панели настроек вы можете указать количество столбцов.

Настройки блока цикла запроса
Кроме того, вы можете поменять внешний вид цикла запроса, добавив в него изображение записи. Для этого нужно выделить блок "Цикл запроса" и нажать на кнопку "Заменить" (Change).
Меняем структуру Query Loop
Тут же можно указать в одном месте текст ссылки "Читать далее", который потом отобразиться для всех постов цикла.

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

Настройки внутренних блоков цикла

На боковой панели блока «Цикл запроса» вы сможете использовать настройки, чтобы управлять тем, какой контент вы хотите включить в цикл ("Тип запроса").

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

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

Как изменить шаблон Query Loop

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

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

Добавляем дату в цикл

В разделе блоков Тема вы также найдете другие блоки для нужных вам элементов, такие как имя автора, рубрики (категории), метки (теги) и т. д.

Используя структуру цикла в виде списка, вы можете менять варианты вывода поста внутри шаблона  по своему вкусу и разумению. Например, мы можем вынести изображение записи вверх, заголовок и дату разместить слева, а отрывок - справа.
Меняем шаблон вывода постов

Экспериментируйте и учитесь в локальной среде разработки

Если вы впервые работаете с циклом WordPress, вам, вероятно, захочется поэкспериментировать и поиграться с различными его вариантами, чтобы лучше понять, как он работает.

Поскольку Loop является неотъемлемой частью WordPress, любая ошибка или промах может вызвать проблемы на вашем сайте. Это особенно актуально, если вы работаете с PHP-шаблонами, поскольку синтаксические ошибки даже в виде отсутствующей точки с запятой могут вызвать сообщение «На вашем сайте произошла критическая ошибка» .

Чтобы сделать это безопасно, вы можете установить WordPress на локальном компьютере на OpenSever или на LocalWP, и проверять все свои идеи в безопасной «песочнице», не изменяя внешний вид реального сайта.

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

Автор: Alex

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *