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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Итоги

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

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

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




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

  1. irocez

    А эти изменения подойдут для любого шаблона, или выборочно?

    Ответить
    • Ирина

      Кроме части про вывод даты поста – для любого.
      Естественно, не нужно полностью копировать все что у меня написано, если шаблон у Вас другой – Ваш HTML оставляете, PHP-функции добавляете.

      Ответить
  2. Pavel

    В WP я не эксперт, но не кажется ли Вам странным следующее:
    <article class="is-post is-post-excerpt" class="” id=”post-“>
    1. Два раза дублируется атрибут class
    2. ф-я “post_class();” уже выводит результат включающий “class=….”

    вот код API
    echo ‘class=”‘ . join( ‘ ‘, get_post_class( $class, $post_id ) ) . ‘”‘;

    Ответить
    • Ирина

      Да, спасибо, исправила ошибку.

      Ответить
      • tom

        Исправили , но не везде, в “Итоги” – не исправлено!
        и вторая ошибка, чтобы корректно отображался , у вас стоит не верный класс, должен быть class=”box post post-excerpt” , вместо class=”is-post is-post-excerpt”

        Ответить
  3. Димон

    Блин! Как-то поверхностно объяснено что куда и зачем подставляется. Всем нубам обязательно открывать справочник по функциям вордпресса.
    Кстати, правильная запись для тега article будет такой:
    <article id=”post-“>

    Ответить
    • Ирина

      Спасибо за комментарий, когда будет свободное время – распишу подробнее.
      Про правильную запись для тега article – не поняла, скорее всего, теги обрезались.

      Ответить
  4. Игорь

    Ваши статьи очень помогают мне, спасибо за труд!) учусь по ним работать да и вообще понимать суть вордпресса. Применяю знания на своем макете, дополнительно приходится гуглить некоторые вещи, т.к. макет сложный… но чувствуется уверенное движение к цели. Еще раз спасибо!

    Ответить
  5. Гриша

    Здравствуйте. Заметил у вас явную ошибку. В последнем блоке кода увидел теги и . Такого быть не должно. Открываться эти теги должны в файле header.php, а закрываться в файле footer.php. Пожалуйста, не смущайте новичков 🙂

    Ответить
  6. Андрей Зенков

    А вы не думали о том, чтобы создать видео уроки на тему создания? Очень мало вариантов в интернете, особенно современных

    Ответить
    • Ирина

      На самом деле, думала, но мне в последнее время вордпресс почти не интересен, и поэтому времени на это совершенно не хватает.

      Ответить
  7. Инесса

    Я в точности повторила ваши инструкции с самого начала, скопировала ваши файлы из этого урока в тему – и не получила повторения записи десять раз на странице. Где искать причину?

    Ответить
  8. Жека

    Здравствуйте. Если у меня в index выводятся рубрики, в какой файл мне нужно запихнуть вывод страниц?

    Ответить
    • Жека

      вопрос снят после перебора всех трех возможных вариантов))

      Ответить

Оставить комментарий