CMS WordPress активно используется для создания не только блогов, но также для различных типов сайтов, начиная от простых сайтов-визиток до интернет-магазинов.
В нескольких заметках на своем блоге я расскажу, как можно использовать совместно API Яндекс.Карт и WordPress для создания картографического сервиса.
И начнем мы с установки WordPress на локальный компьютер.
Заходим на сайт по адресу http://ru.wordpress.org/ и скачиваем последнюю версию CMS Worpress.
В качестве локального сервера я использую Open Server — это портативная программная платформа, созданная специально для веб-разработчиков с учётом их рекомендаций и пожеланий.
Сайт программы — http://open-server.ru/
Я предлагаю загрузить версию Open Server Mini — урезанная версия Open Server.
Содержит в себе только серверную часть платформы без пакета дополнительных программ и документации по модулям.
Устанавливаем и запускаем программу, смотрите подробнее в этом видео
Устанавливаем WordPress и заходим в его админку.
Заметки на блоге будут представлять из себя метки на карте, а статьи дополнительные страницы.
Чтобы в месте с заметкой хранились значения координат установим дополнительный плагин, который я разработал по аналогичному для Google Maps.
Загрузить его можно здесь.
Устанавливаем и активируем плагин.
Создаем новую заметку и видим новые поля
В поле «Адрес» мы вводим адрес для нашей метки, например Нижний Новгород, ул. Белинского, 59.
Затем нажимаем кнопку «Определить координаты».
С лева от полей ввода появляется карта с меткой, а вполе «Координаты Lat/Lng » значения координат.
Мы можем подвинуть метку мышкой, если адрес определен не правильно.
Далее остальные поля заполняем как обычно.
Название заметки — это название метки, текст замеки будет отображаться в балуне, раздел — это категория метки.
Значок метки мы можем указать в свойстве «Миниатюра записи».
Как видите пока все просто.
Давайте выберем в качестве текущей темы Twenty Twelve, эта тема идет в составе дистрибутива WordPress.
И посмотрим на главную страницу.
Мы видим обычные записи.
Чтобы они выводились в виде меток на карте необходимо создать собственный шаблон.
Я предлагаю простой путь, взять за основу уже готовый шаблон и немного отредактировать его.
Вы можете взять любой шаблон, какой Вам нравиться и отредактировать его.
Я за основу шаблона взял Twenty Twelve.
В начале мы скопируем папку twentytwelve с файлами из каталога /wp-content/themes/ куда-нибудь в другое место на Вашем компьютере.
Переименуем саму папку и отредактируем несколько файлов.
Я переименовал ее в twentytwelveymaps.
Теперь заходим в неё.
С начала нам понадобится создать файл выводящий саму Яндекс.Карту.
Это будет файл map.js и создадим мы его в уже имеющейся папке js.
Вот его код:
ymaps.ready(init);
function init () {
var myMap = new ymaps.Map("map", {
center: [56.326944,44.0075],
zoom: 12
});
myMap.controls.add("zoomControl").add("typeSelector").add("mapTools");
for (var i = 0;i < locations.length;i++) {
myPlacemark = new ymaps.Placemark(locations[i].latlng, {
balloonContent: locations[i].info
}, {
iconImageHref: locations[i].marker
});
myMap.geoObjects.add(myPlacemark);
}
} |
В этом примере координаты центра карты для Нижнего Новгорода, координаты для своего города Вы сможете определить здесь ()
Далее нам необходимо подключить API Яндекс.Карт и наш новый файл map.js в разделе head шаблона.
Для этого мы открываем файл header.php и сразу после строки
<title><?php wp_title( '|', true, 'right' ); ?></title> |
Добавляем две строчки кода:
<script src="http://api-maps.yandex.ru/2.0/?lang=ru-RU&load=package.full" type="text/javascript"></script> <script type="text/javascript" src="<?php echo get_stylesheet_directory_uri() ?>/js/map.js"></script> |
Сохраняем файл.
Теперь открываем файл functions.php и добавляем в него новую функцию
function get_thumbnail_path($post_ID) {
$post_image_id = get_post_thumbnail_id($post_ID->ID);
if ($post_image_id) {
$thumbnail = wp_get_attachment_image_src( $post_image_id, 'post-thumbnail', false);
if ($thumbnail) (string)$thumbnail = $thumbnail[0];
return $thumbnail;
}
} |
Перед последней функцией twentytwelve_customize_preview_js
Сохраняем файл.
Открываем файл index.php
В нем удаляем весь код начиная от строки
<div id="content" role="main"> |
до строки
</div><!-- #content → |
И вставляем вот этот:
<?php if ( have_posts() ) : ?>
<!-- WordPress has found matching posts -->
<div style="display: none;">
<?php $i = 1; ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php if ( get_geocode_latlng($post->ID) !== '' ) : ?>
<div id="item<?php echo $i; ?>">
<p><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>
<?php the_content(); ?>
</div>
<?php endif; ?>
<?php $i++; ?>
<?php endwhile; ?>
</div>
<script type="text/javascript">
var locations = [
<?php $i = 1; while ( have_posts() ) : the_post(); ?>
<?php if ( get_geocode_latlng($post->ID) !== '' ) : ?>
{
latlng : <?php echo '[', get_geocode_latlng($post->ID), ']'; ?>,
info : document.getElementById('item<?php echo $i; ?>'),
<?php if ( has_post_thumbnail() ) { ?>
// There is a Featured Image
marker : '<?php echo get_thumbnail_path($post->ID); ?>'
//marker : new google.maps.MarkerImage('<?php echo get_thumbnail_path($post->ID); ?>', new google.maps.Size(20, 34) )
<?php } else { ?>
// No Featured Image, use fallback
//marker : new google.maps.MarkerImage('<?php echo get_stylesheet_directory_uri() ?>/pink_Marker.png', new google.maps.Size(20, 34) )
marker : 'http://api.yandex.ru/maps/doc/jsapi/2.x/ref/images/styles/cinema.png'
<?php } ?>
},
<?php endif; ?>
<?php $i++; endwhile; ?>
];
</script>
<div id="map" style="width: 100%; height: 500px;"></div>
<?php else : ?>
<!-- No matching posts, show an error -->
<h1>Error 404 — Page not found.</h1>
<?php endif; ?> |
Сохраняем файл.
Теперь копируем всю папку twentytwelveymaps в каталог шаблонов WordPress /wp-content/themes/.
Заходим в админку, Внешний вид → Темы и активируем новую тему Twenty Twelve/twentytwelveymaps.
Переходим на главную страницу сайта и видим
Нам нужно ещё настроить виджеты, чтобы с правой стороны отображались рубрики.
Мы получим следующее
Кликаем по метке, открывается балун с информацией
Если кликнуть по названию, то открывается заметка.
Можно оставить и так, а можно сделать чтобы при клике по категориям с права на карте выводились метки только данной категории.
Для этого из папки шаблона необходимо удалить файлы category.php и archive.php
А чтобы не выводилась заметка файл single.php.
Уже что-то получается.
Теперь можно сделать отдельные страницы для каждой метки с подробным описанием.
Займемся этим в следующей заметке.
Загрузить тему Twenty Twelve с Яндекс.Картой.