Как создать динамические блоки в Elementor с помощью Custom Post Types

Автор: Михаил Комаров | Опубликовано: 16.12.2025

Если вы хотите расширить возможности своего сайта на WordPress и сделать контент более структурированным и гибким, отличным решением будет использование Custom Post Types (кастомных типов записей) в сочетании с плагином Elementor. В этой статье мы подробно разберём, как создавать динамические блоки, которые автоматически подхватывают данные из ваших кастомных типов записей и отображают их в удобном и стильном формате.

Что такое Custom Post Types и зачем они нужны в Elementor

По умолчанию WordPress предлагает стандартные типы записей — записи (posts) и страницы (pages). Но часто для организации контента этого недостаточно. Например, если вы ведёте сайт с каталогом товаров, портфолио, отзывами или событиями, удобно создать собственный тип записи с уникальными полями.

Custom Post Types позволяют создавать отдельные разделы сайта с собственными записями и логикой. Elementor, начиная с версии 2.5+, отлично работает с динамическими данными, и вы можете выводить поля из кастомных типов записей прямо в макете.

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

Как зарегистрировать кастомный тип записи в WordPress

Для начала нужно создать свой тип записи. Это можно сделать с помощью кода или с помощью плагинов. Ниже пример регистрации типа записи portfolio через код в файле functions.php темы или подключаемого плагина:

function wpelementor_register_cpt_portfolio() {
    $labels = array(
        'name' => 'Портфолио',
        'singular_name' => 'Проект',
        'add_new' => 'Добавить проект',
        'add_new_item' => 'Добавить новый проект',
        'edit_item' => 'Редактировать проект',
        'new_item' => 'Новый проект',
        'view_item' => 'Просмотреть проект',
        'search_items' => 'Поиск проектов',
        'not_found' => 'Проекты не найдены',
        'not_found_in_trash' => 'В корзине проектов не найдено',
    );

    $args = array(
        'labels' => $labels,
        'public' => true,
        'has_archive' => true,
        'supports' => array('title', 'editor', 'thumbnail', 'custom-fields'),
        'show_in_rest' => true, // для поддержки Gutenberg
    );

    register_post_type('portfolio', $args);
}
add_action('init', 'wpelementor_register_cpt_portfolio');

Этот код создаст новый тип записи «Портфолио» с поддержкой заголовка, содержимого, миниатюры и пользовательских полей.

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

Добавление пользовательских полей для динамического контента

Для каждого проекта в портфолио полезно добавить дополнительные данные: например, URL, дату, описание технологий и т.д. Для этого можно использовать плагин Advanced Custom Fields (ACF) или создать метаполя вручную.

Рассмотрим пример с ACF. Создайте группу полей, например, «Детали проекта», и добавьте поля:

URL проекта (тип: URL)
Технологии (тип: текст)
Дата завершения (тип: дата)

После этого поля будут доступны в редакторе записи типа «Портфолио».

Вывод динамических данных в Elementor

Откройте шаблон Elementor, в котором хотите вывести блок с проектом портфолио. Для этого обычно создают шаблон типа «Single» или «Archive» для вашего кастомного типа записи.

Чтобы вывести динамические данные, используйте виджет «Заголовок», «Текст», «Изображение» и в настройках выберите динамический источник — например, «Пользовательское поле» или «Заголовок записи».

Пример вывода URL проекта с помощью динамического тега:

Добавьте виджет «Кнопка».
В поле ссылки выберите динамическое содержимое — пользовательское поле URL.
Настройте текст кнопки, например, «Перейти на сайт».

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

Пример: кастомный вывод списка проектов с помощью кода и Elementor

Если нужно вывести список проектов на странице, можно написать собственный shortcode и вставить его в элемент Elementor «HTML» или «Текст». Пример кода для шорткода, который выводит 3 последних проекта:

function wpelementor_portfolio_list_shortcode() {
    $args = array(
        'post_type' => 'portfolio',
        'posts_per_page' => 3,
        'orderby' => 'date',
        'order' => 'DESC',
    );

    $query = new WP_Query($args);
    if (!$query->have_posts()) {
        return '<p>Проекты не найдены.</p>';
    }

    $output = '<div class="wpelementor-portfolio-list">';
    while ($query->have_posts()) {
        $query->the_post();
        $url = get_post_meta(get_the_ID(), 'url_proekta', true); // пример пользовательского поля
        $output .= '<div class="portfolio-item">';
        $output .= '<h3>' . get_the_title() . '</h3>';
        $output .= get_the_post_thumbnail(get_the_ID(), 'medium');
        $output .= '<p>' . get_the_excerpt() . '</p>';
        if ($url) {
            $output .= '<a href="' . esc_url($url) . '" target="_blank">Перейти на сайт</a>';
        }
        $output .= '</div>';
    }
    wp_reset_postdata();
    $output .= '</div>';

    return $output;
}
add_shortcode('wpelementor_portfolio_list', 'wpelementor_portfolio_list_shortcode');

Вставьте шорткод [wpelementor_portfolio_list] в Elementor через виджет «Текст» или «HTML» — и получите динамический список проектов.

Советы по оптимизации и совместимости

При создании кастомных типов записей и динамических блоков важно учитывать производительность. Для этого:

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

Альтернативные плагины для работы с динамическим контентом в Elementor

Кроме ACF и WPCPT, можно обратить внимание на следующие плагины, которые расширяют возможности динамического контента в Elementor:

Dynamic Content for Elementor — добавляет множество виджетов и функций для динамического вывода данных.
JetEngine — мощный инструмент для создания и управления кастомными типами записей, таксономиями и метаполями с поддержкой вывода через Elementor.
Pods — удобный плагин для создания и управления кастомными типами записей и полями.

Выбор зависит от ваших задач и уровня навыков, но базового функционала WordPress и Elementor с ACF и кастомными типами записи обычно достаточно для большинства проектов.

Итог

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

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