Как сделать интерактивную карту svg со своим дизайном wordpress?

Question

[sickgang]

Встал такой вопрос, есть карта нарисованная дизайнером в figma, пока она экспорирована как картинка.
Вопрос такой, как сделать так, чтобы при наведении на желтый кусочек карты, внизу под картой менялся заголовок, текст и ссылка на этот филиал, все филиалы сделаны как кастомные посты в wordpress?
Фото:

Возможно ли вообще это реализовать на Wordpress?

Answer 1

[jamtuson]

1. https://www.youtube.com/watch?v=6C-GYwxdZd4
2. добавляете потом дата - атрибут ко всем svg элементам, например: data-name="saratov-ook-alekseev"
3. Добавляете обработчик по наведению(с небольшой задержкой) на path забираете у него data-name и отправляете ajax запрос на получение поста
4. Рисуете пост

Comments

[sickgang]

Спасибо большое вам!!!

[sickgang]

Здравствуйте, у меня вот получается забрать id, а как именно получать посты по Id?
Создавать отдельный файлик php и каким то образом получать, или как?

[jamtuson]

https://wp-kama.ru/handbook/rest/wp-routes/posts
можете, если немного постов, то вывести их скрыто на странице и с кастомным полем, который будет совпадать с id на карте и при получении сравнивать и уже менять его видимость с display: none на display: block

[sickgang]

jamtuson, вроде как понял, но почему то выводит только обычные посты, записи, а кастомные посты мои он не выводит, вот это добавляю wp-json/wp/v2/posts/

[sickgang]

jamtuson, я вот нашел настройку в регистрации поста, что бы показывалось в REST Api, я поставил на true, все равно не получается получить

[sickgang]

jamtuson, все нашел, не правильно делал, надо было wp-json/wp/v2/название типа поста

[jamtuson]

sickgang, да, wp-json/wp/v2/city(например)
только вам не все посты надо получать, а только один, который соответствует выбранному id
получать вы его должны по meta полю

[sickgang]

jamtuson, я сделал вот так, на каждый path где должен быть вывод добавил v-on:mouseover с функцией в которую передаю id, и при отправке ajax запроса передаю id

[sickgang]

jamtuson, а вот еще такой вопрос, при получении так постов, нельзя получить ACF поля этого поста?

[jamtuson]

sickgang, можно, но тут уже не подскажу. Надо доки acf курить

[sickgang]

jamtuson, все у меня получилось, спасибо большое вам, а то бы сам не додумался

[jamtuson]

sickgang, рад, что смог помочь =)

Answer 2

[Lord_Dantes]

Возможно, полностью как сам не знаю как сделать но карта должна быть сразу разбита на области SVG формата и хотя бы верстка при клике на область - тоже должна быть.

Answer 3

[Орхан Гасанлы]

Здравствуйте!
Есть готовый плагин для ВП
https://ru.wordpress.org/plugins/html5-maps/
На оф. сайте компании можно сделать заказ карты или приобрести премиум версию - https://www.fla-shop.com/