Готовый набор данных для создания и отображения на вашем Wordpress-сайте интерактивной карты России в формате svg, где каждый регион - это кастомная запись блога.
За основу взята svg-карта ru-svg-map.
Благодарю @petrozavodsky и @soulseekah за код-ревью и фиксы кода.
Также запилен плагин для Wordpress, выводящий всю эту красоту шорткодами и имеющий несколько плюшек в настройке и отображении.
- Подключите к
functions.php
файлposttype-regions.php
(или скопируйте всё его содержимое). - Импортируйте данные из файла
regions_data.xml
на ваш сайт (Инструменты -> Импорт -> Wordpress). - В месте, где вы хотите вывести карту России, используйте код из файла
regions.php
.
Поскольку svg-карта рисуется непосредственно в теле документа, внешний вид её элементов можно напрямую изменять с помощью css.
Кроме того, каждый регион - элемент карты имеет свой id.
Регионы на карте - это 85 кастомных записей, внутри которых в дополнительном метаполе содержится svg-код, который отвечает за отрисовку конкретного региона. Без этих данных карта просто не отобразится.
Вы также можете использовать дополнительные метаполя, чтобы более разнообразить и усложнить карту. Для этого добавьте необходимые вам input / textarea / etc. в файл posttype-regions.php
после 48 строки.
Каждое метаполе должно обязательно иметь атрибут name="ext_region[$metaname]"
, где $metaname
- уникальный ключ - название поля.
Редактирование метабоксов заблочено, т.е. сам блок с кастомным метабоксом, внутри которого содержится svg-код региона, не выводится в административной панели.
Поля в метабоксе может изменять только пользователь с правами администратора.
Обратите внимание, что данные карты в svg-формате не проходят очистку через esc_attr или esc_html, поскольку в таком случае данные не будут выведены.
Кроме того, добавляя другие мета-поля, следите за тем, чтобы вводимые данные проходили через очищающие функции для большей безопасности Вашего сайта.