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

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

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

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

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

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

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

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

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

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

function opCity_install()		//Функция активации плагина
{
    global $wpdb;
    $table_opCity = $wpdb->prefix.opCity_city;
    $sql1 = "	CREATE TABLE IF NOT EXISTS `".$table_opCity."` (
		  `id` int(10) NOT NULL AUTO_INCREMENT,
		  `name` varchar(250) NOT NULL,
		  `phone` varchar(250) NOT NULL,
		  PRIMARY KEY (`id`)
		) ENGINE=InnoDB DEFAULT CHARSET=utf8;
	     ";
    $wpdb->query($sql1);		//Добавляем таблицу
}

function opCity_install() //Функция активации плагина

{

global $wpdb;

$table_opCity = $wpdb->prefix.opCity_city;

$sql1 = " CREATE TABLE IF NOT EXISTS `".$table_opCity."` (

`id` int(10) NOT NULL AUTO_INCREMENT,

`name` varchar(250) NOT NULL,

`phone` varchar(250) NOT NULL,

PRIMARY KEY (`id`)

) ENGINE=InnoDB DEFAULT CHARSET=utf8;

$wpdb->query($sql1); //Добавляем таблицу

}

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

function opCity_uninstall()		//Функция деактивации плагина
{
    global $wpdb;
    $table_opCity = $wpdb->prefix.opCity_city;
    $sql1 = "DROP TABLE `".$table_opCity."`;";		//удаляем таблицу
    $wpdb->query($sql1);
}

function opCity_uninstall() //Функция деактивации плагина

{

global $wpdb;

$table_opCity = $wpdb->prefix.opCity_city;

$sql1 = "DROP TABLE `".$table_opCity."`;"; //удаляем таблицу

$wpdb->query($sql1);

}

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

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

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

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

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

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

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

add_action('wp_enqueue_scripts', 'my_enqueue');
function my_enqueue()
{
wp_enqueue_script('jqballoon', plugins_url('/js/jquery.balloon.js',__FILE__), array('jquery'));
}

add_action('wp_enqueue_scripts', 'my_enqueue');

function my_enqueue()

{

wp_enqueue_script('jqballoon', plugins_url('/js/jquery.balloon.js',__FILE__), array('jquery'));

}

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

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

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

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

wp_deregister_script( 'yandexmaps' );
wp_register_script( 'yandexmaps', 'http://api-maps.yandex.ru/2.0/?load=package.standard&lang=ru-RU');
wp_enqueue_script( 'yandexmaps' );

wp_deregister_script( 'yandexmaps' );

wp_register_script( 'yandexmaps', 'http://api-maps.yandex.ru/2.0/?load=package.standard&lang=ru-RU');

wp_enqueue_script( 'yandexmaps' );

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

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

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

jQuery(document).ready(function(){
     ymaps.ready(init);
});

jQuery(document).ready(function(){

ymaps.ready(init);

});

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

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

function init() {
   var geolocation = ymaps.geolocation;
}

function init() {

var geolocation = ymaps.geolocation;

}

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

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

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

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

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

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

add_shortcode( 'opcity_list', 'get_city_list' );
function get_city_list()
{
	global $wpdb;
	$table_opCity = $wpdb->prefix.opCity_city;
	$citylist = $wpdb->get_results("SELECT * FROM $table_opCity order by name");
	$opstr = "<ul class='cityul'>";
	foreach ($citylist as $item) 			//Выбираем в цикле все записи из таблицы
	{
             $opstr .= "<li class='cityli'><a href='#' onclick='myfunction(".$item->id."); return false;' class='mycity city_".$item->id."'>".$item->name."</a></li>";
	}
	$opstr .= "</ul>";
return $opstr;
}

add_shortcode( 'opcity_list', 'get_city_list' );

function get_city_list()

{

global $wpdb;

$table_opCity = $wpdb->prefix.opCity_city;

$citylist = $wpdb->get_results("SELECT * FROM $table_opCity order by name");

$opstr = "<ul class='cityul'>";

foreach ($citylist as $item) //Выбираем в цикле все записи из таблицы

{

$opstr .= "<li class='cityli'><a href='#' onclick='myfunction(".$item->id."); return false;' class='mycity city_".$item->id."'>".$item->name."</a></li>";

}

$opstr .= "</ul>";

return $opstr;

}

Затем вставляем шорткод в подготовленную ранее форму 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 не находит город — пытается его определить. После определения — ищет в базе город по наименованию. Если находит — ставит его, если не находит — ставит Москву, но Вы можете немного переписать код и сделать город по умолчанию другим.

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

18 комментариев

Владимир:

04.11.2014 в 19:13

