Блог Максима Войтика
Публикации о способах
заработка в интернете и SEO

Калькулятор для сайта на WordPress: основы создания, установка и готовые решения

21 октября 2016
Комментарии: 7

Азы по созданию калькулятора на сайте

Привет дорогие читатели seoslim.ru! Все мы знаем, что для продвижения сайтов в ТОПе недостаточно уже одного уникального и полезного контента.

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

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

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

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

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

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

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

пример калькулятора по беременности

пример калькулятора расчет шин

пример калькулятора оценка сайта

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

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

эффективность калькулятора на сайте

Пример простого калькулятора для сайта на PHP + JS


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

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

форма калькулятора на JavaScript

Форма счетчика будет создана с помощью тегов

<form> ... </form>

Для реализации ввода значений используем теги <input>

<form>
 Введите число 1 <input type="text" onchange="this.value=this.value.replace(/([^0-9])/g,'');" onkeyup="var n=this.value.replace(/([^0-9])/g,''); if(n!=this.value) this.value=n;"><br><br>
 Введите число 2 <input type="text" onkeyup="this.value=this.value.replace(/([^0-9])/g,'');"><br><br><br>
 <input type="button" value="Рассчитать">
 <input type="reset" value="Сброс"><br><br>
 Результат <input type="text">
</form>

Функция Onchange — убирает значения при добавлении их в форму.

Функция Onkeyup — убирает значения при добавлении их в форму кроме цифр.

Далее добавляем переменные в форму для тегов input, например, первое значение это латинская «x», второе вводимое значение в поле это латинская «y», а выходное значение это «summa».

<form>
 Введите число 1 <input type="text" name="x" onchange="this.value=this.value.replace(/([^0-9])/g,'');" onkeyup="var n=this.value.replace(/([^0-9])/g,''); if(n!=this.value) this.value=n;"><br><br>
 Введите число 2 <input type="text" name="y" onkeyup="this.value=this.value.replace(/([^0-9])/g,'');"><br><br><br>
 <input type="button" value="Рассчитать">
 <input type="reset" value="Сброс"><br><br>
 Результат <input type="text" name="summa"> </form>

Теперь чтобы форма заработала надо ее наделить разумом, то есть создать скрипт с помощью Java, который и будет вести расчеты.

<script lang="JavaScript">
function calculators(form) {
x = eval(form.a.value); //Присваиваем x значение из первого поля
y = eval(form.b.value); //Присваиваем y значение из второго поля
z = x+y; //Складываем значения x и y
form.total.value = z; //Выдаем результат
}
</script>

Словом calculators можно изменить на любое, так как им мы даем только название функции.

А для x, y, z задаем переменные, которые были созданные ранее.

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

<input type="button" value="Рассчитать" />

Для этого добавляем в инпут команду onclick ="calculators (this.form)" которая и запустить алгоритма калькулятора.

<script lang="JavaScript">
 function calculators(form) {
 x = eval(form.a.value);
 y = eval(form.b.value);
 z = x+y;
 form.total.value = z;
 }
 </script>
 <form>
 Введите число 1 <input type="text" name="x" onchange="this.value=this.value.replace(/([^0-9])/g,'');" onkeyup="var n=this.value.replace(/([^0-9])/g,''); if(n!=this.value) this.value=n;"><br><br>
 Введите число 2 <input type="text" name="y" onkeyup="this.value=this.value.replace(/([^0-9])/g,'');"><br><br><br>
 <input type="button" value="Рассчитать" onclick="calculators(this.form)">
 <input type="reset" value="Сброс"><br><br>
 Результат <input type="text" name="summa">
 </form>

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

Как установить калькулятор на сайт


Весь принцип работы калькулятора завязан на выполнении скрипта, поэтому каким-то из способов надо добавить скрипт на страницу записи WordPress.

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

В сети я нашел несколько путей как подключить JS скрипты к записям:

Шорткод. Данный способ основан на редактировании файла темы functions.php.

Здесь вам придется между < ?php ... ? > вставить специальный код:

function myJavascript1(){
$str='<script type="text/javascript">КОД</script>';
return $str;
}
add_shortcode( 'myJavascript1', 'myJavascript1');

где вместо КОД вставляем свой скрипт, а для вызова шорткода на странице используем [ myJavascript1 ].

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

Правка header.php. Один из наихудших методов, основанный на добавлении специального кода перед закрывающим тегом </ head> с номером страницы, в которой надо отобразить скрипт.

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

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

<iframe src="http://seoslim.ru/wp-content/calculators/calcul-1.html" width="585" height="300" frameborder="0" scrolling="no"></iframe>
  • ссылка — адрес где расположен файл с готовым калькулятором;
  • параметры width и height — задают размеры формы;
  • параметр frameborder — присваивает толщину границы фрейма;
  • параметр scrolling — задает или убирает полосу прокрутки.

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

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

пример кода калькулятора в записи блога

Но можно пойти и другим путем, об этом далее.

Готовые виджеты калькуляторов


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

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

Лично я привык работать только с проверенными проектами и поэтом для одного из своих сайтов скачал калькулятор через онлайн магазин WordPress - WP-R.ru

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

wp-r-ru-1

На следующей странице смотрим пример работы модуля, описание функций.

Возможности CoWaM:

  • Удобный поиск
  • Настройка дизайна
  • Адаптивная верстка
  • Мультиязычность

Если все устраивает жмем «Купить» и в специальной форме указываем домен сайта, адрес электронной почты.

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

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

wp-r-ru-2

Лицензию получите в ЛК после подтверждения оплаты.

wp-r-ru-3

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

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

Пример плагина калькулятора на сайте

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

Установка заняла считанные минуты.

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

(2 голос., в среднем: 5,00 из 5)
Загрузка...
С уважением, Максим Войтик
Буду рад, если нажмете на любую из кнопок:
Комментарии (7)
  1. Сергей Удалов в 05:52

    Давно ждал статью подобного рода. Вернее будет сказать, искал информацию подобного плана. Сам давно уже ищу калькулятор для одного из своих сайтов. Что касается упомянутого онлайн магазина — хотелось бы расширения ассортимента. Конкретно — калькуляторов! [:-|]

    Ответить
    • Максим Войтик в 18:45

      Разработчик обещал пополнять базу калькуляторов, так что ждем. :)

      Ответить
  2. seoonly.ru в 07:00

    и совсем недорого за такое расширение [good] [good]

    Ответить
  3. Галина Яковенко в 11:09

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

    Ответить
    • Максим Войтик в 18:43

      Калькулятор не проблема, на Кворке исполнителей хватает.

      Ответить
  4. Руслан в 12:31

    Сложная тема.

    Но то что калькуляторы нужны — здесь не поспоришь. Особенно если сайт на какую-нибудь женскую тематику

    Ответить
  5. Александр в 13:46

    Интересная идея. Если честно, то на обычных сайтах ничего подобного ещё не видел. Ну а для сайтов какой то определённой тематики, конечно же такие подобные счётчики или калькуляторы нужны. [good]

    Ответить
Оставить свой комментарий
Обязательно ознакомьтесь с правилами комментирования!!! СПАМ будет удален!
:) :-D ;-) :-| [star] [good] [present] [flower] [:-))] [:))] [:--_)] [:-|]

© 2011-2016 seoslim.ru, блог Максима Войтика

Внимание! Копирование материала строго запрещено. Соблюдайте авторские права и уважайте труд других людей!