Wordpress Headless CMS и Laravel HTML проблема с рендерингом CSS с Elementor

Я пытаюсь отобразить ответ, который получаю через WP API, внутри представления лезвия с помощью Laravel: {!! $text !!} проблема, с которой я сталкиваюсь в данный момент, заключается в том, что ответ содержит внутренний CSS вместе с HTML, как вы можете видеть ниже. весь ответ:

"<style>.elementor-8 .elementor-element.elementor-element-0f0546d{--display:flex;--background-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-5556662{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--gap:0px 0px;--background-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-897f945{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--background-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-cfc8ec7{--width:500px;--transition:0.3s;}.elementor-8 .elementor-element.elementor-element-68774d6{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--background-transition:0.3s;}@media(min-width:768px){.elementor-8 .elementor-element.elementor-element-897f945{--width:50%;}.elementor-8 .elementor-element.elementor-element-68774d6{--width:50%;}}@media(max-width:1024px){.elementor-8 .elementor-element.elementor-element-cfc8ec7{--width:500px;}}@media(max-width:767px){.elementor-8 .elementor-element.elementor-element-cfc8ec7{--width:500px;}}</style>\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"8\" class=\"elementor elementor-8\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0f0546d e-flex e-con-boxed e-con e-parent\" data-id=\"0f0546d\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1d589be elementor-widget elementor-widget-heading\" data-id=\"1d589be\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>/*! elementor - v3.21.0 - 08-05-2024 */\n.elementor-heading-title{padding:0;margin:0;line-height:1}.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a{color:inherit;font-size:inherit;line-height:inherit}.elementor-widget-heading .elementor-heading-title.elementor-size-small{font-size:15px}.elementor-widget-heading .elementor-heading-title.elementor-size-medium{font-size:19px}.elementor-widget-heading .elementor-heading-title.elementor-size-large{font-size:29px}.elementor-widget-heading .elementor-heading-title.elementor-size-xl{font-size:39px}.elementor-widget-heading .elementor-heading-title.elementor-size-xxl{font-size:59px}</style><h2 class=\"elementor-heading-title elementor-size-default\">Teeeeest</h2>\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t<div class=\"elementor-element elementor-element-5556662 e-flex e-con-boxed e-con e-parent\" data-id=\"5556662\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fe7bf0d elementor-widget elementor-widget-text-editor\" data-id=\"fe7bf0d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>/*! elementor - v3.21.0 - 08-05-2024 */\n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}</style>\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>\t\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t<div class=\"elementor-element elementor-element-897f945 e-con-full e-flex e-con e-child\" data-id=\"897f945\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-dfb1139 elementor-widget elementor-widget-heading\" data-id=\"dfb1139\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Add Your Heading Text Here</h2>\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cfc8ec7 elementor-widget elementor-widget-text-path\" data-id=\"cfc8ec7\" data-element_type=\"widget\" data-settings=\"{&quot;text&quot;:&quot;Add Your Curvy Text Here&quot;,&quot;link&quot;:{&quot;url&quot;:&quot;&quot;,&quot;is_external&quot;:&quot;&quot;,&quot;nofollow&quot;:&quot;&quot;,&quot;custom_attributes&quot;:&quot;&quot;},&quot;start_point&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:0,&quot;sizes&quot;:[]}}\" data-widget_type=\"text-path.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"e-text-path\" data-text=\"Add Your Curvy Text Here\" data-url=\"//cms.test/wp-content/plugins/elementor/assets/svg-paths/wave.svg\" data-link-url=\"\"></div>\n\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t<div class=\"elementor-element elementor-element-68774d6 e-con-full e-flex e-con e-child\" data-id=\"68774d6\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c539c12 elementor-widget elementor-widget-image\" data-id=\"c539c12\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>/*! elementor - v3.21.0 - 08-05-2024 */\n.elementor-widget-image{text-align:center}.elementor-widget-image a{display:inline-block}.elementor-widget-image a img[src$=\".svg\"]{width:48px}.elementor-widget-image img{vertical-align:middle;display:inline-block}</style>\t\t\t\t\t\t\t\t\t\t<img src=\"https://cms.test/wp-content/plugins/elementor/assets/images/placeholder.png\" title=\"\" alt=\"\" loading=\"lazy\" />\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t"

HTML отображается нормально, хотя теги <style>, похоже, не отображаются, в результате чего внешний интерфейс не отображается так, как он должен отображаться.

