Как сделать WordPress калькулятор

Привет, уважаемые читатели!

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

Содержание:

1. Функции калькуляторов на сайте и их виды
2. Какие плагины WordPress подойдут для расчетов?
3. Сервисы uCalc и CalcCreator

Для чего нужен калькулятор на сайте?

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

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

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

250/3000=x/100, где x – искомый нами средний расход в литрах

Итак, x = 250*100/3000 = 8,3 л

Т.е. в основе вычисления X будет лежать следующая формула:

X = Расход топлива за путь * 100 / Километраж

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

Попробуем разделить наиболее популярные калькуляторы по направлениям деятельности:

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

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

Плагины WordPress для создания калькулятора для сайта

Вордпресс-плагины для установки калькуляторов также распределены по направлениям. К примеру, среди денежных можно выделить: Loan calculator Pro (ипотека), FC's Auto Loan Calculator (автокредит), Debt Reduction Calculator (депозит), CC Savings Calculator (калькулятор сбережений), Responsive Mortgage Calculator (адаптивный кредитный кальулятор). А вот несколько устаревшие калькуляторы здоровья: BMI BMR Calculator (калькулятор веса), Fitness Tracker (расчет нагрузок, калорий).

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

Один из них мы уже рассматривали раннее – плагин WP Creator Calculator. Однако последнее его обновление было три года назад.

Следующий плагин имеет свежие обновления — WpCalc. Он позволяет совершать расчеты с любым количеством вводных. Здесь есть масса функций, с помощью которых можно создать калькулятор для большого количества потребностей. На официальном сайте создателей WpCalc есть множество готовых примеров: от конвертеров валют до преобразования Атомов в Моли. Однако, чтобы скачать готовое решение потребуется зарегистрироваться, а регистрация стоит 10 долларов. Без оплаты придется сделать свой калькулятор на WordPress-сайт самостоятельно. Скачать сам плагин можно бесплатно. Вот пример одного из калькуляторов сделанных с помощью WpCalc:

Еще один бесплатный плагин калькулятора для WordPress — Calculated Fields Form. Кроме всего прочего, он позволяет работать с вводными в виде дат. Это в свою очередь дает возможность просчитывать операции, где фигурируют сроки, привязка ко времени, месяцу, году и т.д.

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

Еще один простой бесплатный плагин — Offer Calc. Он позволяет вычислять стоимость услуг или товаров, учитывая прайсовую цену и заданное количество. Удобен для использования в качестве корзины на сайте.

Кроме приведенных выше бесплатных плагинов, есть также платные варианты с расширенными функциями: Cost Calculator, ez Form Calculator. Их стоимость колеблется в районе 20 долларов. Часто они используются с Woocommerce темами.

Конструкторы для сборки калькулятора

Кроме подготовленных для WordPress плагинов, есть также онлайн-конструкторы, которые помогают создать калькулятор для сайта или блога. Рассмотрим принцип их работы на примере двух популярных ресурсов: UCalc и CalcCreator.

UCalc

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

Кроме того, с помощью UCalc можно делать калькуляторы и для социальных сетей.

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

Попробуем создать простой бесплатный калькулятор для своего блога на Вордпресс с помощью UCalc.

Проходим регистрацию. Для этого нужно ввести Имя, Email и пароль. В следующем окне нам предложат выбрать между двумя опциями: Использовать шаблон или Собрать самостоятельно. Мы выберем готовый шаблон.

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

Из раздела «Экономика и финансы» кликаем на расчет CTR.

Здесь можно внести изменения во внешний вид, добавить дополнительные элементы из левой колонки путем перетаскивания объектов (список, ползунок, флажок и т.д.).

Чтобы изменить формулу расчета, нужно кликнуть на значок «Формула» в левом верхнем углу. Перейти от «Дизайна» к «Формуле».

После внесения правок, нажимаем «Предпросмотр» и если все устраивает «Сохранить».

Далее созданный нами калькулятор появится в разделе «Мои проекты». Кликаем на значок с тремя точками и выбираем «Получить код». Перед нами появится код для внедрения на сайт.

Для того, чтобы вставить код на своем WordPress-блоге, вам потребуется установить плагин от uCalc:

После установки и активации плагина, необходимо его привязать к предварительно созданному вами аккаунту в системе uCalc. Если установка и активация прошла успешно, то в визуальном редакторе появится вот такая кнопка:

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

Если вы создаете калькулятор в сервисе самостоятельно, без использования шаблонов, можно посмотреть подсказки по построению формул, свойствам виджетов и прочим функциям uCalc в разделе «База знаний». Там же вы найдете инструкции по добавлению калькулятора на сайты на других CMS, типа Joomla, Drupal и т.д.

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

pro-wordpress.ru

Плагин Calculated Fields Form

