Java, UX, HTML, CSS, WEB-design

Как создать сайт с помощью плагина WP Page Builder

[ad_1]

  • Якуб Никита

  • 0 Комментарии

Как создать сайт с помощью плагина WP Page Builder

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

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

Краткое резюме ↬

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

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

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

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

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

Наши цели:

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

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

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

(Большой превью)

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

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

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

gif, показывающий, как загрузить WP Page Builder с веб-сайта Themeum
(Большой превью)

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

После установки WP Page Builder вы заметите новый пункт в меню в административной области.

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

плагин не занимает всю админку

(Большой превью)

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

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

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

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

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

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

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

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

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

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

(Большой превью)

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

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

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

(Большой превью)

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

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

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

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

быстрый предварительный просмотр макетов страниц, готовых для импорта в ваш шаблон
(Большой превью)

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

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

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

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

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

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

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

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

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

(Большой превью)

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

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

WP Page Builder позволяет настраивать отступы аддона прямо на экране.
(Большой превью)

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

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

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

Блок призыва к действию с очень простым содержанием

(Большой превью)

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

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

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

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

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

Пользовательский аддон 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;
} );

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

GIF-файл, показывающий полностраничную карту на шаблоне

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

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

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

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

Надстройка «Форма» позволяет легко создать страницу «Свяжитесь с нами».

(Большой превью)

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

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

Резюме

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

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

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

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

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

Сокрушительная редакция
(мс, ра, аль, ил)



[ad_2]
Source: https://smashingmagazine.com

Заключение

Вы ознакомились с статьей — Как создать сайт с помощью плагина WP Page Builder

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

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

Ваш адрес email не будет опубликован.

Краткое описание по статье Как создать сайт с помощью плагина WP Page Builder

Название: Как создать сайт с помощью плагина WP Page Builder . Краткое описание: [ad_1] ⭐ Якуб Ни . Дата публикации: 26.01.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

Кнопка «Наверх»