вставить php в elementor

19.07.202219.07.2022 admin 0 Comments

How To Add PHP Code to Elementor

In this tutorial we are going to show you how to add PHP Code to Elementor.

At some point you may find yourself needing to add some PHP code to a certain part of a page template that is built using Elementor. Elementor by default however only has elements to add HTML and Javascript and doesn’t allow the adding of php code into any of those elements or the text block. So today we are going to show you how to add custom php code to any Elementor page by creating a shortcode in your themes functions.php.

Create a Shortcode to add PHP Code to Elementor

Using the WordPress shortcode API guidelines, in your functions.php file (or other include depending on your theme setup) add the following code:

Be sure to name the function and the shortcode something relevant to what you’re trying to output on the page, this is only a simple example.

If you need to output multiple custom php functions that is separate from the first you will need to copy the code above and make sure you change the name of the shortcode. You can not have the same name for two different shortcodes.

Add The Shortcode to a Page Using Elementor

Now that your shortcode has been added and registered it can be called into Elementor using a “text block” or the “shortcode” widget element. Navigate over to the page that you are wanting to add the custom php to.

From there, add a Elementor shortocode element with your newly created shortcode called within it. For this guide the shortcode is [my_elementor_php_output]

Now that the shortcode is in your Elementor page layout, you can view the live results of the page to ensure the output is as expected.

In Summary

Obviously, there are more possibilities than using echo using this solution; it can be expanded to serve any functionality possible with the WordPress Shortcode API, such as shortcodes that handle attributes.

We here at WP Codeus hope this quick guide helps other people facing the same issue; trying to add your own PHP code to any Elementor page.

Need Help with your Website?

Our Experts can handle any customization or developement at a reasonable price.

Источник

Обзор Elementor 3.1 ➤ Оптимизация Elementor, вставка кода и тег совместимости

В этой публикации я расскажу, что Вас ожидает нового в базовой версии Elementor 3.1, а также в версии PRO 3.1.

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

Смотреть обзор

Текстовая версия

Вставка произвольного кода в шапку или в футер сайта (PRO)

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

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

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

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

Демонстрация кода на странице (PRO)

Добавлен новый виджет Code Highlight. С помощью этого виджета вы сможете на странице показать фрагмент кода. Этот виджет будет полезным в первую очередь тем сайтам, которые публикуют контент на IT-тематику.

Улучшенный виджет Анимированный заголовок (PRO)

Новые улучшения позволяют:

Другие изменения (PRO)

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

Теперь поговорим о глобальных изменениях, которые распространяются на обе версии.

Улучшенная загрузка виджетов на странице (обе версии)

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

Как сейчас все происходит: независимо от того какие виджеты вы используете – загружается код всех виджетов на странице. Из-за этого страницы созданные в Elementor не оптимизированы и многие пользователи этим недовольны. Разработчики решили исправить эту проблему.

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

Суть такая: нет виджета – нет его кода на странице.

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

Список виджетов, для которых доступна оптимизация

Но, радует, что разработчики наконец-то обратили свое внимание на оптимизацию Elementor. Будем надеяться, что они этот механизм доведут до совершенства и не забросят вначале пути.

Тег совместимости

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

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

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

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

Если версии Elementor с которыми тестировался плагин будут не самыми последними, то возле плагина появится предупреждающее сообщение, указывающее на возможную несовместимость.

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

Завершение

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

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

Напишите в комментариях, что вы думаете обо всех этих изменениях.

Источник

Создание пользовательских виджетов Elementor – правильный путь! | Бен Маршалл

Если вы еще не проверили плагин Elementor – вам следует. В свое время я использовал много конструкторов plug-n-play, и этот, безусловно, выбивает остальных из воды. Но вы здесь, чтобы узнать, как создавать собственные виджеты Elementor и угадайте, что? Это подпруга!

В этой статье мы создадим простой пользовательский виджет Elementor, который позволит пользователю редактировать текст, изображения и стили как в настройках виджета, так и во встроенном режиме! Мы назовем этот виджет Elementor Awesomesauce.

Я не могу сказать вам, сколько раз я видел пользовательские реализации, сделанные в теме (что возможно), но не очень хорошо для компонентного подхода. Встраивание в плагин позволяет вам разделять код, чтобы ваши существующие PHP, CSS и JS не попали в код вашей темы. Более того, вы можете условно загрузить свои ресурсы веб-интерфейса только в тех местах, где появится пользовательский виджет, что повысит производительность. Итак, начнем там, создадим плагин Elementor Awesomesauce :

Шаг 2. Добавьте свои настраиваемые поля.

Elementor – очень мощный инструмент, позволяющий легко добавлять пользовательские вкладки, поля, настройки стиля и даже отзывчивость. В приведенном выше коде _register_controls мы уже добавили несколько полей для заголовка, описания и содержимого, но что, если вам нужно больше? Посмотрите примеры ниже, чтобы добавить еще больше удивительности в ваш плагин Awesomesauce.

Добавить / изменить вкладку «Элементор»

Вы можете добавить / изменить вкладку содержимого и параметры, отображаемые в них, на боковой панели редактора Elementor, указав следующее: