Добрый день!
Дизайнер нарисовал roadmap с целью последующей интеграции в тему wordpress.
Каждый пункт roadmapa должен будет редактироваться из админки.
Подскажите, пожалуйста, каким образом можно реализовать такую задачу?
Пробовал размечать области на картинке, но не могу к размеченным координатам привязать div с описанием пункта
Напрашивается что-то вроде SVG. Оно должно строиться скриптом на клиенте или один раз сгенериться на бэке и только показываться? Какая-то клиентская динамика (ховеры, например) подразумевается?
Должно строиться скриптом на клиенте, основная проблема при реализации - как привязать каждый пункт к конкретным координатам так, чтобы при масштабировании картинки каждый пункт оставался на своем месте. Самое простое и кривое решение это привязать каждый пункт через абсолютное позиционирование, но хотелось бы найти более "красивое" решение
Могу предложить следующий вариант - сделайте пользовательский непубличный тип записи, который будет отвечать за написание / редактирование / добавление пунктов roadmap. Редактирование из админки готово.
Теперь вызываем его на нужной странице с помощью WP_Query с сортировкой по времени, причем делаем так, чтобы дата отображения на ветке = дата выпуска поста. Поскольку пост не публичный, тут датой можно принебречь.
С помощью псевдоэлементов :ntd можно сделать так, что блоки через одного будут отображатся с одной, или с другой стороны. А если там сложное позиционирование, то просто добавьте id записи к id блока и с помощью стилей выравнивайте так, как нужно.
Простой
