Практика ACF: собираем карточку книги и проверяем шаблон

У нас уже есть набор полей, форма для редактора и PHP-шаблон. Соберём их в простую карточку книги: обложка, название записи, автор, короткое описание, цена и кнопка. В процессе закрепим главное правило: ACF хранит значения, WordPress-шаблон оформляет их и решает, что показывать.

Подготовьте поля и шаблон

В группе «Данные книги» нужны поля book_author, book_summary, book_price, book_cover и book_shop_url. Если группа зарегистрирована в PHP, добавьте определения изображения и ссылки в её массив fields. Для изображения установите формат возврата ID, чтобы WordPress мог подобрать адаптивный размер.

В качестве заголовка используем обычный заголовок записи WordPress, а ACF оставим только для дополнительных данных. В подходящем PHP-шаблоне темы выведите:

<?php
$author   = get_field( 'book_author' );
$summary  = get_field( 'book_summary' );
$price    = get_field( 'book_price' );
$cover_id = get_field( 'book_cover' );
$shop_url = get_field( 'book_shop_url' );
?>

<article class="book-card">
    <h2 class="book-card__title"><?php echo esc_html( get_the_title() ); ?></h2>

    <?php if ( $cover_id ) : ?>
        <div class="book-card__cover">
            <?php echo wp_get_attachment_image( $cover_id, 'medium' ); ?>
        </div>
    <?php endif; ?>

    <?php if ( $author ) : ?>
        <p>Автор: <?php echo esc_html( $author ); ?></p>
    <?php endif; ?>

    <?php if ( $summary ) : ?>
        <p><?php echo esc_html( $summary ); ?></p>
    <?php endif; ?>

    <?php if ( $price !== null && $price !== '' ) : ?>
        <p>Цена: <?php echo esc_html( $price ); ?> ₽</p>
    <?php endif; ?>

    <?php if ( $shop_url ) : ?>
        <p>
            <a href="<?php echo esc_url( $shop_url ); ?>">Где купить</a>
        </p>
    <?php endif; ?>
</article>

the_title() — стандартная функция темы WordPress для заголовка текущей записи. Изображение выводится через wp_get_attachment_image(), что позволяет WordPress сформировать HTML изображения с подходящими вариантами размеров. Строковые значения экранируются именно перед выводом: текст — через esc_html(), URL — через esc_url().

Добавим стили без привязки к ACF

ACF отвечает за данные, а CSS — за расположение. Например, дочерняя тема может содержать такой базовый стиль:

.book-card {
  display: grid;
  gap: 1rem;
  max-width: 48rem;
  padding: 1.5rem;
  border: 1px solid #ddd;
  border-radius: 1rem;
}

.book-card__cover img {
  display: block;
  max-width: 100%;
  height: auto;
}

Вёрстку можно менять, не меняя имена полей. А значения можно заменить в редакторе, не переписывая CSS. Это разделение особенно удобно, когда контент обновляет редактор, а шаблон поддерживает разработчик.

Если шаблон не показывает нужное

Поле пустое. Проверьте значение в редакторе и условие, скрывающее блок для пустых полей.
Всегда пусто в PHP. Сверьте имя из name в группе с аргументом get_field(). Подпись поля не является его именем.
Изображение не выводится. Проверьте, какой формат возврата выбран: ID, массив или URL.
PHP-код виден как текст. Значит, фрагмент вставлен в контент записи вместо PHP-файла шаблона.
Странные пробелы или пустые подписи. Оберните вывод необязательных полей в проверку значения.

Что вы уже умеете

Вы создали поля в админке, научились получать их через get_field(), вывели текст, ссылку и изображение с подходящими функциями экранирования и зарегистрировали группу на PHP. Это базовый цикл работы с ACF: описать данные → заполнить их → вывести в шаблоне.

Для дальнейшей практики можно добавить новое поле, например издательство, или создать отдельный тип записи «Книги». Сначала задайте каждому значению понятное имя и тип, затем решите, где форма должна появляться, и только после этого добавляйте вывод в шаблон.

Содержание мини-курса

Куда двигаться дальше

Теперь можно превратить пример в настоящий каталог: выделить книгам отдельный тип записей, добавить список глав, хранить настройки полей в Local JSON и находить книги по цене.