Внутри контроллера у меня есть этот запрос API:

 $client = new Client();

 $res = $client->get('https://cms.test/wp-json/test/v2/posts/8/contentElementor');

 $text = json_decode($res->getBody()->getContents());

А внутри файла function.php в WordPress, чтобы получить только содержимое Elementor с внутренним CSS, я создал конечную точку:

add_action("rest_api_init", function () {

    register_rest_route(
          "test/v2"
        , "/posts/(?P<id>\d+)/contentElementor"
        , [
            "methods" => "GET",
            "callback" => function (\WP_REST_Request $req) {

                $contentElementor = "";

                if (class_exists("\\Elementor\\Plugin")) {
                    $post_ID = $req->get_param("id");

                  $pluginElementor = \Elementor\Plugin::instance();
                  $contentElementor = $pluginElementor->frontend->get_builder_content($post_ID, $with_css = true);
                }


                return $contentElementor;

            },
        ]
    );


});

Итак, в данном случае вопросов два: есть ли способ визуализировать стили, если нет, можем ли мы получить стили отдельно и каким-то образом визуализировать их внутри представления?

php laravel wordpress

10.05.2024 19:13

Стоит ли изучать PHP в 2023-2024 годах?

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

Symfony Station Communiqué - 7 июля 2023 г

Это коммюнике первоначально появилось на Symfony Station .

Оживление вашего приложения Laravel: Понимание режима обслуживания

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

Установка и настройка Nginx и PHP на Ubuntu-сервере

В этот раз я сделаю руководство по установке и настройке nginx и php на Ubuntu OS.

Коллекции в Laravel более простым способом

Привет, читатели, сегодня мы узнаем о коллекциях. В Laravel коллекции - это способ манипулировать массивами и играть с массивами данных. Благодаря...

Как установить PHP на Mac

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

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

После небольшого исследования и размышлений я в итоге использовал две функции PHP, которые разделяют HTML и CSS внутри контроллера.

$res = $client->get('https://cms.test/wp-json/test/v2/posts/id/contentElementor');

        $text = json_decode($res->getBody()->getContents());

        $styles = $this->getBetween($text, '<style>', '</style>');

        $text = $this->delete_all_between('<style>', '</style>', $text);

Получение между двумя строками стилей:

 public function getBetween($content, $start, $end) {
        $n = explode($start, $content);
        $result = Array();
        foreach ($n as $val) {
            $pos = strpos($val, $end);
            if ($pos !== false) {
                $result[] = substr($val, 0, $pos);
            }
        }
        return $result;
    }

Удаление стилей между двумя строками:

function delete_all_between($beginning, $end, $content) {
        $beginningPos = strpos($content, $beginning);
        $endPos = strpos($content, $end);
        if ($beginningPos === false || $endPos === false) {
          return $content;
        }
      
        $textToDelete = substr($content, $beginningPos, ($endPos + strlen($end)) - $beginningPos);
      
        return $this->delete_all_between($beginning, $end, str_replace($textToDelete, '', $content)); // recursion to ensure all occurrences are replaced
      }

Вид лезвия изнутри:

@push('css')

<style>
@foreach($styles as $s)
    {!! $s !!}
@endforeach
</style>

@endpush

Вот так мы получили HTML и CSS в отдельных переменных, готовых к использованию.

10.05.2024 23:16

Другие вопросы по теме

Сброс пароля не работает в laravel с filament php

Создание запроса API на Laravel с помощью Inertia

Когда я пытаюсь загрузить spatie/laravel-medialibrary:^10.0.0, я получаю сообщение

Компонент Inertia <Head> в Laravel добавляет суффикс «- Laravel» к заголовку

Laravel: замена параметров промежуточного программного обеспечения во вложенных маршрутах

Загрузка файла в реакции и laravel

Как дезинфицировать клиентский запрос к красноречивому методуwhereFullText в laravel

Как получить удаленный IP-адрес посетителей за балансировщиком нагрузки и Cloudflare, а также сделать удаленный IP-адрес доступным для Apache

Как переместить общую папку Laravel 11?

Laravel 11 — сеанс возвращает ноль, когда мы объявляем промежуточное ПО как глобальное промежуточное ПО, которое будет запускаться при каждом запросе

Wordpress Headless CMS и Laravel HTML проблема с рендерингом CSS с Elementor

Ответы 1

Другие вопросы по теме

Похожие вопросы