Спасибо за плагин! Данная реализация очень интересна.
Не могу разобраться, как же все-таки выводится название города?

Здесь же нет ссылки как таковой…
И как вывести номер телефона и куда тоже не понял.
Ответьте, пожалуйста, поподробней.

Да, и еще, если я использую другой можель для вывода модальных окон, что в коде изменится?
- Опарин Павел:
  
  05.11.2014 в 11:33
  
  Используютя функция обработки onclick (onclick=’myfunction(«.$item->id.»)), а в исходниках есть javascript функция ‘myfunction’
  Модуль вывода модальных окон можно и другой использовать.
  - Владимир:
    
    05.11.2014 в 17:11
    
    Это я понял. Не понял другое. Вы пишите:
    «После формирования страницы плагин смотрит в cookie и ищет там город. Если город найден – вызывает ajax функцию, которая делает запрос к базе и проставляет в нужные элементы наименование города и телефон»
    
    Нужные элементы — это какие? Где в html прописать, что вот тут номер, а тут город?
    
    И еще вопрос — на локальном хостинге будет работать? А то я вроде все сделал, а при загрузке страницы город сразу не проставляется…или, может, я ступил на предыдущем вопросе и что-то не так прописал?
    
    Спасибо за ответ!
    - Опарин Павел:
      
      05.11.2014 в 17:49
      
      При активации плагина в wordpress — появиться новый пункт «Параметры» — «База городов»
      Там указываете название города и телефон
      Далее на странице HTML блоку с телефоном добавляете класс «cityphone»
      При нажатии на кнопку с городом происходит ajax запрос и ответ возвращается во все блоки с классом «cityphone»
      И еще попробуйте заменить скрипт my_query.js на этот:
      http://fasad-steklo.ru/wp-content/plugins/opCity/js/my_query.js?ver=3.8.3
      Я там еще исправлял некоторые баги, а переливал его сюда или нет — не помню.
Алекс:

03.12.2014 в 23:17

Супер!
Только у меня жутко подтормаживает появление телефона, на страницах с секундной задержкой появляется, а у Вас на сайте все плавно.
- Опарин Павел:
  
  03.12.2014 в 23:54
  
  Скиньте адрес Вашего сайта. Я попробую разобраться в чем дело.
  - Алекс:
    
    04.12.2014 в 17:50
    
    Ещё только начал делать, и тут директор попросил добавить фишку с городами http://thebench.ru/
    Там кнопка чуть ниже слайдера, думаю сначала этот вопрос решу потом двинусь дальше.
Марат:

12.01.2015 в 00:45

Здравствуйте! Скажите можно ли каким то образом использовать данный плагин, для выводы определенных категорий для каждого отдельного города? Т.е. для скажем Москвы выводить новости с категории «Москва»? Если да, то подскажите как. Спасибо
- Опарин Павел:
  
  12.01.2015 в 04:12
  
  Естественно можно, если допилить напильником 🙂
  А если серьезно — попробуйте зайти на мой блог через месяц. У меня есть планы по человеческому оформлению этого плагина. И Ваши пожелания тоже учту.
  Но делать я это буду только если у меня времени хватит.
  - Марат:
    
    12.01.2015 в 21:31
    
    Спасибо! Зайду!
Сергей:

26.01.2015 в 05:06

Спасибо за плагин! Было бы интересно увидеть более «глубокую» реализацию данного плагина с API Яндекс.Карт.
Если точнее, то сейчас стоит задача показать ближайшие маркеры, отмеченные на карте, в зависимости от текущей геопозиции.
Ольга:

01.03.2015 в 02:10

Спасибо за очень нужный плагин!
Подскажите, пожалуйста, как сделать, чтобы при выборе города (клике на название города) модальное окно само закрывалось?
- Опарин Павел:
  
  02.03.2015 в 10:46
  
  Нужно ссылкам с названием городов добавить класс «emodal-close»
Андрей:

03.03.2015 в 01:32

Добрый день!
Подскажите, будет ли обещанное допиливание плагина?))
У меня задача — выводит блок на странице если пользователь из Москвы, а если не из Москвы, то скрывать его.
Будут ли такие возможности у плагина, или можно с вами связаться по поводу доработки и внедрения на сайте?
- Опарин Павел:
  
  03.03.2015 в 10:14
  
  Ответил на почту
Максим:

16.05.2015 в 11:47

Здравствуйте, подскажите пожалуйста этот плагин подойдёт для доски объявлений?
- Опарин Павел:
  
  16.05.2015 в 22:25
  
  Максим, это скорее всего гайд для программистов, нежели готовый плагин. На основе этой статьи Вы можете сделать плагин для любой cms
Максим:

17.05.2015 в 13:01

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