Дни мегатем, наполненных функциями, похоже, уходят, в то время как мы видим рост более компактных тем, которые обеспечивают поддержку сторонних плагинов. Добавление поддержки конструктора страниц — отличный способ дать вашим пользователям дополнительные возможности, когда дело доходит до создания веб-сайта с вашими темами. Если вы об этом думаете, мы бы хотели, чтобы вы выбрали Beaver Builder в качестве конструктора страниц.

«Из коробки» Beaver Builder отлично работает практически с любой темой. Я думаю, что до сих пор мы не слышали ни об одной теме, с которой бы она не работала. Несмотря на это, есть еще несколько вещей, которые вы можете сделать, чтобы он работал еще лучше. Прежде чем я перейду к мельчайшим деталям, вот несколько причин, по которым я считаю, что Beaver Builder — хороший выбор…

• Вашим пользователям будет легко начать работу, поскольку на wordpress.org доступна облегченная версия, с которой они могут начать работу, не тратя ни единого доллара.
• Вы можете создавать собственные модули, которые можно объединить в вашу тему, используя наше руководство по пользовательским модулям.
• Здесь нет раздувания. Beaver Builder загружает только те скрипты и стили, которые ему нужны на данной странице, а не все, что есть на свете.
• Мы создали Beaver Builder таким, чтобы он был простым в использовании и при этом обладал достаточной мощностью для выполнения работы. Простота всегда в центре нашего внимания, поэтому вы не увидите, чтобы мы переусердствовали с функциями.
• Ваши пользователи будут в надежных руках, если возникнут какие-либо проблемы. Мы предоставляем действительно потрясающую поддержку.

Если вы ищете отличные примеры других компаний, которые предоставляют поддержку Beaver Builder в своих темах, не ищите ничего, кроме наших друзей из WebMan Design и UpThemes. Мы чрезвычайно польщены тем, что они решили поддержать наш конструктор страниц, и надеемся, что другие последуют их примеру.

Звучит хорошо? Вот как это сделать.

Нацеливание на элементы с помощью CSS только на страницах Beaver Builder

Одна из наиболее распространенных вещей, которые вы увидите в этом посте, — это нацеливание на определенные элементы только на страницах Beaver Builder. Будь то заголовок, оболочка содержимого, кнопки или что-то еще, этого легко достичь, поскольку каждая страница Beaver Builder имеет в теле класс с именем fl-builder (все наши материалы имеют префикс «fl», потому что материнская компания Beaver Builder называется ФастЛайн Медиа). Зная, что этот класс находится в теле, вы можете написать специальный CSS для страниц Beaver Builder.

Как? Допустим, вы хотите настроить таргетинг на оболочку содержимого вашей темы и удалить все отступы на страницах Beaver Builder. С кузовом класса fl-builder это так же просто, как…

 .fl-builder #my-content-wrapper { padding: 0; }

Бум! Сделанный. На страницах Beaver Builder нет отступов. Есть несколько конкретных случаев использования, которые мы обсудим позже, но не стесняйтесь применять этот метод по мере того, как вы подходите к уникальным потребностям вашей темы.

Отключение заголовка страницы по умолчанию

