Как корректно загрузить страницу elementor через ajax?
Здравствуйте, возникла следующая проблема: пытаюсь загрузить страницу (или шаблон), сделанную через elementor
(визуальный редактор для wordpress) через ajax. Функция, возвращающая страницу, выглядит примерно так:
echo \Elementor\plugin::instance()->frontend->get_builder_content( $template_id, true );И полученная страница практически корректно отображается (html и css код страницы), за исключением динамических элементов, которым нужен js (напр., слайдер, галерея) — они не отображаются и соответственно работать не будут.
Есть ли способ корректно отобразить все содержимое с динамикой?
- Вопрос задан более трёх лет назад
- 315 просмотров
Ajax загрузка шорткодов в wordpress
Поделитесь опытом как правильно вызывать шорткоды сгенерированные плагинами,темой в WordPress. Зачем нужно: Имею WordPress + плагин elementor + JupiterX тему. В elementor можно создавать шаблоны блоков/секций и получать их шорткод для вызова. Пример шорткода [elementor-template ] . По клику на кнопку хочу вызывать AJAX нужную секцию (секция содержит слайдеры, табы, посты) и вставить ее в тело страницы. Читал кодекс wordpress https://codex.wordpress.org/AJAX_in_Plugins Но до меня не дошло, как применить это здесь. Есть ли у кого-то подобный опыт? Можете ли выложить примеры кода с комментариями? Как я пытался вызвать шорт код AJAX. HTML
[SCode_ajax_footer] PHP
/** * ACTION Enqueue scripts */ function enqueue() < # jQuery will be loaded as a dependency ## DO NOT use other version than the one bundled with WP ### Things will BREAK if you do so wp_enqueue_script( 'ajax-ft', SRT_AJAX_SHORT_URL."ajax.js", array( 'jquery' ) ); # Here we send PHP values to JS wp_localize_script( 'ajax-ft', 'wp_ajax', array( 'ajaxurl' =>admin_url( 'admin-ajax.php' ), 'ajaxnonce' => wp_create_nonce( 'ajax_post_validation' ) ) ); > /** * SHORTCODE AJAX Footer */ function SCode_ajax_footer( ) '; return $output; > /** * AJAX query About block */ function ajax_footer()
JS
/* * @plugin Ajax Shortcode */ jQuery( document ).ready( function( $ ) < $(window).load(function(e) < /* *callBack wpAjaxShortcode *@param shorcodeName, containerId *@return */ function ajaxCallBackShortcode(shorcodeName, containerId) < $.post( wp_ajax.ajaxurl, , function( response ) < // ERROR HANDLING if( !response.success ) < // No data came back, maybe a security error if( !response.data ) $( containerId ).html( 'AJAX ERROR: no response' ); else $( containerId).html( response.data.error ); >else $( containerId).html( response.data ); > ); // end post > let shorcodeName, containerId; //callBack Footer ajaxCallBackShortcode(shorcodeName = 'ajax_footer', containerId = '#srtAjaxFooter'); >); // end click >); По сути он шорткод не вызывает. Сам шорткод сгенерирован темой. Если я напишу свой плагин. И перепишу Функцию PHP
/** * AJAX query About block * Check for security and send proper responses back */ function ajax_footer() < $footer= 'Это код футера'; wp_send_json_success( $footer); >
То такая функция, отработает конечно же. И вставит на фронтенде
Это код футера Подскажите, что делаю неправильно. Как вызвать на фронтенд шорткод сгенерированный темой ? [elementor-template ]
Как корректно загрузить страницу elementor через ajax
Создание полноэкранных прокручиваемых страниц в Elementor тоже очень просто и удобно. Для этого мы будем использовать плагин fullPage.js . Существуют и другие методы достижения этого эффекта, такие как прокрутка CSS или дополнения Elementor . Однако fullPage.js обеспечивает лучшее решение с точки зрения совместимости, скорости отклика и удобства использования.
Создание полноэкранных веб-сайтов с прокруткой в Elementor
Теперь мы собираемся продемонстрировать процесс создания полностраничного веб-сайта с прокруткой в Elementor.
Шаг 1: Загрузка fullPage.js
Чтобы использовать функции плагина fullPage.js , мы должны сначала загрузить его.
Следующий код необходимо добавить в шапку нашего веб-сайта, чтобы он корректно загружался:
Elementor Black Friday
Enjoy Amazing Deals Up to 50% Off
Нам нужен плагин для выполнения этого кода, потому что Elementor в настоящее время не предлагает средств для добавления кода в заголовок сайта. Хотя есть несколько плагинов, которые могут добавлять код в наш заголовок, я обнаружил, что этот самый простой в использовании.
Выберите «Добавить пользовательский HTML» в разделе «Пользовательский CSS & JS» на панели инструментов WordPress после установки плагина. Теперь вставьте вышеупомянутый код, убедившись, что он размещен как в заголовке, так и в интерфейсе.
Следующим шагом будет включение некоторого уникального JS. Чтобы инициализировать fullPage.js и установить его параметры и процедуры, мы должны использовать jQuery. Вот несколько основных вариантов, которые применимы ко всем сайтам с вертикальной прокруткой.
jQuery(document).ready(function($) < $('#fullpage').fullpage(< //options here scrollingSpeed: 1000, navigation: true, slidesNavigation: true >); //methods $.fn.fullpage.setAllowScrolling(true); >);Не забудьте включить этот код в нижний колонтитул интерфейса.
На этом этапе мы также устанавливаем параметры FullPage. Предыдущий пример включает навигационные точки, которые будут отображаться в правой части нашего сайта с прокруткой, а также минимальный набор опций, необходимых для полностраничного сайта с прокруткой. Когда мы изменим наш дизайн, чтобы он стал адаптивным, я рассмотрю больше альтернатив. Посетите официальную документацию для получения более подробной информации о ваших возможностях.
Шаг 2: Настройте страницу Elementor
Следующая разметка требуется fullPage.js для нашей страницы прокрутки.
Section 1 Slide 2.1 Slide 2.2 Slide 2.3 Section 3 Отдельные разделы нашей прокручиваемой страницы с разделом класса будут полноэкранными разделами. Использование шаблонов — это самый простой способ заставить это работать с Elementor.
Давайте сначала настроим нашу фактическую страницу. Создайте новую страницу в Pages, дайте ей подходящий заголовок и URL-адрес, а затем отредактируйте ее с помощью Elementor.
Создайте раздел с одним столбцом в Elementor прямо сейчас. Мы хотим добавить HTML-виджет в этот столбец. Этот виджет, который включает в себя шорткоды для каждого отдельного слайда, будет служить основой нашей Страницы. Мы хотим добавить следующий код:
Убедитесь, что раздел имеет полную ширину. Кроме того, поскольку нам не нужны отступы, которые Elementor по умолчанию добавляет к столбцам, установите отступы раздела и столбца на 0.
После создания фактических слайдов на более поздних этапах мы изменим идентификатор шаблона Elementor на его правильное значение.
Шаг 3. Настройте разделы
Последним шагом является отдельное создание и сохранение каждого раздела в качестве шаблона.
Вам потребуется Elementor Pro , чтобы использовать короткие коды. Пришло время купить его, если вы еще не подумали об этом. У вас есть все инструменты, необходимые для создания веб-сайта с помощью Elementor. Нет необходимости всегда покупать новую тему!
Создайте новый раздел, перейдя в Шаблоны — Добавить новый.
Теперь будет создан первый слайд нашего полностраничного сайта с прокруткой. Создайте новый раздел в Elementor и установите его высоту «По размеру экрана». Теперь, когда вы добавили свой материал, вы можете стилизовать его. Просто убедитесь, что каждый шаблон содержит не более одной части. Чтобы создать уникальный макет, вы можете использовать столько колонок и внутренних колонок, сколько захотите.
Когда закончите, сохраните слайд, а затем вернитесь к своим шаблонам Elementor. Шаблон, который вы недавно разработали, теперь должен появиться в списке. Возьмите идентификатор этого шаблона и вставьте его на страницу, которую мы создали на шаге 2, скопировав его.
Теперь повторите эту процедуру для каждого слайда, который у вас есть. Каждый шаблон должен иметь одну область с высотой, регулируемой в соответствии с размером экрана.
Подведение итогов
Вот и все! Это самый простой способ создания полноэкранных страниц с прокруткой с помощью fullPage.js в Elementor . Я надеюсь, что это поможет вам создать простой и минималистичный веб-сайт для ваших будущих проектов.
Как диагностировать частое использование Admin-Ajax на вашем сайте WordPress
От автора: определение частоты использования admin-ajax.php – очень распространенный сценарий при работе с WordPress. Если вы уже давно работаете с WordPress, то должны были сталкиваться с этим при запуске тестов скорости и проверки логов доступа на сервере. Высокое потребление вызвано сторонними плагинами и частыми некэшируемыми запросами из панели администратора из-за Heartbeat API (например, автосохранение черновиков). Тем не менее, важно диагностировать высокие всплески admin-ajax.php, когда вы видите их, так как они, как известно, замедляют сайт. Ознакомьтесь с приведенными ниже рекомендациями по способам решения проблем с admin ajax WordPress.
Что такое файл admin-ajax.php?
При правильном использовании файл admin-ajax.php не так плох. Это часть ядра, он был добавлен командой разработки WordPress в версии 3.6. Цель admin-ajax.php – создать соединение между браузером и сервером посредством AJAX. Это открывает продвинутую функциональность, такую как улучшенное автосохранение, отслеживание изменений, таймауты авторизации, управление сессией и уведомления о блокировке поста при редактировании несколькими пользователями. Все функции замечательные, особенно для тех, кто работает с несколькими админами и авторами.
«Идея в том, чтобы иметь относительной простой API, посылающий XHR запросы на сервер каждые 15 секунд и запускающий события (или колбеки) при получении данных. Другие компоненты смогут зацепиться или получить уведомление об активности другого пользователя. Это можно использовать для блокирования одновременного редактирования виджетов и меню или для любых других задач, требующих регулярных обновлений с сервера.»
Люди без особых технических навыков могут повлиять на admin-ajax.php только одним образом – они могут попробовать понять, почему этот файл замедляет тесты скорости в инструментах типа Pingdom (см. пример ниже). Или же можно посмотреть тонны запросов к файлу в логах доступа к хосту.
Просмотр admin-ajax.php в тестах скорости и логах доступа – это результат двух разных сценариев. Один на front end и другой на back end. О втором мы поговорим ниже.
1. Плагины могут вызвать резкий скачок в admin-ajax.php
Первая и самая частая проблема, возникающая у людей с admin-ajax.php, связана со сторонними плагинами. Это обычно видно на front end и показывается в тестах скорости. Разработчики используют этот файл и/или AJAX, чтобы добавить функциональность в свои плагины. Но если вы видите запрос к admin-ajax.php , не факт, что он замедляет ваш сайт. AJAX загружается после загрузки страницы, определенные запросы можно грузить асинхронно. Но и это не говорит о том, что разработчик делает все правильно или о производительности кода. Для разработчиков есть статья о том, как правильно использовать AJAX в темах и плагинах WordPress.
Ниже представлены примеры того, как можно быстро диагностировать скачки в admin-ajax.php. Мы будем использовать GTmetrix, так как он позволяет подробно разбирать отдельный пост и ответ. Pingdom, к сожалению, не позволяет просматривать данные из формы запроса. Можно также использовать Google Chrome Devtools или WebPageTest.
Высокие скачки admin-ajax.php из Visual Composer Plugin
Ниже представлен сторонний WordPress сайт с большими скачками в admin-ajax.php. Как видно, GTmetrix показывает скачок до 8 секунд! Остальная часть водопада выглядит нормально, но этот момент владелец сайта должен решить обязательно.
Если кликнуть в POST admin-ajax.php запрос, откроется 3 вкладки: Headers, Post и Response. Во время диагностики таких проблем нас интересуют вкладки Post и Response. На этом сайте можно мгновенно посмотреть подсказки на вкладке Response. Видно, что часть запроса связана со скриптом vc_shortcodes-custom-css.
Быстрая копипаста в google дате нам результат – проблема в плагине/конструкторе страниц Visual Composer для WordPress. Вы удивитесь количеству индексов в google.
Дальше этот человек должен убедиться, что у него установлена последняя версия Visual Composer. Если да, то необходимо связаться с разработчиками плагина и заявить о проблеме с admin-ajax.php. На самом деле, это частая проблема с плагином, как видно из поста на Stack Overflow. Плюс WordPress в том, что если вам не удалось решить проблему с одним плагином, почти всегда есть другие плагины. Например, можно попробовать другие конструкторы страниц Beaver Builder или Elementor.
Высокие скачки admin-ajax.php из Notification Bar Plugin
Ниже представлен второй пример сайта разработчика. После установки какого-то стороннего плагина мы сразу увидели огромный всплеск в admin-ajax.php.
Если кликнуть на запрос POST admin-ajax.php, можно подробно исследовать его. Можно заметить, что в данных поста есть “action=mtsnb_add_impression&bar_id=88&ab_variation=none.”.
Как правило, первая часть действия post также относится к CSS классу в плагине. Опять быстро гуглим «mtsnb», и первым результатом выпадает плагин Notification Bar, который запущен на нашем сайте.
У разработчиков есть и другие способы отслеживания плагинов, которые генерируют POST запрос, но, как мы выяснили, тест скорости и поиск google тоже достаточно эффективны.
Верный способ определить происхождение admin-ajax.php
Выше описано пара легких способов того, как быстро найти плагин в WordPress, который вызывает проблема. По нашему опыту, это работает в 99% случаев. Но в случаях, когда post данные и действия не так ясны, всегда можно пойти старым способом. Просто отключите все плагины в WordPress. Запустите тест скорости. Если admin-ajax.php нигде не найден, включайте по одному плагину и повторно запускайте тесты. Отключение всех плагинов – верный способ найти источник.
Здесь также поможет тестовое окружение Kinsta. Просто скопируйте WordPress сайт в тестовую среду и запустите тесты без воздействия на настоящий сайт. После нахождения причины можно поправить настоящий сайт.
Подобные проблемы также может помочь решить отчет по использованию AJAX на MyKinsta analytics. Там можно смотреть определенные AJAX всплески за определенные периоды.
2. Проблемы CPU с admin-ajax.php на back end
Вторая основная проблема — WordPress Heartbeat API использует admin-ajax.php для отправки AJAX запросов из браузера, что может нагрузить CPU. Каждый AJAX запрос загружает весь back end WordPress и обходит все формы кэширования. Как правило, в тестах скорости этого не увидишь. Это особенно важно знать тем, кто использует дешевые общие хосты, так как у них не так много свободного CPU. WP Tavern испытали это на своей шкуре и мигрировали с HostGator из-за множества зависаний.
Нужно аккуратно подходить к одному сценарию – автосохранение в WordPress и открытые вкладки. Например, мы запустили новый черновик на сайте и оставили вкладку открытой. Heartbeat API по умолчанию каждые 15 секунд будет биться в admin-ajax.php для автосохранения. Если оставить вкладку открытой на компьютере, то один пост может сгенерировать 5 760 запросов за день!
Для одного человека это много запросов на back end. Но что будет, когда на сайте будет несколько редакторов? Эти запросы быстро умножатся. Мы испытали это в нашем недавнем примере DARTDrones, где мы помогали расширить сайт WooCommerce для Shark Tank. За 24 часа они получили более 4 100 запросов в файл admin-ajax.php с 2000 уникальных посетителей. Не самое хорошее соотношение запросов к посетителям. Мы обнаружили это через wp-admin referrer URL, который был создан из-за того, что их админы обновили сайт, чтобы подготовиться к показу.
Есть способы решить проблему с запросами к admin-ajax.php на back end при автосохранении, ревизиях, блокировании и т.д. Здесь нам поможет бесплатный плагин Heartbeat Control plugin от Jeff Matson.
На данный момент The Heartbeat control имеет 70 000+ активных установок с рейтингом 5 из 5 звезд. Последний раз он обновлялся 2 года назад, но за это время работа Heartbeat API почти не поменялась. Можете скачать его с репозитория WordPress или найти в панели WordPress под «Add New plugins».
Плагин позволяет парой кликов управлять частотой WordPress heartbeat API. Первая опция контролирует heartbeat locations, такие как полное отключение или «разрешено только на страницах редактирования постов». Рекомендуем использовать последнее, если вы не уверены, что можете полностью отключить функцию, не сломав плагин, который ее использует.
Вторая опция позволяет выбрать частоту. Если изменить значение с 15 секунд на 60, это кардинально снизит количество запросов, что сэкономит ресурсы сервера (загрузка CPU).
Можно также использовать премиум плагин типа perfmatters (разработан членом команды Kinsta), который позволяет отключать heartbeat, изменять его частоту и менять интервал автосохранения.
Заключение
Как видите, существуют быстрые и легкие способы диагноза и решения проблем с admin-ajax.php. Как правило, они возникают из-за сторонних плагинов, которые могут конфликтовать друг с другом или иметь плохой код. Если у вас загружается CPU на back end из-за admin-ajax.php, подумайте об управляемом WordPress хостинге типа Kinsta. У них больше опыта работы с проблемами производительности такого типа.
А у вас возникали проблемы с admin-ajax.php на сайте WordPress? А, может, у вас есть советы. Будем рады услышать ваши мысли.
Автор: Brian Jackson
Редакция: Команда webformyself.