Создание онлайн-калькулятора на wordpress с использованием своего стиля css

В данной статье рассмотрим создание калькулятора с применением плагина с ограниченным бесплатным функционалом. Конечно платный функционал намного интереснее, но для многих сложных расчетов (будь-то ипотечный кредит или расчет стоимости отеля в зависимости от даты заезда или просто расчет платных услуг с различными условиями) вполне подходит.

Самый подходящий плагин с невероятными возможностями:


Calculated Fields Form

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

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

Как добавить свой стиль шаблона CSS наиболее быстрым способом

Представленные шаблоны стилей плагина находятся по следующему пути: /public_html/wp-content/plugins/calculated-fields-form/templates

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

Добавить свой стиль дублировав папку понравившегося стиля у меня не получилось. В этой папке есть ini файл, в котором определено название класса и описание стиля. Модификация ini файла не привела к успеху, да и сомнителен такой способ, т.к. при обновлении плагина, все наши правки неминуемо слетят.

Выход найден:

  • Берем понравившийся стиль
  • Модифицируем его
  • Удаляем из всех селекторов имя класса стиля со всего кода
    (смотрим в FAQ плагина и читаем какие селекторы на что влияют)
  • копируем оставшийся код и вставляем его в поле пользовательского стиля, которое находится в настройках формы

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

Пример созданного калькулятора для расчета стоимости нанесения методом — шелкография

Если у вас появились вопросы, пишите в комментариях, чем смогу помогу.

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

Закрыть меню