OSM и геопривязка постов

Это стёбовый вариант, нормальный ниже:) Картография на вордпрессе, при огромном количестве плагинов, архитектурно грамотных решений не имеет. Будем строить неграмотно!

Если необходимо создать ГИС (геоинформационную систему) хотя бы начального уровня, то нужно брать drupal, о том как это сделать я тоже как-нибудь напишу, а пока потренируемся на некритичных проектах.

Что было

Конечно же карты на блоге туриста появились давно, в виде двух плагинов:

• OTRIP Yandex MAP
• Leaflet Maps Marker

Первый делал очень простую вещь — через шорткод вставлял карту из конструктора яндекса. Когда-то это было востребовано, но то было десять лет назад, тогда же плагин последний раз обновлялся… Тут ещё надо отметить что формат карт сменился на новый, а ещё версия апи, а ещё перестали корректно отображаться маркеры, а ещё… короче доктор сказал в морг!

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

И всё это великолепие использовалось весьма ограниченно, для полтора десятка постов, причём навороченный для двух постов. По здравому размышлению принято решение что это СЛИШКОМ жирно!

Что стало

Там где были вставки карт яндекса переделано на iframe и пусть они дальше сами мудохаются со своими изменениями api и обратной совместимостью. Идея перерисовать имеющиеся карты внутри блога на внешние была хороша, но я решил для начала покопаться и обнаружил симпатичный плагинчик с что-то напоминающим названием:) OSM, который, для хранения маркеров, использует произвольные поля, что удобно и идеологически правильно. В качестве карт используются бесплатные OpenStreetMaps — очень лёгенькие в плане пожирания ресурсов, а также нет головняков с лицензиями и ключами (хотя платная версия всё же есть, как и ключи к ней, но это касается слоя с топографией при посещалке уровня крупного коммерческого проекта).

Карта постов

В процессе неторопливого ковыряния была обнаружена возможность прибить к постам координаты и вывести на карту… ОПАНЬКИ!!! А вот это уже гораздо интереснее чем тот функционал что я искал изначально!

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

Проблемы и решения

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

Во-вторых, пришлось потратить денёк, чтобы нарисовать нужные мне маркеры и вкрячить их в плагин. И ещё найти контакты автора и отправить ему пропатченную версию, очень надеюсь что не проигнорит, ну а если вдруг — надо будет написать скрипт, который запускается при обновлении и автоматически патчит…

В-третьих, собственно посты, ВНЕЗАПНО оказалось, что там бардак:) Впрочем, разгрёб оказался полезным в том плане, что кроме собственно прибивания координат (иногда с мучительными воспоминаниями где оно ваще было), нашлось с под сотню постов выпавших из общей структуры рубрик… последствия предыдущих перетряхиваний.

ColorNews Post Widget

В теме нет возможности вставить виджет внутрь поста, а у плагина есть виджет отображающий геотег поста, поэтому берём напильник и… Добавляем функционал при помощи механизма дочерних тем.

colornews-child/function.php

add_action( 'widgets_init', 'register_my_widgets' );
function register_my_widgets(){
	register_sidebar( array(
      'name'          => esc_html__( 'Post Sidebar', 'colornews' ),
      'id'            => 'colornews_post_sidebar',
      'description'   => __( 'Shows widgets at the Post Sidebar.', 'colornews' ),
      'before_widget' => '<aside id="%1$s" class="widget %2$s">',
      'after_widget'  => '</aside>',
      'before_title'  => '<h3 class="widget-title title-block-wrap clearfix"><span class="block-title"><span>',
      'after_title'   => '</span></span></h3>',
   ) );
}

 

colornews-child/template-parts/content-single.php

dynamic_sidebar( 'colornews_post_sidebar' );

css

.widget_osm_widget {
	padding: 0;
	margin-bottom: 0;
	border: none;
	font-size: 10px;
}
@media (max-width: 768px) {
	.widget_osm_widget {
		margin-right: 3%;
	}	
}