Как создать тему для WordPress. Часть 3: вывод записей блога

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

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

В этом уроке мы приступаем к самому важному: настройке файла index.php.

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

Подготовка шаблона

Во-первых, удалите из файла index.php вывод второй записи, чтобы теги article были там только открывающий и закрывающий, и выводилась только одна статичная запись.

Добавляем функции и классы

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

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

После закрывающего тега article цикл завершим:

1	<?php endwhile; ?>

Теперь добавим к тегу article функцию post_class, которая добавляет генерируемые вордпрессом CSS-классы для поста:

1	<article <?php post_class(‘post’); ?> id=“post-<?php the_ID(); ?>“>

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

class="post post-484 type-post status-publish format-standard hentry category-uncategorized"

Те классы, которые уже были в шаблоне, нужно вставить внутри функции post_class(), например: post_class(‘post col-12 some-class’).

Вывод заголовка записи

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

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

1	<h2>Heading</h2>

Чтобы сделать его динамическим, то есть чтобы он автоматически брался из заголовка записи, добавим функцию the_title(), а чтобы заголовок был ссылкой на записи – the_permalink():

<h2>

<a href=“<?php the_permalink(); ?>“ rel=“bookmark”><?php the_title(); ?></a>

</h2>

Вывод даты поста

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

Вообще, в WordPress для вывода даты можно использовать несколько функцию the_date(), а для времени the_time(). Также я добавила вывод имени автора при помощи функции the_author():

1	<span>Posted on <time datetime=“<?php the_date();?>“><?php the_date();?> at <?php the_time();?></time> by <?php the_author();?></span>

Настройки формата даты и времени пользователь темы сможет осуществить через панель администратора в разделе “Настройки – Общие”.

Вывод текста записи

Сделать так, чтобы выводится текст записи, очень просто. Видите, немного ниже заголовка, начинаются теги p, внутри которых содержится текст? Они должны быть сразу после строки с изображением:

</figure>

Смело удаляйте теги p вместе с текстом, а также span с текстом “читать далее”, а на их место вставьте функцию the_content():

1	<?php the_content(); ?>

Если вы хотите, чтобы выводились анонсы записей, нужно написать the_excerpt();.

Функции подвала

Последнее, что нужно сделать, это добавить в файл footer.php перед закрывающим тегом body функцию wp_footer(). Эта функция подгружает скрипты, которые загружаются после основного контента страницы. Например, она позволяет выводить админ-бар (черную полосу с функциями, доступными администратору, вверху страницы).

<?php wp_footer(); ?>

</body>

</html>

Итоги

После всех изменений, файл index.php должен выглядеть вот так.

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

Подписывайтесь на RSS блога, или присоединяйтесь в фейсбуке, чтобы не пропустить обновления!