Это третий урок из серии о том, как создать собственную тему для WordPress. В нем вы узнаете, как создать цикл, который будет осуществлять вывод записей WordPress-блога, как добавить заголовок и дату публикации к каждой записи.
В этом уроке мы приступаем к самому важному: настройке файла 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():
1 2 3 |
<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, внутри которых содержится текст? Они должны быть сразу после строки с изображением:
1 2 3 |
<figure> <img class="thumbnail" src="http://placehold.it/650x250"> </figure> |
Смело удаляйте теги p вместе с текстом, а также span с текстом “читать далее”, а на их место вставьте функцию the_content():
1 |
<?php the_content(); ?> |
Если вы хотите, чтобы выводились анонсы записей, нужно написать the_excerpt();.
Функции подвала
Последнее, что нужно сделать, это добавить в файл footer.php перед закрывающим тегом body функцию wp_footer(). Эта функция подгружает скрипты, которые загружаются после основного контента страницы. Например, она позволяет выводить админ-бар (черную полосу с функциями, доступными администратору, вверху страницы).
1 2 3 |
<?php wp_footer(); ?> </body> </html> |
Итоги
После всех изменений, файл index.php должен выглядеть вот так.
Из этого урока вы узнали, как сделать вывод заголовка страницы, и вывод записей блога с названиями и датами. Пока что у нас не выводятся миниатюры записей, и для всех постов стоит стандартная миниатюра-заглушка. О том, как добавить к нашей теме поддержку миниатюр, вы узнаете в следующем уроке.
Подписывайтесь на RSS блога, или присоединяйтесь в фейсбуке, чтобы не пропустить обновления!