Бесплатный плагин Calculated Fields Form призван осуществлять математические вычисления среди значений полей форм. В нем есть встроенный логический конструктор форм, который может быть использован для добавления полей, назначения значений этим полям и определения математических операторов.

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

Среди основных достоинств плагина Calculated Fields Form можно выделить следующие:

• визуальный конструктор форм с несколькими полями и форматирование формы;
• возможность добавить любое количество вычисляемых полей;
• простой интерфейс калькулятора;
• поддержка калькулятором как простых, так и расширенных операции, включая тройные операторы и общие математические функции;
• поддержка нескольких типов полей, таких как раскрывающийся список, флажки, радиокнопки, даты, цифры;
• возможность выполнять операции с датами (например: расчет дней между двумя датами);
• поддержка разделителей форм для компоновки формы;
• возможность управления несколькими расчетными формами;
• наличие практичной кнопки «клонировать» для дублирования формы;
• наличие пяти готовых образцов форм;
• поддержка нескольких страниц;
• поддержка условных правил (полезно для создания мастеров);
• интуитивно понятный интерфейс интерактивной формы;
• шаблоны предопределенных форм.

Плагин CT Mortgage Calculator

Плагин CT Mortgage Calculator позволяет легко добавить простой калькулятор ипотеки на Ваш сайт. Он хорошо работает с другими популярными плагинами для WordPress и оснащен простыми в использовании виджетами, которые Вы можете добавить на свою боковую панель. Также есть возможность указать заголовок для виджета и ввести название и символ валюты.

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

Плагин Responsive Mortgage Calculator

Responsive Mortgage Calculator — еще один простой в использовании ипотечный калькулятор, предназначенный для сайтов недвижимости. Он поставляется с виджетами боковой панели и шорткодами, которые Вы можете использовать в записях и страницах.

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

Плагин WooCommerce Product Options and Price Calculation Formulas

Плагин WooCommerce Product Options and Price Calculation Formulas предоставляет дополнительные параметры продукта WooCommerce и формулы расчета цены. Он имеет встроенный настраиваемый компоновщик продукта, который позволяет добавлять и отображать дополнительные параметры продукта для каждого элемента.

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

Плагин WooCommerce Price Based on Country

Плагин WooCommerce Price Based on Country, согласно своему названию, работает на основе функции геолокации WooCommerce, чтобы “угадать” местоположение покупателя, а затем отображает цены в местной валюте.

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

Плагин TimeZoneCalculator

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

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

Плагин Date Calculator

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

Шорткоды плагина также работают со всеми популярными плагинами контактной формы, такими как Contact Form 7.

Плагин Repayment Calculator and Loan Application Form

Repayment Calculator and Loan Application Form — это гибкий WordPress-плагин, который может использоваться для ряда предприятий. Это позволяет пользователям выбирать сумму кредита, срок и рассчитать их ежемесячные платежи.

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

Плагин CC BMI Calculator

Плагин CC BMI Calculator — это простой калькулятор индекса массы тела, который можно использовать на сайтах здоровья и фитнеса. Он позволяет пользователям вводить информацию о своих росте и весе, чтобы увидеть свой индекс массы тела.

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

wpschool.ru

Принцип работы калькулятора:

поле1 + sqrt((поле 3 * (поле 2 + поле 4)))
Дословно:
(id1 (знак после поля)) квадратный корень из ((знак перед полем id3 знак после поля) (знак перед полем id2 знак после поля) (id4 знаки после поля))

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

Так же у всех калькуляторов есть следующие индивидуальные настройки:

Общие настройки:

• Название кнопки — по умолчанию Расчитать. Вы можете указать например: Получит результат
• Текст перед суммой — по умолчанию: Результат. Отображается перед результатом расчета.
• Текст после суммы — по умолчанию: Руб. Наример можно указать $.
• Action формы — куда перенаправить пользователя после расчета. (Работает только в случаи отключенного JavaScript)
• Округлять результат — можно выбрать фунацию при помощи которой будет обработана сумма результата. Для вас доступны: Round (от 0 до 4 знаков после запятой), Ceil и Floor.
• Дизайн калькулятора: Вы можете выбрать одну из четырех готовых тем на любой вкус, либо внести правки в существующую.

Настройки писем:

• Включить отправку писем — если требуется отправлять письма после расчета, выберите Да
• Тема — Тема письма, которое отправляется на E-Mail. После темы автоматически добавляется Имя пользователя. Например: Расчет калькулятора от пользователя Вася Пупкин.
• На какой E-Mail отправлять — укажите email. По умолчанию email администратора.
• Текст в начале письма — Текст перед таблицей с результатами расчета
• Текст перед формой — Отображается перед формой отправки письма пользователем.
• Сообщение об успешной отправке — Отображается, когда сообщение успешно отправлено.

