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

Я работаю программистом WordPress с 2010 года. У меня многолетний опыт в проектировании и разработке тем WordPress. В прошлом я разрабатывал темы с использованием опций темы, кастомайзера и виджетов.

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

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

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

• Создайте/разработайте свою тему, как обычную тему WordPress, следуя необходимым и рекомендованным правилам официальной команды по рассмотрению тем WordPress.
• Импортируйте данные Theme Unit Test и проверьте, все ли элементы стилизованы и работают правильно.
• Инструкции по импорту демо-данных вы найдете на странице Кодекса.
• Проверьте свою тему с помощью плагина Theme Check.

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

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

Не используйте класс контейнера

Большинство тем используют класс контейнера (.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 
} ?>

Убираем пробелы

Большинство дизайнеров тем используют отступы (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 поставляется с двумя типами шаблонов, 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 не установлен, иначе он будет выбрасывать ошибки. Подробнее: Elementor Theme location API.

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

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