• 10 минут чтения

• Вордпресс, Плагины

• Поделись Твиттер, Линкедин

(Это спонсируемый пост.) Конструкторы страниц WordPress — лучший выбор для создания идеального веб-сайта без какой-либо помощи разработчика. И на рынке появился новый, который мы собираемся протестировать в этой статье. Это конструктор страниц WP. Мы узнаем, как использовать этот плагин конструктора страниц для создания веб-сайта.

WP Page Builder — это бесплатный плагин, который интегрируется с любой темой WordPress. Вы можете легко перетаскивать элементы на страницы, которые вы создаете, и для этого вам не нужны какие-либо навыки программирования.

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

Давайте рассмотрим процесс создания реального веб-сайта с помощью плагина WP Page Builder. Мы создадим веб-сайт из нескольких простых страниц, связанных с вымышленным парком Рокхедж. Мы узнаем о плагине от установки до запуска сайта.

Наши цели:

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

Давайте начнем с пустого веб-сайта WordPress с установленной темой Twenty Seventeen.

Установка плагина

WP Page Builder бесплатен, и вы можете скачать его с веб-сайта Themeum. Его также легко установить через панель администратора WordPress, но, поскольку плагин новый, вам придется прокрутить список вниз, чтобы найти его.

Ищите тот, у которого крутой синий значок «P» с квадратом внутри.

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

Мне нравится, что плагин не занимает всю панель администратора. Это незаметно, и вы даже не обязаны использовать его для создания страниц или сообщений:

После нажатия кнопки вы попадаете на новый экран, где действительно появляется конструктор страниц.

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

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

Что я нахожу не очень хорошим, так это значки строк и надстроек на панели инструментов. Они просто слишком малы, и вы не можете реально отличить их друг от друга, не приближаясь к монитору. Кроме того, мне пришлось немного подумать о пунктах меню слева, потому что название «Аддоны» меня немного сбивало с толку. В этом плагине надстройки — это элементы контента, которые вы размещаете на своем веб-сайте, а не надстройки премиум-класса, которые вы можете установить, чтобы сделать свой веб-сайт еще круче.

Еще одна вещь, необходимая, это поддержка. Здесь ничего нет. Было бы очень приятно иметь текст справки, даже несмотря на то, что конструктор страниц кажется очень простым в использовании. Например, на вкладке «Библиотека» нет никакого контента, и я действительно не знаю, что это такое и что я могу с ним сделать.

Помимо этих мелочей, мне нравится этот редактор. Приступим к настройке нашей первой страницы!

Создание домашней страницы

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

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

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

Итак, тема установлена, конструктор страниц установлен, страница готова. Что мы делаем дальше? Я уверен, что вы уже были в таком положении при использовании компоновщиков страниц раньше; вы просто не знаете, что делать со страницей. Ты даже не знаешь, что ты может сделать со страницей. Это стандартная проблема «чистого холста».

Однако я обнаружил нечто под названием «Макеты» на боковой панели плагина. И то, как это работает, меня впечатлило.

Макеты страниц

Макеты страниц — это полные страницы, готовые к импорту на ваш сайт WordPress. Звучит круто, не так ли? Смотри:

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

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

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

Составление домашней страницы

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

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

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

Я начал с большого раздела изображения прямо под заголовком, с фиксированным фоном и общим заголовком.

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

Что мне нравится, так это то, как вы можете настроить отступы аддона в реальном времени на экране:

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

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

И вуаля! Процесс создания страницы был очень простым, и мне понравилось.

Создание страницы «Найти нас»

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

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

Код совсем не плохой. Он понятен и легко читается, несмотря на то, что встроенных комментариев почти нет. Я не нашел никакой документации, поэтому мне пришлось копаться, чтобы посмотреть, как я могу расширить плагин. И, похоже, мне нужно было не так уж много — просто класс аддона и фильтр.

Пользовательский аддон Google Map