p.s. Поля не проходят валидацию. Отправляется то, что указал или не указал пользователь.

Загрузка скриптов плагина:

С версии 3.5 для полноценной работы плагина подключаются библиотеки: (jquery-ui-core, jquery-ui-slider, wpcc.js и пр.). Чтобы не захламлять вашу страницу, вы можете указать ID страниц, на которых размещен шорткод плагина, тогда скрипты будут подгружаться только там. Если вы используете виджет плагина, то укажите 0 (ноль) для загрузки скриптов на всех страницах сайта. Эти настройки одинаковы для всех создаваемых калькуляторов.

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

Текстовой блок:

Отображает заголовок и текст указанный в его параметрах.

• Заголовок — отображается над полем.
• Текст — можно указать любой произвольные текст, который не участвует в формуле расчета. Поле поддерживает html теги. Отступы добавляются автоматически (nl2br).
  Все результаты расчетов калькулятора записываются сессию, в связи с этим можно указать следующие коды, которые выведут нужный результат из $_SESSION.
  [session id=«номеркалькулятора»]указать номер поля калькулятора или указать sum для отображения результата[/session]
• Визуально скрыть поле — добавляет display:none для блока поля. Нужно для работы с полем условия.

Select:

Отображает выпадающий список с возможность выбора 1 параметра.

• Заголовок — отображается над полем.
• Знаки до — Арифметический знак, который будет стоять перед полем. Например + или +(
• Знаки после — Арифметический знак, который будет стоить после поля. Например — или )-
• Список — Данное поле позволяет создавать варианты в выпадающем списке. В прошлых версиях списки составлялись по следующему шаблону:
  [цена]: название поля;
  [цена2]: название поля2;
  с версии 3.5 шаблон списков стал проще:
  цена: название поля
  цена2: название поля2
• Это поле участвует в формуле расчета — Если данное поле нужно исключить из формулы расчета, выберите опцию Нет. Выбранные параметры пользователем будут записаны в сессию.
• Визуально скрыть поле — добавляет display:none для блока поля. Нужно для работы с полем условия.

Checkbox:

Позволяет произвести множественный выбор из списка.

• Аналогично полю SELECT кроме параметров:
• Действие с данными — Арифметический знак, который означает действие между выбранными чекбоксами.
• По умолчанию — Нужно указать цифру, которая будет применена при расчете в случае, когда ни один checkbox не был выбран.
• Это поле участвует в формуле расчета — Если данное поле нужно исключить из формулы расчета, выберите опцию Нет. Выбранные параметры пользователем будут записаны в сессию. Стоит учесть момент, если поле не участвует в формуле, не нужно указывать параметр «Действие с данными», тогда вы сможете видеть все данные, которые выбрал пользователь в отправляемом письме.

Radio:

Позволяет произвести одиночный выбор из списка.

• Аналогично полю SELECT.

Input Text:

Отображает поле для ввода параметров пользователем.

• Знаки до — Арифметический знак, который будет стоять перед полем. Например + или +(
• Знаки после — Арифметический знак, который будет стоить после поля. Например — или )-
• По умолчанию — Нужно указать цифру, которая будет применена при расчете в случае, когда посетитель ничего не ввел в поле.
• Цена — Нужно указать цифру, которая будет связана с действием, указанным в параметре поля и произведено с введенными пользователем данными.
• Действие с данными — Арифметический знак, который означает действие с введенными данными посетителем и ценой поля.
• Визуально скрыть поле — добавляет display:none для блока поля. Нужно для работы с полем условия.
• Это поле участвует в формуле расчета — Если данное поле нужно исключить из формулы расчета, выберите опцию Нет. Выбранные параметры пользователем будут записаны в сессию. Стоит учесть момент, если поле не участвует в формуле, не нужно указывать параметр «Действие с данными», тогда вы сможете видеть все данные, которые ввел пользователь в отправляемом письме.

Input Hidden:

Скрытое поле, которое участвует в формуле расчета но не отображается пользователям.

• Знаки до — Арифметический знак, который будет стоять перед полем. Например + или +(
• Знаки после — Арифметический знак, который будет стоить после поля. Например — или )-
• Цена — Нужно указать цифру, которая будет участвовать при расчете.

$_SESSION:

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

• Знаки до — Арифметический знак, который будет стоять перед полем. Например + или +(
• Знаки после — Арифметический знак, который будет стоить после поля. Например — или )-
• По умолчанию — Нужно указать цифру, которая будет применена при расчете в случае, когда данные из сессии пусты.
• ID калькулятора — Указываем ID калькулятора, из которого необходимо получить данные
• ID поля или sum — Указываем ID поля или пишем sum, чтобы получить результат

jQuery поле:

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

