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

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

04 ноября 2017
Комментарии: 14

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

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

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

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

У меня есть один сайт, где присутствуют сотни уникальных статей, контент публикуется каждый день. У площадки покупной дизайн, настроена разметка, адаптация под моб. устройства и так далее. Одним словом сделан по всем правилам 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 и вы сможете его внедрить как на страницах сайта, так и в любом другом месте.

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

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

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

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

На сегодня любой желающий может воспользоваться и другими калькуляторами:

Boile’r — справочник, который подскажет сколько варить тот или иной продукт.

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

HaWoB — калькулятор роста и веса малыша (выводит форму расчета веса и роста малыша согласно ВОЗ).

HaWoC — калькулятор роста и веса ребенка (выводит форму расчета веса и роста ребенка согласно ВОЗ).

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

Кстати, сообщение от Яндекса через пару дней пропало. Наверное был сбой в работе алгоритмов. ))

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

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

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

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

      Ответить
  2. seoonly.ru

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

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

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

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

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

      Ответить
    • Леонид

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

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

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

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

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

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

    Ответить
  6. Екатерина

    Хорошая статья. Только у меня почему-то не получается вставить способом через iframe. Не могу понять почему...

    Ответить
  7. Екатерина

    Отличная статья. очень помогла. Спасибо, Максим.

    Ответить
  8. Валерий

    Хорошая статья, спасибо автор! Жаль я не очень смыслю в коде 🙁 Через фрейм тоже почему-то не удалось поставить код. Недавно случайно наткнулся на сайт, где какой-то новый конструктор калькуляторов uCalc рекламили. Думал фигня какая-то, но как оказалось очень даже хорошая вещь. Для wordpress плагин есть, что лично для меня очень удобно оказалось.

    Ответить
  9. Kanapiya.ru

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

    Ответить
  10. Валерий

    Интересный и полезный материал. Спасибо, Максим! Думаю многим вебмастерам будет интересно узнать, как создать калькулятор на своем ресурсе. Удачи! С уважением, Валерий Бородин!!!

    Ответить
  11. Вячеслав

    Спасибо Максим, материал очень полезный! [good]

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

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

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