Геолокация на WordPress плагином WT Geotargeting

Категория: WordPress

Содержание

Задача. Необходимо вывести на 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]

<!-- ** Pro-версия ** -->
<!-- Поле поиска городов -->
[wt_location_search/]
<!-- Вывод списка городов с поддоменом 3 списка -->
[wt_locations type_select_location="link_subdomain" columns=3 container_class="row" column_class="col-12 col-md-4"/]

[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_location_search/]

[wt_locations type_select_location="link_subdomain" columns=3 container_class="row" column_class="col-12 col-md-4"/]

Код №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-версия плагина, то можно еще добавить поиск города шорткодом [wt_location_search/] или скриптом из Код №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

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

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 из файла темы

Изменение поиска по городам на поиск по округам, областям

Выше был показан вывод поля поиска по городам (Код №5). По умолчанию плагин может делать поиск только по городам. Если нужен поиск по областям, округам, то можно в functions.php прописать свой обработчик AJAX-запроса и сделать шорткодполя поиска (Код №7):


/*** Обработчик AJAX для поиска по регионам и округам ***/
function qfurs_wt_ajax_search_locations() {
    $value = sanitize_text_field($_POST['value']);
    
    if (isset($_POST['data_type'])) {
        $data_type = sanitize_text_field($_POST['data_type']);
    } else {
        $data_type = 'array';
    }

    // Фильтр по региону и округу
    // 'administrative_district' - Административный округ, 'city' - Город, 'region' - Регион, 'district' - Округ, 'country' - Страна
    $filter_types = array(
        'type' => array('region', 'district')
    );

    if ($data_type == 'array') {
        // Используем метод getRegionsArray для получения данных
        $locations = Wt::$obj->contacts->getRegionsArray(
            array(
                'filter' => $filter_types,
                'title' => $value
            )
        );
    } elseif ($data_type == 'object') {
        $locations = Wt::$obj->contacts->getRegionsArray(
            array(
                'item_type' => 'object',
                'title' => $value,
                'filter' => $filter_types
            )
        );
    }

    echo json_encode($locations);
    wp_die();
}

// Привязка к AJAX действиям
add_action('wp_ajax_custom_wt_search_location', 'qfurs_wt_ajax_search_locations');
add_action('wp_ajax_nopriv_custom_wt_search_location', 'qfurs_wt_ajax_search_locations');

# Шорткод для вывода поля поиска с фильтром [qfurs_wt_search_form]
function custom_wt_search_form() {
    ob_start(); ?>
    <div id="geotargetingRegionModalLabel" class="modal-title">Ваш выбор</div>
    <!-- Поле поиска -->
	<input type="text" id="search_location_name" name="search_location_name" aria-label="Поиск" aria-describedby="search_location_button" placeholder="Введите название региона" data-result-div-id="search_location_result" data-url-rule="" autocomplete="off">
    <!-- Кнопка поиска -->
    <button id="search_location_button" class="btn" style="width: 100%;" name="gorod_87">Поиск</button>
    <!-- Блок вывода результата -->
    <div id="search_location_result"></div>

 <script type="application/javascript">
    jQuery(function() {
        jQuery('#search_location_button').click(function () {
            searchLocation();
        });
    });

    // Поиск по регионам и округам одновременно
    function searchLocation() {
        let searchLocationName = jQuery("#search_location_name").val();
        
        jQuery.ajax({
            url: '/wp-admin/admin-ajax.php',
            type: 'POST',
            data: {
                action: 'custom_wt_search_location',
                value: searchLocationName,
                data_type: 'object'
            },
            beforeSend: function (xhr) {},
            success: function (data) {
                let search_location_result_html = '';
                let locations = JSON.parse(data);
                for (let key in locations) {
                    // Отображение результатов
                    search_location_result_html += '<a onclick="WtLocation.setValue(\'' + locations[key].post_title + '\', \'region_or_district\', \'reload\');" class="">' + locations[key].post_title + '</a><br>';
                }
                jQuery("#search_location_result").html(search_location_result_html);
            }
        });
    }
</script>
<?php
    return ob_get_clean();
}

add_shortcode('qfurs_wt_search_form', 'custom_wt_search_form');

/*** Обработчик AJAX для поиска по регионам и округам ***/

