Создаем тему WordPress на базе статического HTML: Добавляем цикл

Данная статья является 4 из 5 частей цикла «Создаем тему WordPress на базе статического HTML».

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

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

На данный момент ваша тема содержит только один основной файл шаблона — index.php — поэтому мы добавляем цикл для него.

Что вам потребуется:

  • Редактор по вашему выбору;
  • Браузер для проверки результатов;
  • Графический редактор, чтобы сохранить скриншот вашей темы в нужном разрешении;
  • Установленный WordPress, на локальном или удаленном сервере;
  • Если вы работаете на локальном сервере, вам потребуется MAMP , WAMP или LAMP, чтобы активировать тему WordPress;
  • Если вы работаете удаленно, вам потребуется FTP доступ к вашему сайту, плюс права доступа администратора к установленному WordPress.

1. Добавление страницы в WordPress

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

Я хочу создать страницу под названием «Главная», добавить в нее фиктивное содержимое, а затем отредактировать «Настройки чтения», чтобы она являлась домашней страницей, а не постом в ленте сообщений блога.

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

Итак, приступаем. Создаем страницу, вставляем в нее (если хотите) несколько изображений и устанавливаем в «Настройках чтения» соответствующие опции для того, чтобы данная страница являлась главной страницей вашего сайта.

2. Добавление цикла

После того, как вы создали новую страницу, откройте ее в браузере. Вы увидите, что ничего не изменилось — WordPress не отображает содержание вашей страницы.

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

Откройте файл index.php. После открытия блока .content и до открытия тега <article> добавьте следующий код:

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

Теперь после закрытия тега <article> добавьте:

<?php endwhile; ?>

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

Если вы находитесь на странице архива, он перебирает все релевантные записи либо последние записи на главной странице блога, или записи в заданной категории на странице категории.

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

3. Классы и идентификаторы для статьи

Открывающий тег <article> может содержать классы и идентификатор, который автоматически генерируются WordPress. Позже, если потребуется, вы сможете использовать их, чтобы задать CSS записи или страницы.

Найдите открывающийся тег <article>:

<article class="post" id="01">

Отредактируйте его следующим образом:

<article class="<?php post_class(); ?>" id="post-<?php the_ID(); ?>">

Две функции, которые мы добавили, делают следующее:

the_ID() — добавляет к элементу article класс, который является уникальным идентификатором, привязанным к отображаемой записи или странице;
post_class — добавляет к элементу article ряд классов, включая категорию записи, тип записи и некоторые другие.

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

4. Добавление заголовка страницы или записи через цикл

Следующий элемент, который должен выводиться в вашей записи или странице — это заголовок. В существующем коде это статический заголовок внутри тега <h2>.

Найдите в своем шаблоне следующую строку кода:

<h2 class="entry-title">Это заголовок записи или страницы</h2>

Отредактируйте ее следующим образом:

<h2 class="entry-title"><a title="<?php printf( esc_attr__( 'Permalink to %s', 'compass' ), the_title_attribute( 'echo=0' ) ); ?>" href="<?php the_permalink(); ?>" rel="bookmark">
    <?php the_title(); ?>
</a></h2>

Этим фрагментом кода добавляются две вещи:

  • Ссылка на саму запись или страницу (через the_permalink()). Это полезная функция для страниц архивов, пользователи могут кликать на сам заголовок, чтобы перейти на страницу записи;
  • Заголовок записи или страницы, который будет автоматически выводиться WordPress.

5. Добавление метаданных записи

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

Найдите эту строку кода (или весь код внутри первого элемента section: это зависит от вашей темы):

Опубликовано 5 ноября Рэйчел МакКоллин

Замените ее следующим кодом:

Опубликовано <?php the_date(); ?> <?php the_author(); ?>

Вы добавляете два тега шаблонов:

  • Дата публикации записи, используя the_date()
  • Автор записи, используя the_author()

6. Добавление содержимого записи

Самое главное обеспечить отображение содержимого записи или страницы, это делается с помощью одного простого тега the_content().

Найдите раздел с классом .entry-content и удалите его содержимое. Замените его тегом the_content(), чтобы весь раздел выглядел таким образом:

<section class="entry-content"><?php the_content(); ?></section><!-- .entry-content -->

7. Дополнительные метаданные записи

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

Вы можете не включать данную опцию в зависимости от специфики вашего проекта и используемых категорий или тегов.

Удалите содержимое последнего раздела с классом .entry-meta и замените его, чтобы весь раздел выглядел следующим образом:

<section class="entry-meta"><?php if ( count( get_the_category() ) ) : ?>
    <span class="cat-links">
        Категории: <?php echo get_the_category_list( ', ' ); ?>
    </span>
<?php endif; ?></section><!-- .entry-meta -->

Думаю, стоит разобраться в этой записи подробнее, так как это самый длинный фрагмент PHP из всех, что вы добавляли до сих пор.

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

После этого открывается элемент span и внутри него через echo get_the_catgeory_list() выводится список категорий записи. Использование echo важно, так как без него функция get_the_category_list() не смогла бы вывести список, она бы просто получила доступ к нему, но не делала бы ничего больше.

И, наконец, endif закрывает цикл if, и WordPress может перейти к обработке следующей части кода.

Теперь сохраните ваш файл index.php, вернитесь в браузер и обновите главную страницу сайта. Теперь она должна выглядеть так, как показано на рисунке ниже:

главная страницу сайта

Как вы можете видеть, у нас выводятся следующие элементы:

  • Заголовок страницы;
  • Дата и автор;
  • Содержание страницы;
  • Список категорий не отображается, так как это страница, а не запись, а страницы по умолчанию не относятся к категориям.

Пример записи с выводимым списком категорий вы увидите в следующих статьях этой серии.

Обратите внимание, что характерное изображение пока не отображается — мы исправим это в части 10 данной серии.

Заключение

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

Следующим шагом будет редактирование файла header.php, для того чтобы включить в него некоторые обращения, а также несколько тегов шаблонов.

Перевод статьи «Creating a WordPress Theme From Static HTML: Adding a Loop» был подготовлен дружной командой проекта Сайтостроение от А до Я.