Создание плагина WordPress с адаптивной таблицей цен для хостинговых компаний опубликовал Радик Алиев категория  
просмотры 9 834

Создание плагина WordPress с адаптивной таблицей цен для хостинговых компаний

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

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

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

Конечный результат адаптивной таблицы цен WordPress

Планирование создание плагина адаптивной ценовой таблицы

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

  • Ценовая таблица – совокупность предлагаемых вами продуктов (пакетов) или услуг. Так как в примере мы запланировали создание нескольких ценовых таблиц, то лучшим вариантом будет выбор пользовательской записи pricing_tables.
  • Цена продукта (пакета)  — эта функция варьируется в зависимости от выбираемого продукта. Так как ценообразование указывается для нескольких пакетов, будет использоваться пользовательская запись pricing_packages.
  • Особенности продукта (пакета) – это уникальные элементы вашего продукта или услуги. Данные функции добавятся динамически в настраиваемых полях ценообразования продукта.
  • Дизайн ценовой таблицы – для отображения ценовой таблицы можно выбрать шаблон страницы или короткий номер. В разрабатываемом примере плагина будет использоваться shortcode. Вы можете добавить CSS fade эффект в таблицы или оставить дизайн, как в исходниках.

Создание ценовых пакетов, как на картинке

В работе будет использована пользовательская запись pricing_packages. Можно просто сгенерировать код для пользовательских записей с помощью онлайн-генератора кодов. Следующий код создает Custom Post Type со стандартной конфигурацией:

Использование настраиваемых пользовательских полей (Custom Fields) для внесения информации о продукте (пакете)

Название продукта (пакета), цена и ссылка для покупки  — наиболее важные компоненты. Чтобы добавить эту информацию будем использовать мета поля. Нам необходимо добавить несколько компонентов, поэтому для удаления или добавления компонентов в динамическом режиме необходимо использовать другое мета поле, как показано в коде ниже.

Мета поля (окна) добавляются действием add _meta_boxes. Можно использовать одно окно вместо двух. На примере использовано два мета окна для внесения ясности.

Использование настраиваемых пользовательских полей (Custom Fields) для внесения информации о продукте


Первое окно будет содержать поля цены и ссылки для покупки. Делаем основу как в интернет магазине WordPress, только на много проще. Эти два поля сохранятся в post_meta таблицы с использованием соответствующих ключей: _package_price и _package_buy_link.

Использование в пользовательских полях (custom fields) префикса подчеркивания будет препятствовать их отображению при создании наименований (названий) пользовательских разделов.


Приведенный выше код содержит HTML разметку для особенностей продукта. Один продукт (пакет) содержит множество особенностей, поэтому они будут добавлены динамически неупорядоченным списком со скрытых полей с помощью jQuery. Особенности будут храниться в таблице post_meta с ключем _package_features. Отформатированные JSON строки будут использоваться для хранения нескольких особенностей.

Проверка (validation) создания продукта

Стоимость продукта (пакета услуг) и ссылка для покупки – основные элементы для каждого продукта. Поэтому необходимо подтверждение их создания. Для проверки используют jQuery код, указанный ниже.


Для отображения ошибок нужно добавить элемент div на экране создания поста, который содержит форму поста с ID. Это не меняется также и для пользовательских постов. В примере представлен  #post форма для проверки.

Проверка (validation) создания продукта

В связи с использованием различных пользовательских постов для фильтрации сообщений используется код, указанный ниже. Форма поста создания содержит скрытое поле с ID post_type.

После завершения фильтрации мы создаём определенную функцию проверки согласно типу поста, как показано ниже.


Сначала необходимо очистить любые уже существующие ошибки, предварительно установленные в элементе pricing_error. Тогда появится возможность проверить каждое поле и добавить сообщение об ошибке в контейнер pricing_error. И, наконец, можно отображать ошибки, используя функцию $("#pricing_error").show().