• Знаки до — Арифметический знак, который будет стоять перед полем. Например + или +(
• Знаки после — Арифметический знак, который будет стоить после поля. Например — или )-
• По умолчанию — Нужно указать цифру, которая будет применена при расчете в случае, когда данные поля пусты.
• ID поля — Указываем ID поля из которого нужно скопировать данные. Работает для: Input text, Select, Radio, Checkbox, Slider

Арифметическая функция:

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

• Знаки до — Арифметический знак, который будет стоять перед полем. Например + или +(
• Знаки после — Арифметический знак, который будет стоить после поля. Например — или )-
• Какую функцию используем — Есть возможность выбрать две функции:
  1. Извлечь квадратный корень — позволяет извлечь квадратный корень из поля или группы полей. Для корректной работы обязательно следует обернуть поле в скобки. Например:
  Мы хотим извлечь квадратный корень из поля 15, значит формула должна выглядеть следующим образом:
  [12](15) — квадратные скобки лишь визуально обозначают, что это поле арифметическая функция.
  Если мы хотим извлечь квадратный корень из группы полей, их так же следует обернуть квадратными скобками:
  [12](15+57-11)
  2. Возвести в степень — позволяет возвести в степень поле или группу полей. Для корректной работы поле должно быть охвачено скобкам! В конце скобки указываем степень, в которую нужно возвести поле. Например, возведем поле 10 в степень 2:
  [12](10, 2) — где 2 это степень.
  Мы должны указать в «Знак до» или «Знак после» поля, которое мы возводим в степень следующие параметры:, 2)

Slider:

Поле, которое позволяет отобразить слайдер (ползунок).

• Знаки до — Арифметический знак, который будет стоять перед полем. Например + или +(
• Знаки после — Арифметический знак, который будет стоить после поля. Например — или )-
• По умолчанию — Нужно указать цифру, которая отобразит ползунок в указанном отрезке между Минимальным и Максимальны значением.
• Визуально скрыть поле — добавляет display:none для блока поля. Нужно для работы с полем условия.
• Минимальное значение — Нужно указать цифру, которая будет являться минимальным значением ползунка.
• Максимальное значение — Нужно указать цифру, которая будет являться максимальным значением ползунка.
• Шаг — Нужно указать цифру, с каким шагом будет «скользить» ползунок.
• Положение — в каком положении будет отображен ползунок. Вертикально или Горизонтально.
• Это поле участвует в формуле расчета — Если данное поле нужно исключить из формулы расчета, выберите опцию Нет. Выбранные параметры пользователем будут записаны в сессию.

Условие IF VAL Field == Val User:

Поле, которое не видно пользователем, но принимает участие в расчете.

• Какое поле сравниваем — Укажите ID поля, значение которого мы будем сравнивать для выполнения условия. Работает для: Input Text, Select, Checkbox, Radio, Slider.
• Какое значение должно быть у поля — Укажите значение, которое будет сравниваться в условии. Например 100
• Какие поля отображаем — Укажите ID полей через запятую, которые нужно отобразить и включить в формулу расчете. У указанных полей параметры «Визуально скрыть это поле» должен быть выставлен: «Да, добавить display: none»
• Какие поля скрываем — Укажите ID полей через запятую, которые нужно скрыть и исключить в формуле расчете. У указанных полей параметры «Визуально скрыть это поле» должен быть выставлен: «Нет»

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

Шорткод имеет следующий вид:

[wpcc id="1"]

где 1 — это ID вашего калькулятора

Если вам требуется вставить калькулятор в php файл темы, используйте следующий код:

<?php echo do_shortcode('[wpcc id="1"]'); ?>

Что означает «Текстовая формула ID полей»

Отображает структуру полей вашего калькулятора с знаками, выставленными в параметрах «до» и «после».
Данный параграф позволяет легко найти ошибки в своей формуле.

Что означает «Строка»

После расчета калькулятора в административной панели можно увидеть поле «Строка», которая отображает данные из полей, их знаки «до» и «после».
Эта строка выполняется перед отображением суммы.

Что такое "$_SESSION[‘wpcc_Х’]"

После расчета калькулятора в административной панели можно увидеть массив данных из сессии. В массиве ключ является ID поля, а значение — результатом поля. Ключ sum содержит в себе результат расчета.
Так же в массиве присутствуют названия указанных или выбранных данных пользователем в калькуляторе.

Что такое «ksort(array())»

После расчета калькулятора в административной панели можно увидеть отсортированный массив расчета данных с их знаками «до» и «после». Позволяет вам полностью увидеть картину формулы. Ключ массива НЕ является ID поля. Это порядковый номер в массиве.

Как изменить стили калькулятора

