В этой статье я опишу как я делал геотаргетинг в 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(). Так выглядит функция у меня:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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); //Добавляем таблицу } |
Ну и конечно дропаем таблицу при деактивации плагина следующим кодом:
|
1 2 3 4 5 6 7 |
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 следующей строкой
|
1 2 3 4 5 |
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:
|
1 2 3 |
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 процедур, которая вызывается после загрузки страницы я вызываю инициализацию Яндекс карт примерно так:
|
1 2 3 |
jQuery(document).ready(function(){ ymaps.ready(init); }); |
В действительности там еще идет проверка на наличие города в cookie, но если вам интересны такие подробности – смотрите код в скаченном архиве.
Определить город посетителя, используя Яндекс карты не просто, а очень просто. Навешиваем на процедуру инициализации примерно такой код:
|
1 2 3 |
function init() { var geolocation = ymaps.geolocation; } |
А уже в переменной geolocation живет определившийся город (geolocation.city).
Шаг 4. Подключение плагина EasyModal
Данный плагин устанавливается из админки и достаточно прост в настройках, поэтому расписывать этот шаг не буду.
Шаг 5. Связка всего этого безобразия
Для начала нам нужно отображать список городов, которые мы добавили через админку (Параметры -> База городов).
Поэтому в файле opCity.php регистрируем шорткод следующим кодом:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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 не находит город – пытается его определить. После определения – ищет в базе город по наименованию. Если находит – ставит его, если не находит – ставит Москву, но Вы можете немного переписать код и сделать город по умолчанию другим.
Вот и все. Если у Вас остались вопросы – пишите в комментариях.