Как только вы нажмете кнопку «Опубликовать» WordPress попытается сохранить пост. Таким образом, стиль и функциональность поста будут загружаться по умолчанию. Так как для проверки используется JQuery, это маленькая хитрость. Также можно предотвратить выключение кнопки «Опубликовать» с помощью $("#publish").removeClass("button-primary-disabled"). И также можно остановить загрузку изображений AJAX использованием $("#ajax-loading").hide().

Сохраняем информацию о продукте (пакете) в плагине

Все области создания и проверки продукта (пакетов услуг) выполнены. Перейдем к сохранению информации в базе данных. Для этого будем использовать действие save_post, которое выполняется после сохранения поста в базе данных.


Сначала необходимо выполнить некоторые проверки для того, чтобы убедится в совпадении стоимости, созданной в форме поста, со значением кода, полученным (сгенерированным) в $_POST. Далее необходимо проверить это сохранение автоматическое или ручное. Далее перед сохранением нужно проверить тип поста. Если этого не сделать, то один и тот же код будет выполнен на каждом типе постов. Стоимость продукта (пакета) и ссылка для покупки будут сохранены непосредственно в таблице post_meta с использованием функции update_post_meta. Особенности продукта (пакета) будут сохранены в виде закодированных JSON строк. Создание продукта (пакета) закончено. Перейдем к созданию ценовых таблиц.

Создание ценовых таблиц

Ценовые таблицы будут еще одной пользовательской записью (Post Type) нашего плагина. Создание пользовательских типов постов и сохранение их в базе данных схоже с объяснениями кодов, изложенными ранее. Вы сможете найти создание пользовательского поста и кода сохранения для ценовой таблицы в файлах плагина.

Ценовые таблицы содержат цены всех продуктов (пакетов). Таким образом, мета поля, используемые для образования ценовых таблиц, будут отличаться от тех, которые были использованы для образования цен продуктов (пакетов). Создание мета поля для ценовой таблицы можно посмотреть ниже.


Создание ценовых таблиц

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


Пакеты можно выбирать с помощью постов пользовательского типа pricing_packages. Условия запроса можно выбрать другими в соответствии со своими предпочтениями.

Если post_per_page не уточнять, то в результате WP_Query по умолчанию вернет номера записей. Можно получить все посты без каких-либо ограничений, используя -1 для состояния post_per_page.

Затем для отображения всех ценовых пакетов с флажками перед ними используем результаты, полученные (сгенерированные) от WP_Query. Циклом проверяется, является ли пакет уже назначенным в таблицу и назначается проверка пакетов с флажками. Добавлять или удалять пакеты можно динамически, выбрав /сняв флажки и нажав на кнопку «Обновить».

Проверка создания ценовых таблиц

Необходимо проверить имя ценовой таблицы, так же как выполнялось ранее для цен продуктов (пакетов). Для проверки будет использоваться следующий JQuery код:


Код, приведенный выше, уже включен в JS папку плагина в файл pricing_admin.js.
Создание ID ценовой таблицы

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

Проверка создания ценовых таблиц


Чтобы настроить отображение столбцов в виде списка можно использовать фильтр manage_edit-{Custom Post Type}_columns. На примере видно назначение пользовательского столбца ID ценовой таблицы с использованием ID поста.


Переключателем условия (положения) manage_{Custom Post Type}_posts_custom_column можно присваивать значения в столбце. Колонка для сортировки создается с помощью фильтра manage_edit-{Custom Post Type}_sortable_columns. После создания в плагине ценовой таблицы номер ( ID) можно увидеть в списке.

Содержание в плагине скриптов и стилей

Для проверки функции области администрирования используется специальный файл JavaScript. Для начала взглянем на файлы сценариев в созданном плагине WordPress, включенных в область администрирования.