В калькулятора на момент написания статьи создано 4 простых темы.
Файлы тем расположены в папке плагина /wp-creator/calculator/theme/название выбранной вами темы для калькулятора
В каждой папке есть файл style.css который отвечает за оформление калькулятора.

Как использовать калькулятор не по назначению

Бывают случаи, когда рассчитывать в калькуляторе ничего не требуется, но нужно получить данные от пользователи.
Например: Вы хотите реализовать форму, в которой будет предложен выбор марки автомобиля. Посетителю при выборе определенной марки авто при помощи поля «Условие» отображаются следующие опции по конфигурации технических характеристик. После всех действий вам на почту приходят данные которые выбрал пользователь.
Для реализации подобной задачи, у всех полей выставляем «Нет» в параметре: «Это поле участвует в формуле расчета».
При помощи CSS вы можете скрыть поле результата расчета, чтобы посетитель не видел не нужную ему информацию в которой будет отображено 0 руб. Стиль отвечающие за блок с результатом расчета: .wpcc_result либо wpcc_result_X где X — это ID вашего калькулятора.

Как экспортировать формулу

Вы можете скопировать сериализованный массив для дальнейшей передачи или импорта в другой калькулятор через кнопку «Экспорт формулы». В экспортированных данных сохраняются все созданные поля и индивидуальные настройки калькулятора.

Как Импортировать формулу

Вы можете импортировать ранее сериализованный массив из другого калькулятора при помощи кнопки «Импорт формулы». В импортируемых данных содержатся все созданные поля и индивидуальные настройки калькулятора. Если вы импортируете данные с другого сайта (или переданные от друга), не забудьте поменять e-mail в настройках калькулятора на который будут отправляться письма.

Как установить плагин:
1. Скачать плагин — http://wordpress.org/plugins/wp-creator-calculator/
2. Закачать в папку плагинов вашего сайта wp-content/plugins/
3. Активировать плагин
4. Слева в меню административной панели выберите пункт WPCC
5. Создавайте и настраивайте свой калькулятор.

p.s. Ищу добровольного переводчика для плагина и инструкции на английский язык.

UPD: Версия 3.5.2

• Добавлен параметр для условия «Оператор условия»: ==, >, <, >=, <=
• Добавлен параметр фильтр для поля «Input text»: только цифры и точка
• Исправлена ошибка изменения названия калькулятора
• Добавлено новое поле «Результат полей». Позволяет выбрать поля и применить к ним арифметическое действие

UPD: видео: www.youtube.com/watch?v=eMHBxILCa9s

habr.com

1. Mortgage Calculator Sidebar Widget

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

2. Mortgage Loan Calculator

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

• сумма долга;
• процентная ставка;
• срок ипотеки.

3. Financial Toolbox

Это «двойной» плагин для WordPress, который не только позволит проводить расчеты онлайн, но и добавит на сайт дополнительный поток информации. Модуль предназначен для бизнес-порталов о финансах, биржевых рынках и инвестициях. Дополнение разделено на две части: бегущую строку с последними новостями из мира финансов, а также калькулятор для обсчета кредитов разного типа (не только ипотеки). Не совсем подходит для Рунета, так как новости транслирует на английском, но тем не менее, плагин полезный.

4. Net Worth Calculator

Прекрасный плагин для WordPress — добавляет на сайт калькулятор, который позволяет следить за потоками личных финансовых активов. Людям с большим достатком будет интересно узнать куда они тратят больше всего, и где в бюджете есть «дыры». После заполнения всех пунктов данного виджета, перед ними появится исчерпывающая диаграмма, отображающая в процентном соотношение все расходы и доходы.

5. Debt Reduction Calculator

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

6. BMI Calculator Widget

Данный плагин WordPress не имеет никакого отношения к финансам и связан со здоровьем человека. Подходит для сайтов о спорте, фитнесе, образах питания, йоге, медитации и т. д. Калькулятор рассчитывает индекс массы тела BMI, используя в качестве исходников вес и рост человека. Параметр BMI весьма известен в мире, потому таким виджетом обязательно будут пользоваться!

7. Adele’s Zodiac Calculator

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

8. Runner’s Log

Мощный многофункциональный калькулятор, у которого уже есть тысячи постоянных пользователей. Разместите этот плагин у себя на сайте WordPress, и часть этих пользователей перейдет к вам, и будут заходить на ресурс ежедневно, наращивая показы. Популярность инструмента спровоцирована его широким функционалом — калькулятор Runner’s Log рассчитывает калории, беговые расстояния, время тренировок, индекс BMI, прогнозируемое изменение веса и другие полезные статистические данные.

9. Blog or Website Value Calculator

