Цикл WordPress является неотъемлемой частью того, как ваш сайт WordPress отображает контент. Если вы хотите иметь возможность настраивать некоторые части вашего сайта (или, может быть, окунуться в разработку WordPress), вам нужно знать о цикле WordPress.
Здесь мы разберем особенности использования цикла WordPress в php-шаблонах в классической теме в виде кода и в визуальном редакторе в блочной теме.
Что такое цикл WordPress?
WordPress Loop — это возможность вывести записи WordPress, то есть основной контент вашего сайта. это способ отображения схожей информации в повторе. Фактически цикл записей — это серия постов блога с общими атрибутами, такими как заголовок, изображение записи, имя автора, дата публикации и краткое описание.
Технически WordPress Loop запрашивает базу данных вашего сайта, чтобы получить данные для каждого поста, а затем отображает эти данные в соответствии с шаблоном. Для управления этим шаблоном вы можете использовать различные теги шаблонов или блоки.
Поэтому с точки зрения используемой вами темы цикл реализуется через PHP-код в классической теме или через блок Query Loop, который используют новые блочные темы WordPress.
Предположим, что у вас есть страница, на которой перечислены последние записи вашего блога, т.е. страница блога, или страница записей:
- Сначала цикл проверит наличие каких-либо сообщений.
- Если есть сообщения, отобразится первое сообщение в соответствии с вашим шаблоном.
- Затем он проверит, существует ли другой пост. Если есть другой пост, он снова «зациклит» шаблон и покажет второй пост в соответствии с тем же шаблоном.
- Он продолжит «цикл» по вашим сообщениям до тех пор, пока не останется больше сообщений (или пока не будет достигнуто какое-либо другое ограничение, например, правила нумерации страниц).
Вот пример интерфейса того, как выглядит Loop из блога для строительного сайта, в котором каждый выделенный блок – это одна итерация цикла WordPress.
Вы можете видеть, что все шесть блоков используют один и тот же шаблон.
Когда WordPress использует цикл для отображения контента?
WordPress использует цикл для отображения контента на любой странице, содержащей несколько фрагментов контента (посты, страницы, пользовательские типы постов и т. д.).
Вы будете использовать цикл WordPress на таких страницах:
- Домашняя страница сайта с последними сообщениями (index.php)
- Страницы со списком категорий
- Страницы со списком тегов
- Страницы результатов поиска
- Пользовательские страницы со списком типов записей
- Продукты WooCommerce
Технически WordPress также может использовать Loop для отображения отдельного фрагмента контента. В этом случае цикл закончится сразу после того, как он запросит и получит первый элемент.
Чаще всего, говоря о цикле WordPress, мы подразумеваем цикл, выводящий несколько однотипных элементов для отображения их в виде некоего списка. Кроме того, мы будем говорить об использовании WordPress Loop для классических тем.
Как использовать WordPress Loop с классическими темами
Разница между классической и блочной темой WordPress заключается в том, что в первой мы имеем набор php-файлов, а во второй - шаблоны на основе html-файлов + файл theme.json, в котором описаны настройки темы.
Код ниже подразумевает использование классической темы WordPress. Например, так выглядит очень простая реализация цикла WordPress:
1 2 3 4 5 6 7 8 9 10 11 12 | <?php if ( have_posts() ) : // проверяем наличие постов while ( have_posts() ) : the_post(); // открываем цикл the_title( '<h2>', '</h2>' ); the_post_thumbnail(); the_excerpt(); endwile; else: // если постов нет _e( 'Sorry, no posts matched your criteria.', 'theme_textdomain' ); endif; ?> |
Давайте разберем подробнее, что сюда входит.
Составные части цикла 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-теги, классы и т.п.
Вот некоторые из наиболее распространенных тегов шаблонов, которые вы, возможно, захотите использовать:
the_title()
the_content()
the_excerpt()
the_post_thumbnail()
the_author()
previous_posts_link()
илиnext_post_link()
the_ID()
илиget_the_ID()
the_permalink()
the_date()
the_tags()
the_time()
previous_post_link()
the_category()
Если вы создаете много сайтов WordPress с разным контентом, вы можете включить данные из пользовательских полей в цикл WordPress. Самый простой способ сделать это — использовать плагин, такой как Advanced Custom Fields (ACF) , Meta Box или Pods , каждый из которых включает собственную функциональность для тегов шаблонов, которые вы можете использовать в цикле WordPress.
Еще один вариант с использованием внедрения php-кода в html-разметку:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <?php // проверка наличия постов if (have_posts()) : // начало цикла while ( have_posts() ) : the_post(); // повторяющийся код для каждого поста ?> <h2 id="post-<?php the_ID(); ?>"> <a href="<?php the_permalink() ?>" rel="bookmark" title="Ссылка на <?php the_title(); ?>"><?php the_title(); ?></a> </h2> <p class="date-author">Опубликовано: <?php the_date(); ?> | Автор: <?php the_author(); ?></p> <?php the_content(); ?> <p class="postmetadata">Категория: <?php the_category(); ?> | Теги: <?php the_tags(); ?> | <a href="<?php comments_link(); ?>" title="Оставьте комментарий">Комментарии</a></p> <?php // окончание цикла, когда посты закончились endwhile; // Если посты не найдены else : ?> <p>Извините, но записей пока нет.</p> <?php endif;?> |
Использование функции get_posts()
В том случае, если вам нужно вывести какие-то посты по определенным критериям, например, подобные посты или случайные, как в примере ниже, можно использовать функцию get_posts()
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <ul> <?php $args = array( 'posts_per_page' => 5, 'orderby' => 'rand' ); $random_posts = get_posts($args); foreach ($random_posts as $post) : setup_postdata($post); ?> <li> <a href="<?php the_permalink(); ?>"> <?php the_title(); ?> </a> </li> <?php endforeach; wp_reset_postdata(); ?> </ul> |
При использовании get_posts()
в конце цикла обязательно нужно вызывать функцию wp_reset_postdata()
. Она возвращает глобальную переменную $post в правильное состояние: в соответствие с текущей страницей. Иначе вы столкнетесь с сюрпризами при выведении ваших записей.
Использование условных операторов для управления поведением в цикле WordPress
Базовая структура цикла, представленная выше, не всегда может отобразить ваши дизайнерские идеи. Поэтому вам, скорей всего, придется использовать, условные функции, или теги WordPress. Они позволяют вам легко настроить поведение цикла для разных типов контента, например, для главной страницы или для страницы категории.
Вот некоторые условные теги, которые вы можете использовать:
is_home()
is_admin()
is_single()
is_page()
is_page_template()
is_category()
илиin_category()
is_tag()
is_author()
is_search()
is_404()
has_excerpt()
Если вы нажмете на ссылки выше, вы увидите примеры кода того, как можно изменить цикл WordPress для различных типов условий.
Например, вот как может выглядеть применение другого стиля к постам в категории с идентификатором «8» с помощью функции in_category() и применения другого класса для <div> с этими постами.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <?php // Начинаем цикл. if ( have_posts() ) : while ( have_posts() ) : the_post(); /* Проверяем, находится ли пост в категории с id 8. * если это так, то div будет иметь атрибут class="theme-category-post". * иначе div будет с атрибутом class="post". */ if ( in_category( 8 ) ) : ?> <div class="theme-category-post"> <?php else : ?> <div class="post"> <?php endif; // Отображаем заголовок поста. the_title( '<h2 class="entry-post">', '</h2>' ); // Отображаем ссылку на посты того же автора. printf( __( 'Posted by %s', 'theme_textdomain' ), get_the_author_posts_link() ); // Отображаем контент в div. ?> <div class="entry"> <?php the_content() ?> </div> <div class="posted-in-category"> <?php // Отображаем список категорий, в которых опубликован пост. _e( 'Posted in ', 'theme_textdomain' ); the_category( ', ' ); // закрываем тегe class of "post" или "theme-category-post" ?> </div> </div> <?php // Заканчиваем цикл endwhile; else : //Если нет постов для отображения, выводим сообщение _e( 'Sorry, no posts matched your criteria.', 'theme_textdomain' ); //Окончание цикла endif; ?> |
Как использовать 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), то увидим, что в него входят вложенные блоки "Заголовок" и "Дата".
Настройки Query Loop
Вы можете управлять настройками Query Loop. Для выбранного нами варианта можно изменить, например, количество столбцов, нажав на кнопку в виде сетки в панели управления блока с циклом. Справа в панели настроек вы можете указать количество столбцов.
Кроме того, вы можете поменять внешний вид цикла запроса, добавив в него изображение записи. Для этого нужно выделить блок "Цикл запроса" и нажать на кнопку "Заменить" (Change).
Тут же можно указать в одном месте текст ссылки "Читать далее", который потом отобразиться для всех постов цикла.
Для изображений и контента можно настроить ширину колонок, которые содержат внутри изображение и отрывок статьи. Для заголовка или текста можно выбрать настройки цвета, размера шрифта, отступов, рамок.
На боковой панели блока «Цикл запроса» вы сможете использовать настройки, чтобы управлять тем, какой контент вы хотите включить в цикл ("Тип запроса").
По умолчанию он будет перечислять обычные посты, но вы можете изменить тип поста, чтобы перечислить другие типы контента, например, страницы, если они у вас являются главными элементами структуры сайта.
Вы также можете изменить порядок и использовать фильтры, чтобы запрашивать только определенные части контента, например контент, имеющий определенную рубрику, исходящий от определенного автора и т. д.
Как изменить шаблон Query Loop
Вы также можете использовать блоки в разделе Тема для дальнейшей настройки выбранного шаблона внутри Цикла запросов. Опять же, эти блоки служат той же основной цели, что и теги шаблонов в коде PHP.
Например, если вы хотите отобразить дату публикации для каждого поста, вы можете добавить блок "Дата" в то место, где вы хотите, чтобы она отображалась. Чаще всего это место находится под заголовком поста.
В разделе блоков Тема вы также найдете другие блоки для нужных вам элементов, такие как имя автора, рубрики (категории), метки (теги) и т. д.
Используя структуру цикла в виде списка, вы можете менять варианты вывода поста внутри шаблона по своему вкусу и разумению. Например, мы можем вынести изображение записи вверх, заголовок и дату разместить слева, а отрывок - справа.
Экспериментируйте и учитесь в локальной среде разработки
Если вы впервые работаете с циклом WordPress, вам, вероятно, захочется поэкспериментировать и поиграться с различными его вариантами, чтобы лучше понять, как он работает.
Поскольку Loop является неотъемлемой частью WordPress, любая ошибка или промах может вызвать проблемы на вашем сайте. Это особенно актуально, если вы работаете с PHP-шаблонами, поскольку синтаксические ошибки даже в виде отсутствующей точки с запятой могут вызвать сообщение «На вашем сайте произошла критическая ошибка» .
Чтобы сделать это безопасно, вы можете установить WordPress на локальном компьютере на OpenSever или на LocalWP, и проверять все свои идеи в безопасной «песочнице», не изменяя внешний вид реального сайта.
Кроме того, если вы не хотите тратить время на разработку собственной темы или доработку существующей или столкнулись с проблемами, которые не можете решить самостоятельно, то взамен можете использовать плагины-конструкторы для WordPress.