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

kat-2

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

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

kat-3

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

<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 Яндекса и узнать координаты тех контор, которые мы размещаем в каталог.

kat-4

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

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

<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>

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

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

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

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

Понравилась статья? Расскажи о ней друзьям!
4 комментария

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *