Как разрабатывать темы WordPress, совместимые с Elementor

Опубликовано 21 апреля 2024 в 22:47 (Обновлено 30 апреля 2024 в 00:28)
Время чтения: 2 мин

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

1. Начало работы

Мы можем начать со стартовой темы, такой как Underscores. Это лучшая стартовая тема, принятая на wordpress.org, ThemeForest и других площадках. Underscores генерирует все необходимые файлы, такие как индекс, 404, части шаблона и другие папки/файлы, необходимые для стандартных тем WordPress.

2. Обеспечение совместимости с Elementor

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

2.1 Не включайте контейнер

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

Обычно мы используем класс контейнера после основного содержимого, например, так:

<div id="content" class="site-content">
    <div class="container">

Если страница/пост использует шаблон Elementor, вам нужно удалить класс контейнера, как показано ниже.

<?php  
if( !is_page_template('elementor_header_footer')) ){ ?>
    <div class="container">
    <?php 
} ?>

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

Аналогичным образом добавьте то же условие в закрывающий тег контейнера div, который выглядит следующим образом:

<?php  
if( !is_page_template('elementor_header_footer')) ){ ?>
    </div>
    <?php 
} ?>

2.2 Убираем отступы

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

В файле style.css вы можете добавить CSS для шаблона Elementor, как показано здесь:

.elementor-template-full-width #content{
    padding: 0;
}

3. Сделайте стили переопределяемыми

Очень важно сделать стили вашей основной темы легко переопределяемыми стилями Elementor. Примером этого может быть: не используйте !important в CSS вашей темы. Например:

#content p{
    font-size: 16px !important;
}

#page #content .widget-area .widget .title{
    color: #555555;
}

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

p{
    font-size: 16px ;
}

.widget .title{
    color: #555555;
}

4. Проверяем шаблоны и элементы Elementor

Elementor поставляется с 2 типами шаблонов: Elementor Canvas и Elementor Full Width. Создайте новую страницу и назначьте ей шаблон Elementor Canvas или Elementor Full Width. Нажмите на кнопку "Редактировать с помощью Elementor" в верхней части раздела редактирования страницы.

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

5. Задание локаций

Прежде чем сделать тему совместимой с Elementor, необходимо учесть еще несколько моментов.

Нам нужно зарегистрировать местоположение (локации) в functions.php. Местоположения разбиты на группы:

  • Header,
  • Footer,
  • Single,
  • Archive

Чтобы зарегистрировать все локации:

function theme_prefix_register_elementor_locations( $elementor_theme_manager ) {

     $elementor_theme_manager->register_all_core_location();

}
add_action( 'elementor/theme/register_locations', 'theme_prefix_register_elementor_locations' );

Во-вторых, отображение местоположения в теме.

Мы используем elementor_theme_do_location().

Пример, отображающий местоположение архива:

<?php
get_header();

// Elementor `archive` location
if ( ! function_exists( 'elementor_theme_do_location' ) || ! elementor_theme_do_location( 'archive' ) ) {
    get_template_part( 'template-parts/archive' );
}

get_footer();

Затем, как было сказано выше, - убедитесь, что вы удалили контейнер (класс .container), если используете шаблон Elementor:

<?php  
      if( !is_page_template('elementor_header_footer')) ){ ?>
         <div class="container">
    <?php 
    } ?>

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

Заключение

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

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

  • Обычно мы используем класс container после основного контента. Если страница/пост использует шаблон Elementor, вам нужно удалить этот класс контейнера.
  • Большинство дизайнеров тем используют отступы (padding) для контента. Вы можете удалить отступы, если страница является шаблоном Elementor.
  • Очень важно сделать так, чтобы стили вашей основной темы легко переопределялись стилями Elementor. Поэтому не используйте !important.

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

Опубликовано 21 апреля 2024 в 22:47

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

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

ACF Bludit Bootstrap CMS Git Google HTML и CSS Javascript MySQL PHP Python Shopify Tailwind CSS WooCommerce WordPress Видео Маркетинг Фриланс