Если у вас нет документации, лучше всего скопировать и изменить существующий код.

Кажется, доступно множество параметров конфигурации, некоторые из которых действительно нуждаются в серьезной документации. Но в нашем случае мы создадим простой iframe Google Map, используя ключ Google API, с местом для запроса и высотой iframe.

Вот как выглядит наш класс:

class JakubMikita_Addon_GoogleMap{

    public function get_name(){
        return 'jakubmikita_googlemap_block';
    }
    public function get_title(){
        return 'Google Map';
    }
    public function get_icon() {
        return 'wppb-font-location-map';
    }

    // Google Map block Settings Fields
    public function get_settings() {

        $settings = array(
            'apikey' => array(
                'type' => 'text',
                'title' => __('Google Maps API key','wp-pagebuilder'),
            ),
            'place' => array(
                'type' => 'text',
                'title' => __('Map place','wp-pagebuilder'),
            ),
            'height' => array(
                'type' => 'number',
                'title' => 'Height',
                'unit' => array( 'px','em','%' ),
                'responsive' => true,
                'std' => array(
                    'md' => '500px',
                    'sm' => '500px',
                    'xs' => '500px',
                ),
                'tab' => 'style',
                'selector' => '{{SELECTOR}} iframe { height: {{data.height}}; }',
            ),
        );
        return $settings;
    }

    // Google Map Render HTML
    public function render($data = null){
        $settings       = $data['settings'];
        $apikey         = isset($settings['apikey']) ? $settings['apikey'] : false;
        $place          = isset($settings['place']) ? $settings['place'] : false;

        $output="';
        return $output;
    }

    // Google Map Template
    public function getTemplate(){
        $output="";
        return $output;
    }

}

Выглядит просто, правда? Вверху у нас есть три метода, которые идентифицируют аддон: имя, заголовок и значок.

Следующий метод, get_settings(), здесь мы определяем все пользовательские данные. Мы определяем их как массив; Я только что посмотрел на другие аддоны, чтобы выяснить, какие поля я могу добавить. Довольно просто и легко реализовать.

Я понял, что следующий метод, render(), используется на переднем конце. Он получает все пользовательские настройки и возвращает iframe карты.

Последний метод, getTemplate(), используется на экране компоновщика страниц. Наличие двух методов, отображающих один и тот же код, не очень хорошо, но я полагаю, причина этого в том, что второй должен быть проанализирован с помощью JavaScript.

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

Последнее, что нам нужно сделать, чтобы зарегистрировать аддон, — это включить его в массив, что мы можем сделать с помощью простого фильтра:

add_filter('wppb_available_addons', function( $addons) {
    $addons[] = 'JakubMikita_Addon_GoogleMap';
    return $addons;
} );

Это все. Процесс быстрый и простой. Вот наш пользовательский аддон:

Теперь у нас есть потрясающая полностраничная карта на этой странице.

Создание страницы «Контакты»

На последней странице поместим контактную форму. Я собирался установить один из популярных плагинов контактной формы, когда заметил дополнение «Форма». Я попробовал.

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

Самое интересное, что WP Page Builder интегрируется с плагинами Contact Form 7 и weForms. Вы даже можете добавить простую CAPTCHA или использовать reCAPTCHA Google после предоставления ключей веб-сайта.

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

Резюме

Я должен сказать, что WP Page Builder — надежный плагин. Очевидно, что у него есть некоторые недостатки, но это все еще молодой продукт, и я уверен, что Themeum исправит все ошибки и внедрит улучшения, упомянутые в этой статье.

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

Themeum прав: создать страницу с его плагином просто, но не потому, что плагин простой. Плагин интуитивно понятен, но содержит классные дополнения.

Я использовал только несколько дополнений, но плагин поставляется с гораздо большим количеством. Блоки, которые вы обычно часами пытаетесь понять, как реализовать, можно перетащить при использовании плагина WP Page Builder.

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

(мс, ра, аль, ил)