Как вставить элементы Elementor с помощью CSS и JS в пользовательский тип записи, используя wp_insert_post()?

Вопрос или проблема

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

Вот процесс, который я реализовал на данный момент:

Я написал функцию, которая:

  • Срабатывает, когда статус заказа изменяется на “выполнено”.
  • Генерирует уникальный слаг для каждого шаблона приглашения, используя название продукта и хэш, полученный из ключа заказа.
  • Извлекает контент Elementor из купленного продукта и вставляет его в новую кастомную запись типа edit-invitation.

Вот код моей функции:

function rudr_complete_for_status($order_id) {
    $order = wc_get_order($order_id);
    $order_key = $order->get_order_key();
    $order_key_part = substr($order_key, 9);

    foreach ($order->get_items() as $item_id => $item) {
        $product = $item->get_product();

        if ($product) {
            $product_id = $product->get_id();
            $formatted_product_name = strtolower(str_replace(' ', '-', $product->get_name()));
            $combined_string = $formatted_product_name . '-' . $order_key_part;
            $hashed_string = hash('sha256', $combined_string);

            // Retrieve Elementor content
            $post_content = \Elementor\Plugin::$instance->frontend->get_builder_content($product_id);

            // Insert new custom post with Elementor content
            wp_insert_post(array(
                'post_type'    => 'edit-invitation',
                'post_title'   => '#' . $order->get_id() . ' - ' . $order->get_billing_first_name() . ' ' . $order->get_billing_last_name() . ' - ' . $hashed_string,
                'post_name'    => $hashed_string,
                'post_content' => $post_content,
                'post_status'  => 'publish'
            ));
        }
    }
}
add_action('woocommerce_order_status_completed', 'rudr_complete_for_status');

Проблема:
HTML-элементы из Elementor успешно добавляются в записи edit-invitation. Однако соответствующие файлы CSS и JavaScript не включены, поэтому контент не отображается должным образом.

Я хочу включить файлы CSS и JavaScript Elementor, чтобы контент отображался корректно. Как я могу это сделать?

Вот мой файл single-edit-invitation.php:

<?php 

class ccg002_singleEditInvitationTemplate {
    static function ei_single_template($single_template_edit_invitation) {
        global $post;

        if ($post->post_type === 'edit-invitation') {
            // Load header
            wp_head();

            if (class_exists('Elementor\Plugin')) {
                echo \Elementor\Plugin::instance()->frontend->get_builder_content_for_display(the_content(), true);
            }

            // Load footer
                wp_footer();
    
                // Stop the default WordPress template rendering
                exit();
            }
    
            return $single_template_edit_invitation;
        }
    }
    
    ?>

Кто-нибудь знает, как включить все необходимые элементы Elementor (CSS и JS) для этих кастомных записей? Буду благодарен за любую помощь или предложения!

Ответ или решение

Чтобы интегрировать элементы Elementor с корректным отображением CSS и JavaScript в вашу пользовательскую запись типа "edit-invitation", необходимо убедиться, что нужные стили и скрипты загружаются в шаблоне. Ваш код уже хорошо организован для создания нового типа записи и вставки контента Elementor, но для решения проблемы с отсутствующими стилями и скриптами нужно предпринять дополнительные шаги.

Шаги для корректной загрузки CSS и JS

  1. Проверка существующих стилей и скриптов Elementor:
    Убедитесь, что все требуемые элементы загружаются на странице пользовательской записи. Так как Elementor использует специфические CSS и JS файлы для отображения контента, они должны быть явно включены в шаблон "single-edit-invitation.php".

  2. Добавление необходимых стилей и скриптов:
    Используйте хук wp_enqueue_scripts для загрузки нужных стилей и скриптов в шаблоне вашей пользовательской записи.

function enqueue_elementor_assets() {
    if ('edit-invitation' === get_post_type()) {
        // Осторожно добавьте стили и скрипты Elementor
        \Elementor\Plugin::instance()->frontend->enqueue_styles();
        \Elementor\Plugin::instance()->frontend->enqueue_scripts();
    }
}
add_action('wp_enqueue_scripts', 'enqueue_elementor_assets');
  1. Настройка шаблона для пользовательской записи:
    Убедитесь, что ваш шаблон single-edit-invitation.php корректно загружает все необходимые ресурсы:
<?php

function custom_single_template($single_template) {
    global $post;

    if ($post->post_type === 'edit-invitation' && class_exists('Elementor\Plugin')) {
        // Загружаем необходимые заголовок и стили
        get_header();
        \Elementor\Plugin::instance()->frontend->enqueue_styles();
        \Elementor\Plugin::instance()->frontend->enqueue_scripts();

        // Отображение контента через Elementor
        echo \Elementor\Plugin::instance()->frontend->get_builder_content_for_display($post->ID, true);

        // Подключаем футер
        get_footer();

        // Прерываем выполнение стандартного шаблона
        exit();
    }

    return $single_template;
}
add_filter('single_template', 'custom_single_template');

?>

SEO Оптимизация и Дополнительные Рекомендации

  • Оригинальность контента: Учитывайте, что уникальные заголовки и описания для каждой пользовательской записи могут повлиять на SEO. Используйте динамические переменные, такие как имя клиента или ID заказа, в заголовках и описаниях.

  • Повышение скорости загрузки: Убедитесь, что вы используете только необходимые скрипты и стили. Избыточная загрузка файлов может замедлить время загрузки страницы, что влияет на UX и SEO.

  • Мобильная оптимизация: Проверьте, что элементы Elementor корректно отображаются на мобильных устройствах.

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

Оцените материал
Добавить комментарий

Капча загружается...