Объяснение цикла WordPress: что это такое и как это работает

Цикл — это центральная часть WordPress. Без него вы бы не увидели контент ни на одном сайте WordPress. Он отвечает за то, чтобы статьи отображались на странице блога и в архивах, а также статический контент на отдельных страницах.

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

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

Что такое цикл WordPress (и где его найти)?

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

Однако, почему это называется петлей в первую очередь?

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

Как часто запускается цикл WordPress?

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

Как выглядит цикл WordPress?

Чтобы было понятнее, о чем мы говорим, давайте рассмотрим пример и рассмотрим его шаг за шагом. Вот пример того, как выглядит простой цикл WordPress:

 if ( have_posts() ) : while ( have_posts() ) : the_post(); // Display content here endwhile; endif;

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

• if ( have_posts() ) : — Это оператор if , использующий функцию have_posts(). Если операторы распространены в программировании, они просто говорят «если выполняется следующее условие, продолжайте». В этом случае условием является have_posts() , что является простой проверкой существования каких-либо сообщений, которые можно было бы отобразить.
• while ( have_posts() ) : — Эта строка является циклом while и отмечает начало цикла WordPress. Он будет выполнять содержащийся в нем код до тех пор, пока его условие истинно. Опять же, условие заключается в том, есть ли у WordPress какие-либо записи в магазине. Как часто он будет возвращать true , определяется количеством сообщений, заданным в настройках WordPress в интерфейсе администратора.
• the_post(); — Это код, который выполняет цикл. Это функция WordPress, которая вызывает все доступные данные для следующего поста и сохраняет их, чтобы подготовить к отображению. Для этого у нас есть множество шаблонных тегов, о которых мы поговорим ниже.
• // Display content here — здесь мы размещаем разметку, которая определяет, какую часть контента отображать и каким образом. Обычно это смесь PHP и HTML. Мы не показываем его здесь, потому что он более сложный и мы рассмотрим его позже.
• endwhile; — Фрагмент кода, который закрывает цикл while после того, как он сделал то, что нам нужно.
• endif; — То же, что и выше, но для оператора if .

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