Указанный калькулятор больше понадобится вам, нежели посетителям. Blog or Website Value Calculator — это плагин для подсчета стоимости сайта WordPress. Подсчет ведется в автоматическом режиме. Размещенный виджет будете видеть вы и ваши посетители. Таким образом вы сможете продемонстрировать всем свой рост, и показать успехи, каких достигли. Вебмастера, которые пользуются данным дополнением, уверяют, что он приносит недюжинную мотивацию!

10. Math Calculator

Когда речь зашла о калькуляторе, наверное, все, кто это читает, подумал о классическом приборе для подсчета математических данных. Плагин Math Calculator как раз этим и занимается. Только теперь пользователям не понадобится заходить в меню «Пуск» или брать телефон, чтобы провести расчеты — они смогут выполнить их прямо у вас на сайте WordPress. Это удобно, и если правильно воспользоваться такой возможностью, можно значительно повысить эргономичность вашего интернет-ресурса.

11. TimeZoneCalculator

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

12. Overweight Calculator

Еще один весовой калькулятор. Данный плагин WordPress также рассчитывает индекс массы тела. Главное его отличие в том, что помимо индекса BMI он указывает рекомендуемый вес для человека, а также килограммы, от которых нужно избавиться.

13. Love Calculator

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

14. Countdown Timer

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

15. GeneralStats

Это статистический калькулятор для сайта. Нужен он чтобы демонстрировать пользователям детальную статистику по количеству разных показателей на сайте:

• сколько всего пользователей;
• категорий;
• записей;
• комментариев;
• страниц;
• ссылок;
• меток;
• слов и т. д.

Еще один подобный плагин для WordPress — Post Stats. Он также высчитывает количество слов, записей и т. д., только еще отображает минимальные и максимальные их значения.

16. Price Calc

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

Выводы

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

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

wordpresslib.ru

Настройка полей калькулятора

После активации данного плагина у вас в левом меню появится пункт «WPCC»,

На странице плагина мы видим сообщение, о том что у нас не создано ни одного калькулятора.

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

Вводим название калькулятора и нажимаем кнопку «Добавить».
Далее нажимаем на ссылку «Перейти к настройкам»

Вся панель настроек разбита на 4 вкладки, это:

1. 1.Конструктор
2. 2.Экспорт формулы
3. 3.Импорт формулы
4. 4.Настройки

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

Мы будем использовать вкладку «Конструктор», для создания нашего калькулятора, и вкладку «Настройки» для задания необходимых параметров.

Итак, рассмотрим вкладку «Конструктор».

В самом верху мы видим название калькулятора, которое можно изменить.

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

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

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

Добавление поля Input hidden

Добавляем скрытое поле. Выбираем, в разворачивающемся списке, тип поля «Input hidden», и нажимаем кнопку «Добавить».

Далее, в разделе «Добавленные поля» у нас появляется выбранное поле. Для того, чтобы задать для него какие-то настройки необходимо нажать на значек +

Здесь мы можем:

1. 1.Ввести заголовок.
2. 2.Выбрать цвет для формы.
3. 3.Так как данное поле у нас будет самым первым в форме, то в графе «Знак до» мы ничего не ставим.
4. 4.«Знак после» — тоже, пока что не указываем.
5. 5.Далее, указываем базовую стоимость в поле «Цена».
6. 6.В поле «Данные», оставляем как есть, «Полученные данные».
7. 7.Далее, можно задать возможность учитывать это поле в расчетах или не учитывать. В нашем случае, мы его будем учитывать.

После задания параметров нажимаем на кнопку «Сохранить параметры полей».

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

Использование поля Select

Первый параметр, который мы зададим — объем жесткого диска. Для объема жесткого диска мы будем использовать тип поля «Select», т. е. это будет раскрывающийся список.

Выбираем тип поля «Select», нажимаем «Добавить». Для того, чтобы задать его настройки:

1. 1.Нажимаем на значек +
2. 2.Далее, вводим заголовок.
3. 3.В поле «Знак до» ставим +, т. е. у нас значение этого поля будет складываться со значением предыдущего поля.
4. 4.«Знак после» — пока что не трогаем.
5. 5.После чего добавляем список значений, который будет у нас высвечиваться в раскрывающемся списке.
6. 6.Первый вариант для выбора, который я добавлю, будет объем жесткого диска 500 Гб. В поле текст, пишу 500Гб
7. 7.В поле значение мне нужно задать стоимость данного жесткого диска, которое будет прибавляться к базовой стоимость ноутбука. К примеру, у меня здесь будет 1000.
8. 8.Для того чтобы добавить новый вариант, я нажимаю на ссылку «Добавить строку».
9. 9.Следующий вариант — 1 TB. Его стоимость будет равна, к примеру, 1500. И дальше, аналогично, добавляем 2TB, 4TB и т. д.
10. 10.В поле данные у нас так и должно оставаться «Полученные данные».
11. 11.В «Поле участвует при расчетах», оставляем «Да».
12. 12.«Визуально скрыть поле» оставляем «Нет».
13. 13.После того как мы задали все настройки — нажимаем «Сохранить параметры полей».

