Как сделать каталог компаний для сайта на 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>
Сперва подключается скрипт карт, затем задаем необходимые параметры отображения и через переменные заводим все свои конторы.
Страница фирмы
На карточке организации всё аналогично категории в плане вывод полей, только карта уже идет через конструктор Яндекс Карт. По сути, мы указываем Яндексу адрес и вставляем полученный код в поле, которое и выводит карту на странице фирмы.
К сожалению, я не могу показать конечный результат в действии, т.к. не хочу палить свой сайт.

Вебмастер. Интернет-предприниматель. Первый сайт создал в конце 90-х, еще в школе. Сертифицированный специалист. Участник ежегодных конференций по продажам, SEO, маркетингу, разработке сайтов, арбитражу трафика.
А ты не знаешь ка сделать такой каталог типа такого pochtabanki.ru?
Для меня тут единственная сложность - флеш-карта. Но по аналогии с примером из статьи аналог наполнять будет очень сложно - много времени займет.
Привет! С картой вообще не понятно. Какие переменные, как заводим?
На карте основа это:
вид маркера,
координаты центра,
координаты, названия, ссылки на страницы фирм.
Остальное - код из API Яндекса.
Вводить можно руками, как это делалось в рассмотренном в статье примере либо же через поля посредством php.