Большую часть времени, когда Beaver Builder активен, заголовок страницы по умолчанию не требуется. Обычно это просто мешает. Ваши пользователи могут отключить это самостоятельно, выбрав «Инструменты» > «Редактировать глобальные настройки» > «Заголовок страницы по умолчанию» и введя селектор CSS для заголовков страниц в вашей теме, но почему бы не упростить для них задачу?

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

 function my_form_defaults( $defaults, $form_type ) { if ( 'global' == $form_type ) { $defaults->default_heading_selector = '.my-heading-selector'; } return $defaults; // Must be returned! } add_filter( 'fl_builder_settings_form_defaults', 'my_form_defaults', 10, 2 );

Этот метод отлично подходит для визуального сокрытия заголовка страницы, но не удаляет его из разметки. Если вас это беспокоит, вам нужно добавить немного больше кода, чтобы полностью удалить заголовок страницы на страницах Beaver Builder. Сначала добавьте эту вспомогательную функцию в файл функций…

 static public function my_theme_show_page_header() { if ( class_exists( 'FLBuilderModel' ) && FLBuilderModel::is_builder_enabled() ) { $global_settings = FLBuilderModel::get_global_settings(); if ( ! $global_settings->show_default_heading ) { return false; } } return true; }

Затем в файле, содержащем заголовок вашей страницы (возможно, page.php), оберните заголовок вашей страницы в этот код следующим образом:

 <?php if ( my_theme_show_page_header() ) : ?> <h1><?php the_title(); ?></h1> <?php endif; ?>

Благодаря этому коду в разметке не будет ни единого следа заголовка страницы, когда для создания страницы используется Beaver Builder.

Удаление или настройка полей и отступов

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

Например, используя тему Twenty Twelve, вы можете видеть, что вокруг макета конструктора имеется дополнительное пространство, которое не позволяет фоновой фотографии смещаться от края к краю…

С помощью нескольких настроек CSS с использованием класса fl-builder , о котором я упоминал выше, мне удалось добиться такого вида:

К сожалению, каждая тема по-разному обрабатывает свои поля и отступы. Я не смогу предложить вам решение, которое работает в любой ситуации, но если вы хорошо разбираетесь в CSS, следующий код соответствует тому, что вы захотите реализовать…

 .fl-builder #my-content-wrapper { margin: 0; padding: 0; }

Полная ширина строк

Еще одна популярная функция Beaver Builder, которую вы, возможно, захотите поддержать в своих темах, — это строки полной ширины. Строки полной ширины не просто доходят до края оболочки контента, они доходят до края браузера. Ух ты!

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

Когда пользователь решает сделать строку полной шириной в настройках строки, максимальная ширина удаляется, и эта строка заполняет все пространство от края до края, вот так…

Это отличный метод, но он работает только в том случае, если оболочка содержимого вашей темы также выходит на край браузера.

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

 .fl-builder #my-content-wrapper { max-width: none; width: auto; }

Цвета кнопок по умолчанию

Beaver Builder обеспечивает отличную поддержку самых разных стилей кнопок, но стандартный вариант довольно скучный. Добавление следующего CSS в вашу тему и настройка его в соответствии с вашим дизайном придаст кнопкам Beaver Builder внешний вид по умолчанию, который лучше соответствует вашему стилю.

 a.fl-button, a.fl-button:visited, .fl-builder-content a.fl-button, .fl-builder-content a.fl-button:visited { background: #fafafa; color: #333; border: 1px solid #ccc; } a.fl-button *, a.fl-button:visited *, .fl-builder-content a.fl-button *, .fl-builder-content a.fl-button:visited * { color: #333; }

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

Будьте осторожны с Z-индексами

Скорее всего, если вы хоть раз в жизни писали CSS, вы сталкивались с проблемами z-index. О чем конкретно я говорю? Вещи поверх других вещей, которые делают некоторые вещи недоступными. Чтоооо?

Интерфейс Beaver Builder должен располагаться поверх всей страницы, над ним ничего не должно быть. Таким образом, мы установили z-индекс смехотворно высоким, но в то же время не слишком высоким. После многих лет опыта я рекомендую вам поддерживать z-индексы как можно ниже. Я знаю, что это не всегда осуществимо, поэтому, если вы попытаетесь сохранить их хотя бы ниже 100 000, все будет в порядке.

Рекомендовать с плагином TGM

Раньше разработчикам тем приходилось включать сторонние плагины непосредственно в свои темы, чтобы они были доступны пользователям. Я уверен, что в то время это казалось отличным решением, и многие до сих пор так делают, но сегодня мы все знаем, почему это не лучшая идея. Безопасность и обновления!

Что произойдет, если вы подключите к своей теме сторонний плагин и обнаружите дыру в безопасности? Угадай, что? Вы несете ответственность за распространение обновлений на сайтах ваших пользователей, разработчик плагина не сможет этого сделать, поскольку плагин находится в каталоге вашей темы. Это случалось раньше, и я предполагаю, что это произойдет снова, пока разработчики тем не прекратят эту практику.

Помимо этого, вы также будете нести ответственность за распространение последних обновлений среди своих пользователей. Еще одна вещь, о которой вам нужно подумать в вашей напряженной жизни. За первый год существования Beaver Builder выпустил 50 обновлений, и мы не планируем останавливаться на достигнутом. Вы действительно хотите нести за это ответственность?

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

Активация плагина TGM: лучший способ запросить и порекомендовать плагины для тем WordPress (и другие плагины). С их сайта…

Активация плагинов TGM — это библиотека PHP, которая позволяет вам легко запрашивать или рекомендовать плагины для ваших тем WordPress (и плагинов). Он позволяет вашим пользователям устанавливать и даже автоматически активировать плагины по отдельности или массово, используя собственные классы, функции и интерфейсы WordPress. Вы можете ссылаться на предварительно упакованные плагины, плагины из репозитория плагинов WordPress или даже на плагины, размещенные в других местах в Интернете.

Короче говоря, вы должны предоставить своим пользователям возможность устанавливать сторонние плагины. Если они решат это сделать, вы можете оставить обновление на усмотрение ядра WordPress и автора плагина, а не вас.

Заработай немного денег

Нам очень лестно, что другие разработчики высоко оценили нашу работу и даже предоставили ее поддержку в своих собственных продуктах. Мы так рады этому, что выразили благодарность тем, кто предоставляет поддержку Beaver Builder для своих тем.

Это маленькое спасибо — это фильтр, который позволяет вам заменить наши ссылки на обновление в облегченной версии вашей партнерской ссылкой, по сути, зарабатывая вам деньги каждый раз, когда кто-то, использующий вашу тему, решает перейти на платную версию Beaver Builder.

Как это работает? Просто добавьте следующий код в свой файл функций, заменяя текст YOUR_LINK_HERE своей партнерской ссылкой и готово! Вы в бизнесе.

 function my_bb_upgrade_link() { return 'YOUR_LINK_HERE'; } add_filter( 'fl_builder_upgrade_url', 'my_bb_upgrade_link' );

Подведение итогов

С помощью нескольких настроек здесь и там вы сможете запустить свою тему с расширенной поддержкой Beaver Builder в кратчайшие сроки. Не стесняйтесь сообщать нам, если у вас есть какие-либо вопросы, и не стесняйтесь поделиться ими, если вы решите оптимизировать свою тему для Beaver Builder или чувствуете, что в этом посте чего-то не хватает. Мы будем рады видеть вас на борту!