Поле Radio

Следующее поле, которое нам понадобится — поле для выбора цвета ноутбука. Для этого параметра мы воспользуемся типом поля «Radio».

1. 1.Выбираем этот тип и нажимаем на кнопку «Добавить». А затем нажимаем на знак + и задаём настройки.
2. 2.Указываем заголовок
3. 3.«Знака до» — ставим +
4. 4.«Знак после» — оставляем пустым
5. 5.А дальше, нам нужно точно так же задать список значений
6. 6.Так же здесь можно выбрать изображение для каждого варианта, для этого просто щелкаем по полю со ссылкой и открывается библиотека медиафайлов, через которую мы можем выполнить загрузку изображения.
7. 7.Для добавления вариантов аналогично, нажимаем на ссылку «Добавить строку».
8. 8.Значение поля «Данные» остается по умолчанию.
9. 9.«Поле участвует при расчетах» — также, остается по умолчанию.
10. 10.Нажимаю на кнопку «Сохранить параметры полей».

Добавление поля Slider

Следующий параметр, по которому будет выполняться расчет — это объем оперативной памяти.
Добавим еще одно поле, на этот раз это будет поле «Slider».

1. 1.Выбираем тип поля и нажимаем «Добавить». Slider представляет собой ползунок, двигая который у нас будет изменяться числовое значение.
2. 2.Нажимаем на значок + для настройки параметров.
3. 3.Задаем заголовок.
4. 4.«Знак до» — ставим +.
5. 5.«Минимальное значение» — 2.
6. 6.«Максимальное значение» — 12.
7. 7.«Шаг» будет равняться 2, т. е. у меня будет объём 2 Gb, 4 Gb, 6Gb и т. д. до 12Gb.
8. 8.Далее, нужно выбрать положение, горизонтальное либо вертикальное.
9. 9.После чего, необходимо указать значение по умолчанию. Так как у нас здесь идет минимальное значения 2Гб, мы задаем значение 2. Если у вас нет какого-то значения по умолчанию то вы здесь должны поставить 0.
10. 10.Поля «Данные», «Поле участвует при расчетах» и «Визуально скрыть поле» оставляем по умолчанию.
11. 11.Нажимаем «Сохранить параметры полей».

Для расчёта стоимости оперативной памяти и дальше выбранное значение будет умножаться на стоимость 1Гб оперативной памяти.

Добавляем еще одно поле «Input hidden»:

1. 1.Выбираем тип поля, нажимаем «Добавить».
2. 2.Вписываем заголовок «Цена за 1 Гб».
3. 2.«Знак до» будет стоять *.
4. 2.«Знак после» — не ставим.
5. 2.«Цена» — 250 рулей, к примеру.
6. 2.Нажимаем «Сохранить параметры полей».

Добавление поля Checkbox

Теперь к нашему ноутбуку мы еще добавим поле, которое называется «Checkbox».

1. 1.Выбираем этот тип поля и нажимаем на кнопку «Добавить», далее нажимаем на +, чтобы задать нужные параметры. В поле checkbox мы дадим возможность выбирать дополнительные аксесуары для ноутбука.
2. 2.«Знак до» — ставим +.
3. 3.«Знак после» — ничего не ставим.
4. 4.Далее, задаем список вариантов. Здесь так же можно добавлять изображение при необходимости.
5. 5.Далее, «Значение по умолчанию», ставим 0. Как видите, настройки этого поля очень похожи на настройки поля «Radio», но в отличии от этого типа полей, здесь есть еще такое поле, как «Действие с данными».
6. 6.Все остальные поля остаются по умолчанию.
7. 7.Нажимаем на кнопку «Сохранить параметры полей».

Поле Input text

Данные, вводимые в это поле будут просто прибавляться к общей сумме.

И еще одно поле, которое я вам покажу — называется «Input text».

1. 1.Добавляем этот тип поля и нажимаем +.
2. 2.Указываем заголовок.
3. 3.«Знак до» — ставим +.
4. 4.«Цена» — к примеру, 200 рублей.
5. 5.«Действия с данными» — +.
6. 6.«Значение по умолчанию» — 0.
7. 7.Так же, здесь можно задать «Placeholder». Это, текст, который будет высвечиваться в случае, если поле не заполнено.
8. 8.Также здесь можно задать максимальное количество символов вводимых в поле, если нужно.
9. 9.Далее, в поле «Валидация» можно выбрать тип проверки, т. е. в поле можно будет вписывать к примеру, только цифры, либо любые символы.
10. 10.Последние три поля оставляем по умолчанию.
11. 11.Нажимаем на кнопку «Сохранить параметры полей».

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

