Что такое стандартный цикл WordPress?

Видео урока

Стандартный цикл WordPress это программный код, который позволяет соединить данные записей, хранящиеся в Базе Данных вашего сайта с файлами шаблона активной темы.

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

Рассмотрим стандартный цикл WP на примере файла index.php. Это обязательный файл, он присутствует в любой теме. Если открыть код дефолтной темы «Двадцать-двадцать», мы увидим, что он не очень-то прост для восприятия. Поэтому вместо 2020 активируем учебную тему Zero WP с минимальным количеством файлов и кода. Особенность данной темы в том, что помимо понятного кода, файл index.php будет использоваться в качестве шаблона для всех разделов сайта.

Сравнение index.php Twenty Twenty и Zero WP

<?php get_header(); ?>
<?php while( have_posts() ): the_post(); ?>
	<div class="post-wrapper">
		<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
		<div><?php the_content(); ?></div>
	</div>	
<?php endwhile; ?>
<?php get_footer(); ?>

<?php get_header(); ?>
<main id="site-content" role="main">
	<?php

	$archive_title    = '';
	$archive_subtitle = '';

	if ( is_search() ) {
		global $wp_query;

		$archive_title = sprintf(
			'%1$s %2$s',
			'<span class="color-accent">' . __( 'Search:', 'twentytwenty' ) . '</span>',
			'“' . get_search_query() . '”'
		);

		if ( $wp_query->found_posts ) {
			$archive_subtitle = sprintf(
				/* translators: %s: Number of search results. */
				_n(
					'We found %s result for your search.',
					'We found %s results for your search.',
					$wp_query->found_posts,
					'twentytwenty'
				),
				number_format_i18n( $wp_query->found_posts )
			);
		} else {
			$archive_subtitle = __( 'We could not find any results for your search. You can give it another try through the search form below.', 'twentytwenty' );
		}
	} elseif ( ! is_home() ) {
		$archive_title    = get_the_archive_title();
		$archive_subtitle = get_the_archive_description();
	}

	if ( $archive_title || $archive_subtitle ) {
		?>

		<header class="archive-header has-text-align-center header-footer-group">

			<div class="archive-header-inner section-inner medium">

				<?php if ( $archive_title ) { ?>
					<h1 class="archive-title"><?php echo wp_kses_post( $archive_title ); ?></h1>
				<?php } ?>

				<?php if ( $archive_subtitle ) { ?>
					<div class="archive-subtitle section-inner thin max-percentage intro-text"><?php echo wp_kses_post( wpautop( $archive_subtitle ) ); ?></div>
				<?php } ?>

			</div><!-- .archive-header-inner -->

		</header><!-- .archive-header -->

		<?php
	}

	if ( have_posts() ) {

		$i = 0;

		while ( have_posts() ) {
			$i++;
			if ( $i > 1 ) {
				echo '<hr class="post-separator styled-separator is-style-wide section-inner" aria-hidden="true" />';
			}
			the_post();

			get_template_part( 'template-parts/content', get_post_type() );

		}
	} elseif ( is_search() ) {
		?>

		<div class="no-search-results-form section-inner thin">

			<?php
			get_search_form(
				array(
					'label' => __( 'search again', 'twentytwenty' ),
				)
			);
			?>

		</div><!-- .no-search-results -->

		<?php
	}
	?>

	<?php get_template_part( 'template-parts/pagination' ); ?>

</main><!-- #site-content -->

<?php get_template_part( 'template-parts/footer-menus-widgets' ); ?>

<?php get_footer(); ?>

Давайте посмотрим, как изменился внешний вид нашего сайта:

Теперь заглянем в код

Конструкция while ( have_posts() ): the_post(); endwhile; и является Стандартным циклом WordPress. Давайте разберем из чего она состоит. while() — оператор цикла в языке php, цикл будет повторяться, пока выполняется условие в скобках. В нашем случае, условие в скобках это нативная функция WordPress have_posts(), которая проверяет наличие и подгружает из базы те записи, которые относятся к данной странице сайта. Вторая функция the_post() также является нативной и обязательной. Функция по очереди перебирает записи, полученные с помощью have_posts() и помещает по одной за цикл данные поста в глобальную переменную $post. 

Если случайно забыть функцию the_post(), то цикл станет бесконечным, и вы получите ошибку на странице, перегрузив возможности сервера.

Дополнительные функции

Внутри цикла WordPress доступны функции, которые получают данные текущего (в цикле) поста и выводят результат в html. Давайте познакомимся с некоторыми из основных функций. Первые 3 функции вы уже видели в коде index.php.

  • the_permalink() — выводит url данной записи
  • the_title() — выводит заголовок записи
  • the_content() — выводит содержание записи

Давайте добавим к ним еще 3 функции

  • the_date() — выводит дату публикации записи
  • the_category() — выводит категории записи
  • the_post_thumbnail() — выводит изображение записи

Получим следующий код:

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

	<div class="post-wrapper">
		<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
		<h2><?php the_date(); ?> <?php the_category(); ?></h2>
		<div><?php the_post_thumbnail(); ?><?php the_content(); ?></div>
	</div>	
	
<?php endwhile; ?>
<?php get_footer(); ?>

И результат:

Выводы

Получается, что поняв принцип работы цикла Вордпресс вы легко переведете статическую верстку в динамический шаблон. Для этого вы берете один из элементов (например карточку поста), вставляете внутрь цикла, а затем заменяете текст внутри тегов на php-функции.