function qfurs_wt_ajax_search_locations() {

$value = sanitize_text_field($_POST['value']);

if (isset($_POST['data_type'])) {

$data_type = sanitize_text_field($_POST['data_type']);

} else {

$data_type = 'array';

}

// Фильтр по региону и округу

// 'administrative_district' - Административный округ, 'city' - Город, 'region' - Регион, 'district' - Округ, 'country' - Страна

$filter_types = array(

'type' => array('region', 'district')

);

if ($data_type == 'array') {

// Используем метод getRegionsArray для получения данных

$locations = Wt::$obj->contacts->getRegionsArray(

array(

'filter' => $filter_types,

'title' => $value

)

);

} elseif ($data_type == 'object') {

$locations = Wt::$obj->contacts->getRegionsArray(

array(

'item_type' => 'object',

'title' => $value,

'filter' => $filter_types

)

);

}

echo json_encode($locations);

wp_die();

}

// Привязка к AJAX действиям

add_action('wp_ajax_custom_wt_search_location', 'qfurs_wt_ajax_search_locations');

add_action('wp_ajax_nopriv_custom_wt_search_location', 'qfurs_wt_ajax_search_locations');

# Шорткод для вывода поля поиска с фильтром [qfurs_wt_search_form]

function custom_wt_search_form() {

ob_start(); ?>

<div id="geotargetingRegionModalLabel" class="modal-title">Ваш выбор</div>

<button id="search_location_button" class="btn" style="width: 100%;" name="gorod_87">Поиск</button>

jQuery(function() {

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

searchLocation();

});

// Поиск по регионам и округам одновременно

function searchLocation() {

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

jQuery.ajax({

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

type: 'POST',

data: {

action: 'custom_wt_search_location',

value: searchLocationName,

data_type: 'object'

beforeSend: function (xhr) {},

success: function (data) {

let search_location_result_html = '';

let locations = JSON.parse(data);

for (let key in locations) {

// Отображение результатов

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

}

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

}

});

}

</script>

<?php

return ob_get_clean();

}

add_shortcode('qfurs_wt_search_form', 'custom_wt_search_form');

Код №7: Пользовательский поиск по областям и регионам для плагина WT GeoTargeting

5 1 голос

Рейтинг статьи

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

Старые

Новые Популярные

Межтекстовые Отзывы

Посмотреть все комментарии

Артем

2 лет назад

Здравствуйте! Где можно список городов скачать, ссылка не работает. Не могли бы вы прислать файл? Спасибо

Автор

qfurs

2 лет назад

Ответить на Артем

Обновил ссылку на cities.txt

Александр

2 лет назад

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

Но при поиске городов список выдает, однако если выбрать город, то перенаправления на поддомен не происходит. Может знаете как подправить? Готовы оплатить.

Автор

qfurs

2 лет назад

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

Не приходилось работать с поддоменами. Могу только порекомендовать документацию по настройке

Иван

2 лет назад

Спасибо! А можно статью как правильно настроить этому плагину динамический кэш для плагина Super Cache?

Автор

qfurs

2 лет назад

Ответить на Иван

Пока получилось только с W3 Total Cache

Игорь

2 лет назад

А можете показать пример сайта с таким работающим плагином? За ранее благодарю!

Автор

qfurs

2 лет назад

Ответить на Игорь

1 Пример
2 Или вот пример самого разработчика

Игорь

2 лет назад

Протестил ваш методот, работает!
Появились вопросы:

Как реализовать отображение URL на латинице (пример: Moskva), а название в тегах и тексте на кирилице (Пример: Москва)
Есть ли возможность склонения названия городов? (Пример: Москве, Москвы, Москву)
Что нужно сделать что бы канонический адрес соответствовал региону? (Пример для <a href=»/kompyuter/?wt_city_by_default=Москва»>Москва</a>, что бы обображалось вот так: <link rel=»canonical» href=»https://sait.ru/kompyuter/?wt_city_by_default=Moskva» class=»yoast-seo-meta-tag» />
Как прикрепить к каждому городу свой адрес офиса?

Валерик

2 лет назад

Ответить на Игорь

Присоеденяюсь к вопросам!

Автор

qfurs

2 лет назад

Ответить на Игорь

Как прикрепить к каждому городу свой адрес офиса?

В статье Код №2 как раз показывает, как можно выводить телефон в зависимости от города. Анологично можно выводить любую информацию.

По остальным вопросам не подскажу. Нужно читать документацию разработчика (ссылки в статье есть)
Кажется, информация по склонению названий городов была в документации.

Тимур

1 год назад

Как настроить поддомены?

Автор

qfurs

1 год назад

Ответить на Тимур

Не знаю. Ссылку на доки выше в комментах скидывал.