Геолокация на Wordpress плагином WT Geotargeting ❎ WpCraft

Задача. Необходимо вывести на WordPress-сайте блок в котором будет указан город посетителя с возможностью для него выбора своего или ближайшего населенного пункта. Например, часто можно встретить на сайтах такую фишку «Ваш город: Воронеж» и кликнув на ссылку открывается всплывающее окно, а в нем список городов, которые можно выбрать. Нужен плагин для определения и выбора города посетителя, а в зависимости от локации пользователя должны выводиться различные контактные данные.

Ваш город: Ашберн

Еще один плагин определения города — belingoGeo

Как это можно использовать. Геолокацию (геотаргетинг) можно использовать для показа пользователю определенного контента в зависимости от его локации (города). Например, показывать посетителю разные номера телефонов, адресов, или подставить в контент название города (например, «доставка осуществляется в город [Львов]») в зависимости от его географического местоположения.

Решение. На данный момент, возможно, лучшим бесплатным решением для сайтов ориентированных на Россию, Украину и СНГ будет плагин WT GeoTargeting. Он шорткодом выводит определившийся город. Но выводит только текст (не ссылкой как в примере), т.е. нужно отдельно оформить всплытие модального окна с выбором городов. Также, если перейти по ссылке с параметром вида
?wt_city_by_default=Москва (например, href="/page-1/?wt_city_by_default=Москва), то мы перейдем на страницу page-1, но уже шорткод здесь выведет город «Москва». Таким образом, нам нужно:

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

Ссылки по теме:

Документация по настройке плагина WT Geotargeting от разработчика.
Как сделать всплывающее окно на HTML и CSS при нажатии на кнопку + Подборка примеров.

Основные шорткоды и параметры для настройки геолокации плагином WT Geotargeting



[wt_geotargeting get="city"] — выводит город пользователя.

[wt_geotargeting get="city"] — выводит город пользователя.

Код №1: Вывод города пользователя, который определился в WT Geotargeting

Чтобы отобразить номер телефона для пользователя в зависимости от его города (географического местоположения) можно воспользоваться Кодом №2. Тип («phone») может быть своим, это необходимо для группировки:



<!-- Вывод номера в зависимости от города пользователя -->
[wt_geotargeting type="phone" city_show="Рязань"]8(4912) 00-00-00[/wt_geotargeting]
[wt_geotargeting type="phone" city_show="Москва"]8(499) 000-00-00[/wt_geotargeting]
[wt_geotargeting type="phone" default=true]8-800-000-0000[/wt_geotargeting]

<!-- Или от региона -->
[wt_geotargeting type="phone2" region_show="Самарская область"]8(4912) 00-00-00[/wt_geotargeting]
[wt_geotargeting type="phone2" region_show="Челябинская область"]8(499) 000-00-00[/wt_geotargeting]
[wt_geotargeting type="phone2" default=true]8-800-000-0000[/wt_geotargeting]

[wt_geotargeting type="phone" city_show="Рязань"]8(4912) 00-00-00[/wt_geotargeting]

[wt_geotargeting type="phone" city_show="Москва"]8(499) 000-00-00[/wt_geotargeting]

[wt_geotargeting type="phone" default=true]8-800-000-0000[/wt_geotargeting]

[wt_geotargeting type="phone2" region_show="Самарская область"]8(4912) 00-00-00[/wt_geotargeting]

[wt_geotargeting type="phone2" region_show="Челябинская область"]8(499) 000-00-00[/wt_geotargeting]

[wt_geotargeting type="phone2" default=true]8-800-000-0000[/wt_geotargeting]

Код №2: Вывод номера телефонов в зависимости от города пользователя

Get-переменные

wt_country_by_default — сохранение страны в cookie для дальнейшего использования
wt_district_by_default — сохранение округа в cookie для дальнейшего использования
wt_region_by_default — сохранение региона в cookie для дальнейшего использования
wt_city_by_default — сохранение города в cookie для дальнейшего использования
wt_geo_clean — очистка предустановленных данных из Cookie

Атрибуты

type — Тип контента. Любое произвольное имя объединяющее группу условий.
city_show — Условие «Совпадение города».
city_not_show — Условие «Несовпадение города».
region_show — Условие «Совпадение региона».
region_not_show — Условие «Несовпадение региона».
district_show — Условие «Совпадение округа».
district_not_show — Условие «Несовпадение округа».
country_show — Условие «Совпадение страны». Написание в формате «Альфа-2».
country_not_show — Условие «Несовпадение страны». Написание в формате «Альфа-2».
default — Значение по умолчанию. Рекомендуется использовать всегда, так как в случае отсутствия подключения к базе IP-адресов, значение Default выведется в обязательном порядке.
get — Вывод на экран значений региона пользователя. Доступные параметры атрибута: ip, country, city, region, district, lat, lng.



<a href="/kompyuter/?wt_city_by_default=Москва">Москва</a> — Для добавления на сайт возможности посетителю выбрать свой город.
<a href="/kompyuter/?wt_city_by_default=Рубежное">Рубежное</a>
<a href="/?wt_geo_clean=1">Отменить выбор</a> — сброс города

<a href="/kompyuter/?wt_city_by_default=Москва">Москва</a> — Для добавления на сайт возможности посетителю выбрать свой город.

<a href="/kompyuter/?wt_city_by_default=Рубежное">Рубежное</a>

<a href="/?wt_geo_clean=1">Отменить выбор</a> — сброс города

Код №3: Формирование ссылки для выбора города в WT Geotargeting

Алгоритм вывода на сайте города посетителя с возможностью изменить местоположение:

1. Устанавливаем плагин WT Geotargeting.

2. Устанавливаем (если нет) любой плагин, который выводит попап-окно, например Popup Maker или Popup Builder.

3. В шапке сайта размещаем шорткод и рядом текст Ваш город: [wt_geotargeting get="city"].

4. Создаем popup-окно в котором размещаем нужные города ссылками с параметром ?wt_city_by_default=Город, например, как в Код №4:



<ul style="column-count: 3;">
<li><a href="/?wt_city_by_default=Волгоград">Волгоград</a></li>
<li><a href="/?wt_city_by_default=Воронеж">Воронеж</a></li>
<li><a href="/?wt_city_by_default=Екатеринбург">Екатеринбург</a></li>
<li><a href="/?wt_city_by_default=Казань">Казань</a></li>
<li><a href="/?wt_city_by_default=Красноярск">Красноярск</a></li>
<li><a href="/?wt_city_by_default=Магнитогорск">Магнитогорск</a></li>
<li><a href="/?wt_city_by_default=Москва">Москва</a></li>
<li><a href="/?wt_city_by_default=Нижний+Новгород">Нижний Новгород</a></li>
<li><a href="/?wt_city_by_default=Новосибирск">Новосибирск</a></li>
<li><a href="/?wt_city_by_default=Омск">Омск</a></li>
<li><a href="/?wt_city_by_default=Пермь">Пермь</a></li>
<li><a href="/?wt_city_by_default=Ростов-на-Дону">Ростов-на-Дону</a></li>
<li><a href="/?wt_city_by_default=Самара">Самара</a></li>
<li><a href="/?wt_city_by_default=Санкт-Петербург">Санкт-Петербург</a></li>
<li><a href="/?wt_city_by_default=Уфа">Уфа</a></li>
<li><a href="/?wt_city_by_default=Челябинск">Челябинск</a></li>
<li><a href="/?wt_geo_clean=1">Отменить выбор</a></li>
</ul>

<li><a href="/?wt_city_by_default=Волгоград">Волгоград</a></li>

<li><a href="/?wt_city_by_default=Воронеж">Воронеж</a></li>

<li><a href="/?wt_city_by_default=Екатеринбург">Екатеринбург</a></li>

<li><a href="/?wt_city_by_default=Казань">Казань</a></li>

<li><a href="/?wt_city_by_default=Красноярск">Красноярск</a></li>

<li><a href="/?wt_city_by_default=Магнитогорск">Магнитогорск</a></li>

<li><a href="/?wt_city_by_default=Москва">Москва</a></li>

<li><a href="/?wt_city_by_default=Нижний+Новгород">Нижний Новгород</a></li>

<li><a href="/?wt_city_by_default=Новосибирск">Новосибирск</a></li>

<li><a href="/?wt_city_by_default=Пермь">Пермь</a></li>

<li><a href="/?wt_city_by_default=Ростов-на-Дону">Ростов-на-Дону</a></li>

<li><a href="/?wt_city_by_default=Самара">Самара</a></li>

<li><a href="/?wt_city_by_default=Санкт-Петербург">Санкт-Петербург</a></li>

<li><a href="/?wt_city_by_default=Челябинск">Челябинск</a></li>

<li><a href="/?wt_geo_clean=1">Отменить выбор</a></li>

</ul>

Код №4: Список выбора городов ссылками

5. Если используется Pro-версия плагина, то можно еще добавить поиск города — Код №5 (и продолжение этой настройки в п.6):

Поиск по городам плагином WT Geotargeting — Изображение №1: Список городов и поиск



<div id="geotargetingRegionModalLabel" class="modal-title">Ваш город</div>
<!-- Поле поиска города -->
<input id="search_location_name" class="text-field" style="width: 100%; margin-bottom: 10px;" name="search_location_name" type="text" placeholder="Найти город" />
<!-- Кнопка поиска города -->
<button id="search_location_button" class="text-field us-btn-style_9 ush_btn_1 w-btn" style="width: 100%;" name="gorod_87">Поиск</button>
<!-- Блок вывода результата -->
<div id="search_location_result"></div>
<script type="application/javascript">
    jQuery(function() {
        jQuery('#search_location_name').keypress(function () {
                searchLocation();
            }
        );
        jQuery('#search_location_button').click(function () {
                searchLocation();
            }
        );
    });
    // Поиск города на форме выбора региона
    function searchLocation() {
        searchLocationName = jQuery("#search_location_name").val();
        jQuery.ajax({
                url: '/wp-admin/admin-ajax.php',
                type: 'POST',
                data: {
                    action: 'search_location',
                    value: searchLocationName,
                    data_type: 'object'
                },
                beforeSend: function (xhr) {
                },
                success: function (data) {
                    search_location_result_html = '';
                    cities = JSON.parse(data);
                    for (key in cities) {
                        console.log(cities[key]);
                        search_location_result_html += '<a onclick="WtLocation.setValue('; search_location_result_html += "'" + cities[key].post_title + "', 'city', 'reload')"; search_location_result_html += '" class="">' + cities[key].post_title + '</a><br>';
                    }
                    jQuery("#search_location_result").html(search_location_result_html);
                }
            }
        );
    }
</script>

<div id="geotargetingRegionModalLabel" class="modal-title">Ваш город</div>

<button id="search_location_button" class="text-field us-btn-style_9 ush_btn_1 w-btn" style="width: 100%;" name="gorod_87">Поиск</button>

jQuery(function() {

jQuery('#search_location_name').keypress(function () {

searchLocation();

}

);

jQuery('#search_location_button').click(function () {

searchLocation();

}

);

});

// Поиск города на форме выбора региона

function searchLocation() {

searchLocationName = jQuery("#search_location_name").val();

jQuery.ajax({

url: '/wp-admin/admin-ajax.php',

type: 'POST',

data: {

action: 'search_location',

value: searchLocationName,

data_type: 'object'

beforeSend: function (xhr) {

success: function (data) {

search_location_result_html = '';

cities = JSON.parse(data);

for (key in cities) {

console.log(cities[key]);

search_location_result_html += '<a onclick="WtLocation.setValue('; search_location_result_html += "'" + cities[key].post_title + "', 'city', 'reload')"; search_location_result_html += '" class="">' + cities[key].post_title + '</a><br>';

}

jQuery("#search_location_result").html(search_location_result_html);

}

);

}

</script>

Код №5: Поле поиска по городу (только для WT Geotargeting Pro, предварительно нужно скачать и импортировать во вкладке «WT GeoTargeting — Импорт» список городов cities.txt

6. Также, чтобы работал поиск по городам необходимо загрузить список городов файл cities.txt в меню WT Geotargeting Pro — Импорт:

Изображение №2: Настройки импорта городов в WT Geotargeting Pro

Полезные файлы:

Список городов и областей РФ и Украины, файл cities.txt для IpGeoBase — Скачать
Список только городов России в файле cities_rf.txt — Скачать.

Часто бывают проблемы с выводом Кода №5 при размещении его в редакторе контента, в конструкторах, из-за того что WP преабразует html-теги. В таком случае, можно добавить в теме php-файл и вставить в него Код №5. В functions.php добавить шорткод (Код №6), который будет выводить код из этого файла. Сам шорткод разместить где требуется.



function qfurs_func_wttarget_cities ( $attr, $content = null ) {
	ob_start();
    include_once 'target-city.php';  // файл в папке темы с Кодом №5
	return ob_get_clean();
}
 
add_shortcode ( 'qfurs_wttarget_cities', 'qfurs_func_wttarget_cities' );

function qfurs_func_wttarget_cities ( $attr, $content = null ) {

ob_start();

include_once 'target-city.php'; // файл в папке темы с Кодом №5

return ob_get_clean();

}

add_shortcode ( 'qfurs_wttarget_cities', 'qfurs_func_wttarget_cities' );

Код №6: Вывод по шорткоду html из файла темы