Оглавление

Создание сайтов на WordPress часто требует большей гибкости, чем может предоставить стандартный функционал платформы. Advanced Custom Fields (ACF) — это инструмент, который позволяет разработчикам легко и удобно расширять возможности WordPress без необходимости глубокого вмешательства в код. Он предоставляет мощные возможности для создания и использования пользовательских полей, которые можно интегрировать в посты, страницы и пользовательские типы записей.

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

Введение

Advanced Custom Fields (ACF) — это must-have плагин для любого WordPress-разработчика. Он позволяет легко создавать пользовательские поля и настраивать их для каждой страницы или поста. Это полезно при создании сайтов с кастомной структурой, таких как:

  • Сайты портфолио.
  • Интернет-магазины с индивидуальными карточками товаров.
  • Корпоративные сайты с уникальными дизайнами страниц.
  • Блоги с изменяющимися макетами и блоками контента.

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

Шаг 1: Установка и настройка ACF

1.1 Установка плагина

Начнём с того, что добавим ACF на сайт WordPress. Это стандартная процедура:

  1. В административной панели WordPress перейдите в раздел Плагины → Добавить новый.
  2. Введите в поиске Advanced Custom Fields.
  3. Установите и активируйте плагин.

Теперь плагин готов к работе.

Шаг 2: Создание пользовательских полей

2.1 Зачем нужны пользовательские поля?

Пользовательские поля в ACF позволяют вам расширить стандартные возможности WordPress, добавляя кастомные поля к постам и страницам. Это может быть полезно в самых разных сценариях.

Пример 1: Сайт портфолио.

Допустим, вы создаёте сайт для фотографа. Для каждого проекта нужно добавлять уникальные данные, такие как:

  • Описание проекта.
  • Галерея изображений.
  • Ссылки на соцсети.
  • Дата завершения проекта.

С помощью ACF вы легко можете создать эти поля.

2.2 Создание первого набора полей

  1. Перейдите в ACF → Пользовательские поля → Добавить новый набор.
  2. Дайте набору полей название, например, «Детали проекта».
  3. Добавьте новые поля, выбрав типы данных, такие как:
  • Текстовое поле (для названия проекта).
  • Галерея (для фото).
  • URL (для ссылок на соцсети).
  • Дата (для даты завершения).

Пример реализации:

  1. Поле «Название проекта» — тип поля: Текст.
  2. Поле «Галерея» — тип поля: Галерея изображений.
  3. Поле «Ссылка на соцсети» — тип поля: URL.
  4. Поле «Дата завершения» — тип поля: Дата.

После этого вам нужно выбрать, где эти поля будут отображаться. Например, вы можете настроить так, чтобы они показывались только для записей типа «Проект».

Шаг 3: Использование полей в шаблонах страниц

Теперь, когда поля созданы, следующий шаг — вывести их на сайт. Это очень просто с ACF. Давайте разберём пример на реальной задаче.

Пример 2: Вывод информации на странице проекта

Вы создали кастомный пост-тайп для проектов, и теперь вам нужно выводить созданные поля в шаблоне страницы проекта. Вот как это сделать:

  1. Откройте файл шаблона, который отвечает за вывод записи проекта, например, single-project.php.
  2. Используйте функции ACF для вывода значений полей.
<?php if (get_field('название_проекта')): ?>
    <h1><?php the_field('название_проекта'); ?></h1>
<?php endif; ?>

<?php if (get_field('галерея')): ?>
    <div class="project-gallery">
        <?php the_field('галерея'); ?>
    </div>
<?php endif; ?>

<?php if (get_field('ссылка_на_соцсети')): ?>
    <a href="<?php the_field('ссылка_на_соцсети'); ?>" target="_blank">Соцсети</a>
<?php endif; ?>

<?php if (get_field('дата_завершения')): ?>
    <p>Дата завершения: <?php the_field('дата_завершения'); ?></p>
<?php endif; ?>

Объяснение кода:

  • get_field() — функция, которая получает значение пользовательского поля.
  • the_field() — выводит значение на странице.
  • Проверка наличия поля: Мы используем конструкцию if для того, чтобы выводить поле только если оно заполнено.

Это решение гибкое и адаптируемое для любых нужд.

Шаг 4: Применение пользовательских полей для гибких макетов

Одна из главных сильных сторон ACF — это возможность настраивать сложные и динамичные макеты страниц. Например, вы можете добавить гибкие блоки контента, которые можно редактировать в редакторе.

Пример 3: Сайт с динамическими блоками контента

Предположим, вы создаёте сайт для компании и хотите, чтобы каждая страница могла иметь динамичные блоки с информацией (баннеры, текстовые блоки, изображения, CTA кнопки). ACF позволяет создать такие блоки и управлять их выводом на каждой странице.

  1. Создайте новый набор полей с типом Flexible Content.
  2. Добавьте внутри этого блока несколько типов контента: текстовые блоки, изображения, галереи, CTA кнопки.
  3. В шаблоне страницы добавьте следующий код:
<?php if (have_rows('гибкие_блоки')): ?>
    <?php while (have_rows('гибкие_блоки')): the_row(); ?>

        <?php if (get_row_layout() == 'текстовый_блок'): ?>
            <div class="text-block">
                <?php the_sub_field('текст'); ?>
            </div>

        <?php elseif (get_row_layout() == 'изображение'): ?>
            <div class="image-block">
                <img src="<?php the_sub_field('изображение'); ?>" alt="Изображение">
            </div>

        <?php elseif (get_row_layout() == 'cta_кнопка'): ?>
            <a href="<?php the_sub_field('ссылка'); ?>" class="cta-button">
                <?php the_sub_field('текст_кнопки'); ?>
            </a>
        <?php endif; ?>

    <?php endwhile; ?>
<?php endif; ?>

Объяснение:

  1. Flexible Content — это особый тип поля в ACF, который позволяет создавать гибкие макеты страниц.
  2. have_rows() и the_row() — функции, которые используются для работы с динамическими блоками.
  3. get_row_layout() — проверяет, какой блок контента сейчас активен, и выводит соответствующий шаблон.

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

Шаг 5: Полезные советы для работы с ACF

  1. Избегайте лишней сложности: Планируйте структуру полей заранее. Слишком большое количество полей может усложнить управление сайтом.
  2. Используйте кэширование: Вывод данных из пользовательских полей может замедлять работу сайта при больших объёмах данных. Используйте кэширование для оптимизации.
  3. Создание пользовательских блоков для Gutenberg: ACF можно интегрировать с редактором блоков Gutenberg для создания кастомных блоков, которые можно вставлять в контент страницы.

Заключение

Advanced Custom Fields (ACF) — это один из самых мощных инструментов для кастомизации сайтов на WordPress. Он даёт разработчикам полный контроль над контентом, макетами и функциональностью страниц. С помощью ACF можно создавать уникальные страницы для любых нужд — от сайтов-портфолио до интернет-магазинов и корпоративных платформ.