Геотаргетинг в wordpress

В этой статье я опишу как я делал геотаргетинг в wordpress. Если в двух словах:

  1. Написал плагин для ведения списка городов и телефонов;
  2. Подключил jquery фреймворк jquery.balloon.js;
  3. Воспользовался API Yandex карт;
  4. Установил плагин EasyModal;
  5. Все это связал воедино и добавил работу с cookie;

Кому интересны подробности – добро пожаловать под кат


Что получилось в итоге Вы можете посмотреть на сайте: http://fasad-steklo.ru

Шаг 1. Пишем плагин для wordpress

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

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

Я назвал плагин opCity и таким образом у меня в wordpress появилась директория /wp-content/plugins/opCity и файл /wp-content/plugins/opCity/opCity.php.

При этом плагин должен создать таблицу в базе данных для хранения городов и телефонов. Это решается добавлением функции opCity_install(). Так выглядит функция у меня:

Ну и конечно дропаем таблицу при деактивации плагина следующим кодом:

Весь код приводить здесь не буду. Там более-менее все ясно, так что качайте мой архив с файлами и разархивируйте его в /wp-content/plugins.

Скачали? Разархивировали? Активировали? Тогда продолжаем!

Как Вы уже заметили в архиве 3 файла:

  1. opCity.php – в нем содержится основная логика работы плагина.
  2. jquery.balloon.js – это jquery фреймворк для подсказок по типу: “Ваш город: Москва. Угадали?”
  3. my_query.js – в этом файле функции работы с cookie и работа с ajax запросами.

Шаг2. Подключение jquery.balloon.js

Тут Вам ничего писать не надо, т.к. все уже написано в скаченном архиве.

Подключение обоих js файлов выполняется в теле файла opCity.php следующей строкой

Аналогичным образом добавляем и скрипт my_query.js

Шаг 3. Использование API Yandex.maps

Подключение осуществляется несколько иначе, т.к. эти скрипты находятся на другом ресурсе (на Яндексе).

Приведу код подключения яндекс карт в своих плагинах wordpress:

Вызов процедур для работы c yandex я прописал в файле my_query.js

Код относительно API яндекс карт получился весьма маленьким.

В одной из jquery процедур, которая вызывается после загрузки страницы я вызываю инициализацию Яндекс карт примерно так:

В действительности там еще идет проверка на наличие города в cookie, но если вам интересны такие подробности – смотрите код в скаченном архиве.

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

А уже в переменной geolocation живет определившийся город (geolocation.city).

Шаг 4. Подключение плагина EasyModal

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

Шаг 5. Связка всего этого безобразия

Для начала нам нужно отображать список городов, которые мы добавили через админку (Параметры -> База городов).

Поэтому в файле opCity.php регистрируем шорткод следующим кодом:

Затем вставляем шорткод в подготовленную ранее форму EasyModal. Если кто не в курсе – шорткод вставляется так: [opcity_list]

А ссылку, при клике на которую будет появляться список городов я вставил в шаблон header.php так: <a href=”#” class=”eModal-3″ id=”cityname”></a>

Клик по городу вызывает ajax функцию, которая делает выборку из базы данных и вставляет телефон в нужно поле, т.е. навешиваю на событие onclick вызов функции: myfunction(31); return false; где 31 – id записи в базе данных.

Запись в cookie id города происходит только при выборе города или при нажатии на кнопку “Да”, когда плагин спрашивает угадал ли он город.

После формирования страницы плагин смотрит в cookie и ищет там город. Если город найден – вызывает ajax функцию, которая делает запрос к базе и проставляет в нужные элементы наименование города и телефон

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

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

Меток нет