Как сделать каталог компаний для сайта на WordPress

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

• сайт на базе WordPress;
• плагин Advanced Custom Fields;
• API Яндекс Карты;
• внимательность и усидчивость;
• базовые знания PHP, HTML, JS (jQuery) и CSS.

Вроде бы всё. Делается всё довольно легко и знания скриптов и стилей потребуются только для стилизации фрагментов интерфейса под дизайн вашего сайта. Также стоит отметить, что с апи карт работа будет идти в ручном режиме, поэтому для каталога с объемами более 50 фирм это может быть не лучшим вариантом. Хотя, тут есть неоспоримый плюс - халява!

Теперь про функционал:

• все конторы выводятся на общей карте мира (мы продвигаемся под Яндекс, поэтому на базе API Яндекс.Карты);
• при клике на описание маркера на карте посетитель переходит непосредственно на страницу с подробным описанием фирмы;
• для каждой фирмы в базовом формате (мне пока больше не нужно) предусмотрено порядка 7 полей данных: адрес, телефон, расположение на карте, логотип, сайт, описание, название и т.д.;
• количество вводимых данных по каждой фирме можно увеличить в неограниченных количествах.

Чего нет:

• поиска;
• листингов с городами и станциями метро;
• автоматизации работы с картой (координаты надо указывать в скрипте API руками);
• посадочных страниц каталога под каждый отдельный адрес.

Когда такой вариант не подойдет:

• нужна авторегистрация с постингом в каталог;
• планируется заводить более 50 организаций;
• не хочется копаться в коде.

Если вышеописанное вас не остановило, дальше пойдет принцип реализации.

Пошаговая инструкция

Создаем новую категорию для статей. Заходим внутрь и выписываем себе id раздела. Найти его можно в URL, когда категория открыта на редактирование.

Коннектимся к серверу через FTP и создаем новые шаблоны с именем формата category-id.php и single-id.php для раздела будущего каталога и карточки фирмы соответственно.

В плагине Advanced Custom Fields делаем новую группу полей и добавляем внутрь несколько полей. В моем случае они текстовые и названы в соответствие с содержимым. Называть можно как угодно - зависит от специфики тех данных, которые вы планируете собирать с фирм и выводить у себя в каталоге. В настройках местоположения группы выбираем только что созданную категорию. Так эти поля будут показаны лишь в нужном разделе сайта.

Затем переходим непосредственно к созданию каталога. Открываем на редактирование созданные изначально шаблоны и в том месте, где мы хотим вывести данные прописываем куски кода для вывода данных полей. Они имеют такой вид: <?php the_field('telephone'); ?> Где в одинарных кавычках указывается имя поля.

Если вдруг становится непонятно, объясняю: предположим, нам надо получить такую картину (вид фирмы в общем списке).

То это можно реализовать следующим образом:

<header><div class="title"><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" rel="bookmark"><?php the_title(); ?></a></div></header><div class="frm-anons"><p class="frm1"><?php the_field('adress'); ?></p><p class="frm2"><?php the_field('telephone'); ?></p><p class="frm3"><?php the_field('site'); ?></p></div>

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

Иконки добавляются через классы к параграфам.

Интерактивная карта

Для реализации карты нам потребуется подключить на сайт API Яндекса и узнать координаты тех контор, которые мы размещаем в каталог.

Код по желанию можно брать с Яндекса или из статьи. Разница лишь в том, что в описании к апи есть комменты, но там надо собирать всё по частям, а у меня единым блоком и под конкретные задачи.

В моем случае используется такой вариант:

<div id="map" style="width: 100%; height: 350px">
<script src="http://api-maps.yandex.ru/2.1/?load=package.full&lang=ru_RU" type="text/javascript"></script>
<script>
jQuery(document).ready(function() {
ymaps.ready(function(){
myMap = new ymaps.Map("map", {
center: [55.000000,37.000000],zoom: 7
})
var myGeoObjects = [];
var myClusterer = new ymaps.Clusterer({clusterDisableClickZoom: true, preset: 'islands#CircleIcons',});
myClusterer.options.set({
gridSize: 340
});
var firm1 = new ymaps.Placemark([55.000000,37.000000],
{
clusterCaption: '"Секретная контора"',
balloonContentBody: '<a target="_blank" href="http://site.ru/katalog/sekret.html">"Секретная контора"</a>'
},
{
type: "Point",
preset: "islands#CircleIcon",
iconColor: '#333',
coordinates: [55.000000,37.000000]
}
);
myClusterer.add(firm1);
myMap.geoObjects.add(myClusterer);
});
});
</script>
</div>

Сперва подключается скрипт карт, затем задаем необходимые параметры отображения и через переменные заводим все свои конторы.

Страница фирмы

На карточке организации всё аналогично категории в плане вывод полей, только карта уже идет через конструктор Яндекс Карт. По сути, мы указываем Яндексу адрес и вставляем полученный код в поле, которое и выводит карту на странице фирмы.

К сожалению, я не могу показать конечный результат в действии, т.к. не хочу палить свой сайт.