В верху у нас отображается текстовая формула, которая показывает, что происходит с нашими полями. Цифрами 1,2, 3 и т.д. обозначаются идентификаторы добавленных нами полей.

Вставка калькулятора на страницу

Для того чтобы это сделать нам нужно:

1. 1.Возвращаемся в самый верх страницы и копируем шорткод.
2. 2.Создаем новую страницу с названием «Калькулятор».
3. 2.Вставляем шорткод калькулятора во вкладку «Текст».
4. 2.Нажимаем на кнопку «Опубликовать».
5. 2.Переходим на страницу и смотрим как выглядит наш калькулятор.

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

После сохранения изменений и обновления страницы, мой калькулятор приобрёл следующий вид:

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

Видеоинструкция

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

Помимо вычислений этот калькулятор также умеет отправлять полученные данные на e-mail, причём не только администратору, а и пользователю.
Более подробно о том, как настроить эту возможность я расскажу в одной из следующих статей.
Подписывайтесь на обновления, чтобы ничего не пропустить.

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

С уважением Юлия Гусарь

impuls-web.ru

Обзор калькуляторов для ВордПресс

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

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

Итак, больше всего плагинов для расчета сложных банковских процентов для расчета ипотеки (Loan calculator Pro, CC Mortgage Calculator, Mortgage Loan Calculator и т.д.), автокредита (Car Loan Calculator, Car loan Application and Calculator Plagin), кредитов или времени для погашения долга(Dept Calculator).

Калькулятор сбережений CC Savings Calculator – подсчитает сумму процентов от хранения депозитов в банке.

Плагин WordPress Wall Paint Calculator by Ostheimer рассчитает необходимое количество краски, для окраски стен любого помещения с учетом окон и дверей.

Плагин WordPress Water Calculator поможет рассчитать необходимое количество бутилированной воды для долговременных поставок.

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

Фитнес-калькулятор Fitness Tracker, Runner Log помогут рассчитать физические нагрузки, индекс массы тела и другие расчеты.

Калькулятор идеального веса – для людей, следящих за своим весом, или худеющих (BMI BMR Calculator, BMI Calculator, Protech BMI Calculator).

Simple math calculator – простой калькулятор, для любых расчетов, на все случаи жизни (куда [calbtn] вставите, там и будет ваш калькулятор, хоть в виджете, хоть в записях и страницах).

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

drago-fly.ru

WPCC — это плагин, который позволяет администраторам сайта создавать форму калькуляторов и настраивать формулы расчетов.

Возможности конструктора:
* Поле : Текстовое поле для описания
* Поле : SELECT выпадающий список
* Поле : Checkbox множественный выбор
* Поле : Radio одиночный выбор
* Поле : Input Text для ввода данных
* Поле : Input Hidden скрытое поля
* Поле : $_SESSION работы с сессиями
* Поле : jQuery копируем данные
* Поле : Slider UI удобный слайдер
* Поле : Conditions условие работы полей с возможностью задать оператор : == , <, < =,> ,> =, between
* Поле : Conditions Hidden — скрытое условие для получения значения в зависимости от результата
* Поле : Арифметическая функция : Квадратный корень ; Возвести в степень ; Округлить
* Поле : Результат полей : результат между полями
* Поле : Произвольное поле записи : Custom Fields из записи или страницы

Отправка результатов на E-Mail:
* Настройка: Включить / выключить форму отправки
* Настройка: Тема письма
* Настройка: Указать на какой e-mail
* Настройка: Валидация полей
* Настройка: Оформление содержимого письма

Результаты расчета:
* Настройка: Можно добавить более 1 результата после расчета
* Настройка: Позволяет добавить арифметическое выражение для каждого из результата
* Настройка: Округление
* Настройка: Оформление

Другие настройки:
* Количество калькуляторов не ограничено
* Экспорт и импорт формулы
* Выбор дизайна калькулятора
* Хук ‘wpcc_result_filter’ на результате

Интерфейс админ панели

Демо калькулятора
Калькулятор для расчета стоимость создания сайта
Выбор марки авто без расчета стоимости

Принцип работы калькулятора:
поле1 + sqrt((поле 3 * (поле 2 + поле 4)))

Дословно:
(id1 (знак после поля)) квадратный корень из ((знак перед полем id3 знак после поля) (знак перед полем id2 знак после поля) (id4 знаки после поля))

Как установить плагин:
1. Скачать плагин — http://wordpress.org/plugins/wp-creator-calculator/
2. Закачать в папку плагинов вашего сайта wp-content/plugins/
3. Активировать плагин
4. Слева в меню административной панели выберите пункт WPCC
5. Создавайте и настраивайте свой калькулятор.

zetrider.ru