admin_enqueue_scripts – средство (зацепка), которую можно использовать для включения всех CSS и файлов сценариев в админку WordPress. Сначала необходимо с помощью функции wp_register_script, имеющей уникальный ключ и путь к файлу, зарегистрировать сценарий. Тогда можно будет использовать функции wp_eniqueue_script для включения (размещения) файлов.

Посмотрим на включение передних (фронтальных) окончательных стилей и скриптов, используя код ниже:


В начале упоминалось о создании реагирования ценовой таблицы. Для обеспечения функциональности реагирования легче использовать существующую структуру CSS. Поэтому в качестве основы выбран Скелетон (часть сгенерированного программного кода). Первые три CSS файла будут файлами модели Скелетона, а затем включенный в файл pricing_table.css пользовательский стиль для нашей ценовой таблицы.

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

Проектирование вывода цены таблицы

Проектирование реагирования ценовой таблицы – трудоемкая задача, требующая глубоких знаний HTML и CSS. Следующий код содержит код ценовой таблицы с двумя продуктами (пакетами):


Теперь необходимо выбрать метод включения кода ценовой таблицы в WordPress. Можно включить этот код в короткий номер или создать определенный шаблон страницы. Далее будем использовать короткий номер. А также попробуем метод шаблона страницы.

Создание shortcode цен

Shortcode – простой способ динамического добавления функциональности ваших постов и страниц. Для вставки ценовой таблицы будем использовать код под названием wppt_show_pricing. Необходимо пройти идентификацию ID ценовой таблицы как параметра короткого номера с помощью ключа pricing_id. Реализация Shortcode:


В примере shortcode называется wppt_show_pricing и использована WordPress функция add_shotcode, которая автоматически преобразует shortcode. Сначала мы извлекаем массив коротких номеров и ID ценовой таблице будет присвоено значение переменной pricing_id. Остальная часть кода разъясняется в следующих разделах.

В результате получаем ID ценовой таблицы, который соответствует (присваивается) короткому номеру и всем пакетам, включенным в ценовую таблицу из таблицы post_meta.


Функцией get_post_meta получаем особенности и детали продукта (пакета) при прохождении каждого продукта (пакета), созданного в предыдущем коде. Затем вставляем (включаем) HTML код с динамическими данными для отображения ценовой таблицы. И, наконец, возвращаем сгенерированный HTML код, отображенный внутри страницы, содержащей короткий номер.

Разработка плагина ценовой таблицы для WordPress завершена. Можно конечно добавить переключатель размера текста jQuery или другие css навороты. Можно пройти через первичный (исходный) код и добавить собственные пользовательские функции в соответствии со своими предпочтениями.

Рекомендации по использованию ценовых таблиц

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

  • Устанавливаем плагин через админ панель или FTP.
  • Выбирайте раздел «Цены продуктов (пакетов)» в левом меню и создайте продукт (пакет) с именем, ценой, ссылкой для покупки и возможностями. Продолжайте этот процесс, пока не создадите все свои пакеты.
  • Затем для добавления новой ценовой таблицы следует нажать на «Ценовые таблицы» в левом меню. Список продуктов (пакетов) отобразится в нижней части экрана. Выберите желаемые (необходимые) продукты (пакеты) и сохраните в ценовой таблице с определенным именем.
  • Переходим к списку ценовой таблицы и находим ID вновь созданной таблицы.
  • Затем нажимаем на раздел страниц для добавления новой страницы. Вводим короткий код [wppt_show_pricing hpising_id='ID'/] внутрь редактора страницы. Заменяем ID фактическим ID ценовой таблицы.
  • Сохраняем таблицу и смотрим на нее в браузере. Вы получите свою реагирующую ценовую таблицу.
Создание реагирующей ценовой таблицы – задача не легкая, требующая много ручной работы, основанной на дизайне. Поэтому убедитесь в том, что ценовая таблица будет состоять максимум из четырех продуктов (пакетов). Измените размер браузера для того, чтобы увидеть действие реагирующего эффекта.
Теги:

0 комментарий

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

vk_like_site