Альтернативный синтаксис

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

 if ( have_posts() ) { while ( have_posts() ) { the_post(); // Display content here } // end while } // end if

Это точно так же, как в примере выше, только в альтернативном синтаксисе PHP. Какой из них вы используете, действительно зависит от вас. Ради последовательности мы продолжим с первым вариантом.

Где найти цикл WordPress?

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

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

Например, если вы откроете файл page.php темы Twenty Twenty-One, вы увидите, что здесь цикл разбит на части. Хотя он начинается внутри самого файла, раздел, который определяет, как выводить данные, находится в части шаблона, называемой content-page.php .

 /* Start the Loop */ while ( have_posts() ) : the_post(); get_template_part( 'template-parts/content/content-page' ); // If comments are open or there is at least one comment, load up the comment template. if ( comments_open() || get_comments_number() ) { comments_template(); } endwhile; // End of the loop.

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

Это также означает, что цикл может выглядеть по-разному в отдельных файлах, то есть на разных страницах. Например, в архиве вы можете отображать только выдержки из сообщений, а на главной странице блога — сообщения целиком (вплоть до ссылки «подробнее»). Для этого вам нужны разные виды разметки, поэтому цикл не будет выглядеть одинаково внутри home.php и archive.php .

Как создать цикл

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

 if ( have_posts() ) : while ( have_posts() ) : the_post(); // Display content here endwhile; endif;

Сложная часть — это то, что мы упустили: часть, которая определяет отображение контента. Для этого, как уже упоминалось, вы обычно используете смесь HTML и PHP. Например, вот как вы скажете WordPress выдать сообщение, заключенное в <article> с пользовательским классом и идентификатором, заголовок в виде заголовка h1 , а также избранное изображение и контент.

 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <article <?php post_class(); ?>> <h1><?php the_title(); ?></h1> <?php the_post_thumbnail(); ?> <?php the_content(); ?> </article> <?php endwhile; endif; ?>

Одна вещь, которая выделяется выше, это то, что есть много тегов, написанных с подчеркиванием. Это теги шаблона WordPress, которые предлагают ярлыки для вызова общих частей контента. Здесь мы используем the_title() для отображения заголовка сообщения, the_post_thumbnail() для избранного изображения и the_content() для основного контента. Есть намного больше, например, the_excerpt() или the_category() . Вы можете найти список опций здесь.

Еще одна вещь, которая важна для цикла WordPress, — это условные теги. Вы видите, что они часто использовали разметку, связанную с циклами, чтобы отображать что-то только при определенных условиях. Например, очень часто the_post_thumbnail() в условный оператор, чтобы WordPress не пытался разместить ее на странице, когда не существует рекомендуемого изображения.

 <?php if ( has_post_thumbnail() ): the_post_thumbnail(); endif; ?>

У нас есть больше примеров ниже. Чтобы узнать больше об условных тегах, ознакомьтесь с Кодексом WordPress.

Примеры цикла WordPress

В заключительной части этого урока мы рассмотрим несколько примеров использования цикла WordPress.

Тема Двадцать двадцать одна

При взгляде на тему Twenty Twenty-One первое, что бросается в глаза, — это интенсивное использование частей шаблона. Все стандартные файлы шаблонов, такие как page.php , single.php и даже index.php , запускают цикл внутри файла, но затем используют get_template_part для переноса отображения содержимого в другие файлы. В данном случае это content-page.php , content-single.php и content.php соответственно. Вот укороченная версия single.php в качестве примера:

 <?php get_header(); /* Start the Loop */ while ( have_posts() ) : the_post(); get_template_part( 'template-parts/content/content-single' ); // additional code for comments and post navigation endwhile; // End of the loop. get_footer();

Это также видно и в других файлах. Например, верхний и нижний колонтитулы также имеют свои собственные части шаблона. Вы можете увидеть ссылки на те, что внутри цикла, в других местах. Например, если вы посмотрите на content-single.php , вы увидите вызов части шаблона author-bio.php в конце.

 <article <?php post_class(); ?>> <header class="entry-header alignwide"> <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?> <?php twenty_twenty_one_post_thumbnail(); ?> </header><!-- .entry-header --> <div class="entry-content"> <?php the_content(); wp_link_pages( array( 'before' => '<nav class="page-links" aria-label="' . esc_attr__( 'Page', 'twentytwentyone' ) . '">', 'after' => '</nav>', /* translators: %: Page number. */ 'pagelink' => esc_html__( 'Page %', 'twentytwentyone' ), ) ); ?> </div><!-- .entry-content --> <footer class="entry-footer default-max-width"> <?php twenty_twenty_one_entry_meta_footer(); ?> </footer><!-- .entry-footer --> <?php if ( ! is_singular( 'attachment' ) ) : ?> <?php get_template_part( 'template-parts/post/author-bio' ); ?> <?php endif; ?> </article><!-- #post-<?php the_ID(); ?> -->

Кроме того, это относительно стандартная ярмарка:

1. Откройте HTML-элемент <article> с пользовательским идентификатором и классом.
2. Создайте элемент заголовка статьи, который выводит заголовок, заключенный в заголовок h1, и отображает избранное изображение с помощью функции, настроенной для Twenty Twenty-One.
3. Затем добавьте элемент entry-content , который содержит тег шаблона the_content() для вывода контента с одним сообщением.
4. Включите разметку для разбиения на страницы и нижний колонтитул записи с другой функцией Twenty Twenty-One для отображения метаинформации поста.
5. Наконец, есть вышеупомянутый вызов биографии автора в отдельной части шаблона.

Тема Twenty Ten WordPress по умолчанию

Если вы вернетесь к первой теме WordPress по умолчанию, Twenty Ten, и воспользуетесь репозиторием subversion для просмотра файлов из версии 1.0, вы увидите, как со временем изменилась обработка файлов циклов и шаблонов. В то время многие файлы шаблонов содержали свои собственные полные циклы WordPress вместо того, чтобы передавать их повторно используемым частям шаблона. Вы можете ясно увидеть это в page.php темы.

 <?php get_header(); ?> <div> <div role="main"> <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?> <div <?php post_class(); ?>> <?php if ( is_front_page() ) { ?> <h2 class="entry-title"><?php the_title(); ?></h2> <?php } else { ?> <h1 class="entry-title"><?php the_title(); ?></h1> <?php } ?> <div class="entry-content"> <?php the_content(); ?> <?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?> <?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="edit-link">', '</span>' ); ?> </div><!-- .entry-content --> </div><!-- #post-## --> <?php comments_template( '', true ); ?> <?php endwhile; ?> </div><!-- #content --> </div><!-- #container --> <?php get_sidebar(); ?> <?php get_footer(); ?>

То же самое можно увидеть и в onecolumn-page.php , который управляет пользовательским шаблоном страницы, предлагаемым темой. Что также следует отметить, так это то, что он использует старый вызов цикла, который тогда был записан в одну строку.

 <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

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

Тема Twenty Ten также имеет отдельный файл loop.php , который слишком длинный, чтобы включать его сюда, не превышая лимит слов. Он разделен на три части, которые управляют отображением нескольких типов постов (галерея изображений, посты из категории Заметки , все остальные посты). Каждый из них далее разбит на операторы if и else для учета различных случаев, таких как страницы архива и поиска.

 <?php while ( have_posts() ) : the_post(); ?> <?php /* How to display posts of the Gallery format. The gallery category is the old way. */ ?> // Lots of code here <?php else : ?> // Lots of code here as well <?php endif; ?> <?php /* How to display posts of the Aside format. The asides category is the old way. */ ?> // Even more code <?php /* How to display all other posts. */ ?> <?php else : ?> // Still more code <?php else : ?> // A bit more markup <?php endif; ?> // And a bit more code <?php endif; // This was the if statement that broke the loop into three parts based on categories. ?> <?php endwhile; // End of the loop. Whew. ?>

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

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

 <?php endwhile; // End the loop. Whew. ?>

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

Вы можете не знать об этом, потому что это относительно новая функция Гутенберга, но редактор блоков (и, соответственно, полное редактирование сайта) теперь также имеет блок, содержащий цикл WordPress. Он называется блоком цикла запросов , и вы можете добавить его на свой сайт, как и любой другой блок. Самый простой способ — добавить косую черту и ввести ее имя, например /queryloop . Нажмите Enter, и он появится на странице.

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

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

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

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

Цикл WordPress в двух словах

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

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

Какое ваше любимое использование цикла WordPress? Пожалуйста, поделитесь своими мыслями в комментариях ниже!

Изображения: Джонни Гиос/Unsplash, Тайн Иванич/Unsplash